20个非常实用的CSS技巧

2020-05-11 18:10:33易采站长站整理

  -webkit-font-smoothing: antialiased;   
  text-rendering: optimizeLegibility;   
}   
  

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

10. 对纯 CSS 滑块使用 max-height

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

CSS Code复制内容到剪贴板

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

11. 继承 box-sizing

让 box-sizing 继承 html:

XML/HTML Code复制内容到剪贴板

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

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

12. 表格单元格等宽

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

CSS Code复制内容到剪贴板

.calendar {   
  table-layout: fixed;   
}   
  

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

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

CSS Code复制内容到剪贴板

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

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

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

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

CSS Code复制内容到剪贴板

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

相当方便。

15. 检测鼠标双击

HTML:

XML/HTML Code复制内容到剪贴板

<div class="test3">  
  <span><input type="text" value=" " readonly="true" />  
  <a href="http://renpingjun.com">Double click me</a></span>