移动端样式问题汇总

1，去掉移动端苹果手机点击时阴影

div {

-webkit-tap-highlight-color：rgba（0，0，0，0）;

}

2，输入去掉边框，单击阴影，下划线

输入{

边界：0;

大纲：无；

-webkit-tap-highlight-color：rgba（0，0，0，0）;

-webkit-appearance：无；

}

3，css画箭头

.arrow-right {

宽度：12px；

高度：12px；

边框底部：1px实心＃999;

右边框：1px实线＃999;

变换：rotate（-45deg）;

}

4，超过1行/ 2行显示省略号

.line-1 {

宽度：100px；

空白：nowrap;

溢出：隐藏；

文字溢出：省略号；

}

.line-2 {

宽度：100px；

溢出：隐藏；

文字溢出：省略号；

显示：-webkit-box;

-webkit-line-clamp：2; //控制多行的行数

-webkit-box-orient：垂直;

}

5，水平/垂直居中定位

//绝对定位未知高度，距顶部，左边50％，然后转换：translate（-50％，-50％），不支持IE9以下

。中央{

位置：绝对；

最高：50％;

左：50％;

转换：translate（-50％，-50％）;

}

//绝对定位已知高度

。中央 {

保证金：自动；

位置：绝对；

最高：0;

底部：0

左：0；

正确：0；

}

//绝对定位已知高度

。中央 {

位置：绝对；

最高：50％；

左：50％；

边距：-50px 0 0 -50px; //假设宽高都为100px

}

//弹性布局

。中央{

显示：flex;

align-items：center;

证明内容：中心；

}

6，iPhone X页面适应

具体参考https://www.cnblogs.com/lolDragon/p/7795174.html

<meta name =“ viewport” content =“ width = device-width，初始比例= 1.0，最小比例= 1.0，最大比例= 1.0，用户可缩放比例=否，viewport-fit = cover”>

身体{

padding-top：constant（安全区域插入顶部）;

padding-bottom：constant（safe-area-inset-bottom）;

padding-left：constant（安全区域插入左）;

padding-right：constant（安全区域插入权）;

}

7，占位符样式设置

::-webkit-input-placeholder {} / *使用webkit内核的浏览器* /

：-moz-placeholder {} / * Firefox版本4-18 * /

::-moz-placeholder {} / * Firefox版本19+ * /

：-ms-input-placeholder {} / * IE浏览器* /

//冒号前写input或textarea等元素

// IE9和Opera12以下版本的CSS选择器均不支持占位文本

8，去掉图片底部至少边距

img {

边界：0;

垂直对齐：底部；

}

9，去掉按钮点击高亮样式

按钮{

-webkit-tap-highlight-color：透明；

}