css常见的一些界面问题处理技巧

1.修改placeholder及兼容处理

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: red;
}
:-moz-placeholder {/* Firefox 18- */
  color: red;
}
::-moz-placeholder{/* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

2.cursor

cursor: not-allowed;鼠标变成“无法点击”的样式

3.文字溢出隐藏，并且显示为省略号

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

4.去除input默认的X号和小眼睛

::-ms-clear, ::-ms-reveal{display: none;}
//直接加在css文件里面，或者html的style标签里面就行。

5.纯数字或字母不自动换行

word-break: break-all;

6.个别电脑上的个别浏览器界面样式错乱问题

可能性之一是这台电脑上的浏览器有一些插件，和样式的类名有冲突。

7.优雅的增加icon按钮点击区域

.icon- bigger { 　
     width: 16px; 　
     height: 16px; 　
     border: 11px solid transparent; 　 /**点击区域大小从16*16提升到了38*38**/
}

8.::before 和:before有什么区别？

• 相同点
  都可以用来表示伪类对象，用来设置对象前的内容
  :befor和::before写法是等效的
• 不同点
  :befor是Css2的写法，::before是Css3的写法
  :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好
  注意：
  伪类对象要配合content属性一起使用(必须)
  伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
  伪类对象的特效通常要使用:hover伪类样式来激活

.test:hover::before { /* 这时animation和transition才生效 */ }  

9.z-index

z-index有从父原则，父元素z-index低于别人了，你再怎么提升z-index都没用

10.user-select:none

该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容。

11.注意外边距塌陷

上下的垂直外边距margin在同时存在时会发生外边距塌陷。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。

12.将图片作为背景

将图片作为背景背景，可以通过background-size, background-position和其它的属性，使得保持或改变图片原始尺寸和宽高比会更方便。

13.去除表格双倍边框

border-collapse: collapse