冷门但是实用的CSS样式

::-Webkit-Input-Placeholder

H5中不能直接改变placeholder 的颜色,所以用input-placeholder属性实现

1.png

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

使用 clearfix 清楚浮动，解决父类高度崩塌

.clearfix {
    zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";  /* 内容为空 */
     clear: both;
     height: 0;
 }

p::selection选中文本后的背景色

2.png

p::selection {
            background: rgb(255, 120, 120);
            color: white;
        }

calc() function, 计算属性值(面试问到过)

div {
    width: calc(100% - 100px);
}