前端开发越来越侧重于效率和性能，使用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 } 11.在表单元素上设置font-size
为了避免移动浏览器（iOS Safari等）在点击<select>下拉菜单时放大HTML表单元素，请将font-size添加到输入样式中：
1 input[type="text"], ??2 input[type="number"], ??3 select, ??4 textarea { ????5 ????font-size: 16px; ??6 } 来源:11个提高CSS技巧的小知识，你知道吗？
11个提高CSS技巧的小知识，你知道吗？
原文地址：https://www.cnblogs.com/mhxy13867806343/p/8448596.html