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    24px
20px    30px
30px    45px
40px    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;
}