一波CSS高级实用技巧小结

就是这么容易。

对图标使用SVG

我们没有理由不对图标使用SVG：

CSS Code复制内容到剪贴板

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

SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

CSS Code复制内容到剪贴板

html {   
  -moz-osx-font-smoothing: grayscale;   
  -webkit-font-smoothing: antialiased;   
  text-rendering: optimizeLegibility;   
}  

注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

对纯CSS滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块：

CSS Code复制内容到剪贴板

.slider ul {   
  max-height: 0;   
  overlow: hidden;   
}   
  
.slider:hover ul {   
  max-height: 1000px;   
  transition: .3s ease;   
}  

继承 box-sizing

让 box-sizing 继承 html：

CSS Code复制内容到剪贴板

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

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

表格单元格等宽

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

CSS Code复制内容到剪贴板

.calendar {   
  table-layout: fixed;   
}  

用Flexbox摆脱外边距的各种hack

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

CSS Code复制内容到剪贴板

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

现在，列表分隔符就会在均匀间隔的位置出现。

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