amazeUI部分属性笔记

更新时间:2023-05-22 01:42:12 阅读: 评论:0

 响应式布局
 响应式辅助类控制元素显隐 am-show-md-down  am-hide-md-down
我最棒
 边距离 am-u-sm-offt-1(1-10)
 列居中 am-u-xx-centered  如 am-u-sm-centered 
奶茶广告语 列不居中 am-u-xx-uncentered  如  am-u-sm-uncentered
 列排序:处于SEO考虑,有时会有一些结构和表现不一致的情况,可以通过am-u-xx-push-*/am-u-xx-pull-*来实现。
 移出行内边距 am-g-collap
潮汕牛肉丸水平滚动 am-scrollable-horizontal 
  垂直滚动 am-scrollable-vertical
  清除浮动 am-cf 
  创建新的BFC清除浮动  am-nbfc
  左浮动 am-fl
  右浮动 am-fr
  水平居中 am-center
  垂直对齐原理是把父容器内的“幽灵”元素的高度设置为100%,再通过设置需要对齐的元素vertical-align属性实现。
  am-vertical-align  将这个class添加到父容器中,父容器需要指定高度
自闭儿童
  am-vertical-align-middle  需要垂直居中的元素
  am-vertical-align-bottom  添加到需要底部对齐的元素
  am-block  display设置为block
  am-inline  display设置为block
  am-inline-block display设置为inline-block 
  am-hide 隐藏元素
  尺寸 xs:5px  sm:10px  default:16px  lg:24px  xl:32px 
  文本颜色  am-text-xx(primary;condary,success,warning,danger)
  链接颜色默认为蓝色,使用am-link-muted可以将链接颜色设置为灰色
  文字大小 am-text-xs:12px am-text-sm:14px am-text-default:16px am-text-lg:18px am-text-xl:24px  am-text-xxl:32px am-text-xxxl:42px
  文本对齐 am-text-left(左对齐) am-text-right(右对齐) am-text-center(居中) am-text-justify(自适应)
  文本垂直对齐 am-text-top顶对齐  am-text-middle居中对齐  am-text-bottom底对齐
  am-text-truncate 禁止换行,超出容器部分阶段。以...结束
乔四的故事
  am-text-break 超出文字容器宽度时强制换行,主要用于英文排版我最什么的人
  am-text-nowrap 禁止换行,不截断超出容器宽度部分
  Webkit内核的浏览器可以通过-webkit-line-clamp私有属性实现多行文字截取。其他浏览器没有这个属性,通常做法是把容器的高度限定为行高*显示的行数,超出的部分隐藏。
  .line-clamp {
    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
    -webkit-line-clamp: 2; // 这里修改为要显示的行数
    -webkit-box-orient: vertical;
  }
 
  CSS Image Replacement,图片替换计算兼顾显示效果、可仿性、SEO。使用am-text-ir class结合背景图片实现图片替换
  使用float实现类似html的align属性的效果,父容器要清楚浮动。与.am-fl、am-fr相比,浮动的元素添加了margin。am-align-right am-align-left
率领  调整浏览器窗口大小查看元素的显隐 am-[show|hide]-[sm|md|lg][-up|-down|-only]
  am-show-sm-only 只在sm区间显示
  am-show-sm-up  大于sm区间时显示
  am-show-md-down 小于sm区间时显示
椒盐烤虾
  am-show-sm 在sm区间显示
  横屏 am-show-landscape  am-hide-landscape
  竖屏 am-show-portrait  am-hide-portrait

本文发布于:2023-05-22 01:42:12,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/726356.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:容器   元素   显示   超出   需要   属性   实现   浏览器
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图