css常用技巧

1：从 html 元素继承 box-sizing

 html {     box-sizing: border-box; } *, *:after, *:before {     box-sizing: inherit; }

2：使用 :not() 选择器来决定表单是否显示边框

//第一种方式ul li {    float: left;    width: 50px;    border-right: 1px solid #666;}li:last-child {    border-right: none;}//第二种方式li {    width: 50px;    height: 50px;    float: left;    margin-left: 30px}li:not(:last-child) {    border-right: 1px solid #666;}

3：body 元素添加行高 ,精确计算元素标签设置，字体之后的高度。

body {    line-height: 1.5;}//测试元素  h1,h2,h3,h4,h5,h6 p ,div span st //左侧设置字体大小 ，右侧对象该元素的高度16px    24px20px    30px30px    45px40px    60px// 多出的部分减去设置字体大小，上下各占一半 

4:display flex 水平 垂直居中

// 在要想垂直元素的父元素设置即可，注意兼容性    display: flex;    display: -webkit-flex;    align-items: center;    /*垂直居中*/    justify-content: center;    /*水平居中*/

5：逗号分隔列表

li:not(:last-child)::after {    content: ',';}// 还没有真实用过，下次试试

6：使用负的 nth-child 可以选择 1 至 n 个元素。

li:nth-child(-n+3) {}li:not(:nth-child(-n+3)) {}

7：相邻兄弟选择器 +

// 挺好用的li + a {}

8 ：使用 max-height 来建立纯 CSS 的滑块

.slider {  max-height: 200px;  overflow-y: hidden;  width: 300px;}.slider:hover {  max-height: 600px;  overflow-y: scroll;}

9：table-layout: fixed 可以让每个格子保持等宽：

table {  table-layout: fixed;}

10：利用 Flexbox 去除多余的外边距 （适合单行 ，并没有发现有多好 ,列之间的间隙总是均匀相等）

.list {  display: flex;  justify-content: space-between;}.list .item {  flex-basis: 23%;}

11:利用属性选择器来选择空链接

a[href^="http"]:empty::before {    content: attr(href);}

12:用 rem 来调整全局大小；用 em 来调整局部大小

rem // 是相对HTML元素设置大小em  //  相对父级元素的大小进行设置

13：隐藏没有静音、自动播放的影片

video[autoplay]:not([muted]) {  display: none;}// 还没有用过 有机会一定尝试一下

14 ：为更好的移动体验，为表单元素设置字体大小

//当触发<select>的下拉列表时，为了避免表单元素在移动浏览器（ios Safari 等等）上的缩放，加上font-size：input[type="text"],input[type="number"],select,textarea {  font-size: 14px;}