1、去掉移动端苹果手机点击时阴影
div {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
2、input去掉边框、点击阴影、下划线
input {
border: 0;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
}
3、css画箭头
.arrow-right {
width: 12px;
height: 12px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
transform: rotate(-45deg);
}
4、超出1行/2行显示省略号/换行
.line-1 {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-2 {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 控制多行的行数
-webkit-box-orient: vertical;
}
.wrap{
width: 180rpx;
text-align: justify; // center居中对齐
text-justify: newspaper;
word-break: break-all;
}
5、水平/垂直居中定位
// 绝对定位未知高度,距顶部、左边50%,然后transform:translate(-50%,-50%),不支持IE9以下
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
// 绝对定位已知高度
.center {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
// 绝对定位已知高度
.center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px; // 假设宽高都为100px
}
// 弹性布局
.center{
display:flex;
align-items:center;
justify-content:center;
}
6、iPhone X页面适配
具体参考 https://www.cnblogs.com/lolDragon/p/7795174.html
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
body{
padding-top:constant(safe-area-inset-top);
padding-bottom:constant(safe-area-inset-bottom);
padding-left:constant(safe-area-inset-left);
padding-right:constant(safe-area-inset-right);
}
7、placeholder样式设置
::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */
:-moz-placeholder{} /* Firefox版本4-18 */
::-moz-placeholder{} /* Firefox版本19+ */
:-ms-input-placeholder{} /* IE浏览器 */
// 冒号前写input或textarea等元素
// IE9和Opera12以下版本的CSS选择器均不支持占位文本
8、去掉图片底部默认边距
img {
border: 0;
vertical-align: bottom;
}
9、去掉按钮点击高亮样式
button{
-webkit-tap-highlight-color: transparent;
}
