11个提高CSS技巧的小知识，你知道吗？

Posted 2020-10-24 mhxy13867806343

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了11个提高CSS技巧的小知识，你知道吗？相关的知识，希望对你有一定的参考价值。

前端开发越来越侧重于效率和性能，使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利。但是也有很多简单的方法可以编写小巧快速的CSS代码，提高开发效率并解决许多常见的问题。

1.使用CSS reset

像normalize.css这样的CSS重置库非常受欢迎，它为您的站点样式提供了一个清爽的选择，能确保浏览器之间更好的一致性。而实际上并不是每个项目都需要这些库中包含的所有规则，我们可以通过一些简单的css规则就能规避浏览器之间的差异。请看下面的盒模型代码：

1 * {     
2   box-sizing: border-box;    
3   margin: 0;     
4   padding: 0;   
5 }

2.继承 box-sizing

让 box-sizing 继承 html：

1 html {     
2     box-sizing: border-box;   
3 }     
4 *, *:before, *:after {     
5     box-sizing: inherit;   
6 }

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

3. 使用Flexbox摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

1 .list { 
2   display: flex; 
3   justify-content: space-between; 
4 } 
5  
6 .list .person { 
7   flex-basis: 23%; 
8 }

4.使用 :not() 定义菜单边框

我们要定义菜单列表的边框，然后去掉最后一个菜单的边框，通常做法是：

1 .nav li {     
2     border-right: 1px solid #666;   
3 } 
4 .nav li:last-child {     
5     border-right: none;   
6 }

而我们现在可以直接使用 :not() 伪类来应用元素，让代码就干净，易读，易于理解了。

1 .nav li:not(:last-child) {     
2     border-right: 1px solid #666;   
3 }

5.给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

1 body { 
2   line-height: 1.5; 
3 }

6.垂直居中

要将所有元素垂直居中，使用以下代码：

 1 html, body {     
 2     height: 100%;     
 3     margin: 0;   
 4 }     
 5 body {     
 6     -webkit-align-items: center;     
 7     -ms-flex-align: center;     
 8     align-items: center;     
 9     display: -webkit-flex;     
10     display: flex;   
11 }

7.使用SVG作为图标

SVG可以适应不同的分辨率，并且在所有的浏览器中都支持，还有什么理由不用呢。

1 .logo {     
2     background: url("logo.svg");   
3 }

8.等宽的表格单元格

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

1 .calendar { 
2   table-layout: fixed; 
3 }

9.使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

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

10.图片不存在的替代样式

由于某种原因导致图片加载失败，这时我们使用css来友好的告诉用户图片出状况了。

 1 img {     
 2     display: block;     
 3     font-family: Helvetica, Arial, sans-serif;     
 4     font-weight: 300;     
 5     height: auto;     
 6     line-height: 2;     
 7     position: relative;     
 8     text-align: center;     
 9     width: 100%;   
10 } 
11 img:before {     
12     content: "We‘re sorry, the image below is missing :(";     
13     display: block;     
14     margin-bottom: 10px;   
15 }     
16 img:after {     
17     content: "(url: " attr(src) ")";    
18     display: block;     
19     font-size: 12px;   
20 }