-
通过设置css属性
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色 -
设置css属性
-webkit-user-select:none;控制用户不可选择文字 -
区域性
overflow: scroll | auto滚动时使用原生效果：-webkit-overflow-scrolling: touch（ios8+，Android4.0+） -
单行、多行溢出省略
/* 单行省略 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行省略 */ .ellipsis-2l { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 数值代表显示几行 */ -webkit-box-orient: vertical; } -
<!-- html结构 --> <body> <div class="wrap"> <div class="box"></div> </div> </body> /* css样式 */ /* (1) 模仿单行文字居中的方式 */ .wrap { 200px; height: 80px; line-height: 80px; } .box { display: inline-block; vertical-align:middle; } /* (2) 已知宽高，通过position:absolute; */ .wrap { 200px; height: 200px; position: relative; } .box { 100px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -40px; } /* (3) 未知宽高，通过css3属性 transfrom */ .wrap { 200px; height: 200px; position: relative; } .box { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* (4) 通过flex布局 */ <!-- html结构 --> <body> <div class="wrap flexbox flexbox-center flexbox-middle"> <div class="box"></div> </div> </body> /* css样式 */ .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* 水平居中 */ .flexbox-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* 垂直居中 */ .flexbox-middle { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } -
retina屏幕实现真正的1px边框
<!-- html结构 --> <body> <div class="box retina-border rt-bd-all"></div> </body> /* css样式 */ .box { 200px; heigth: 100px; box-sizing: border-box; border: 1px solid #aaa; } /* 去掉元素原有的边框 */ .retina-border { position: relative; border: none; } /* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/ .retina-border:after { content: ''; display: block; 200%; height: 200%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 0px solid #aaa; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.5); transform: scale(.5); } .rt-bd-all:after { border- 1px; } /* 如果只是想设置一条边框，可以这样改一下，以此类推 */ <!-- html结构 --> <body> <div class="box retina-border rt-bd-b"></div> </body> /* css样式 */ .tr-bd-b:after { border-bottom- 1px; } .tr-bd-t:after { border-top- 1px; } .tr-bd-l:after { border-left- 1px; } .tr-bd-r:after { border-right- 1px; }