div+css布局 一波CSS高级实用技巧小结(4/5)

本篇文章主要介绍了"div+css布局 一波CSS高级实用技巧小结"，主要涉及到div+css布局方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框CSS Code复制内容到剪贴板/* add border */ .nav li { ...

1. .slider ul {   
2.   max-height: 0;   
3.   overlow: hidden;   
4. }   
5.   
6. .slider:hover ul {   
7.   max-height: 1000px;   
8.   transition: .3s ease;   
9. }  

继承 box-sizing

让 box-sizing 继承 html：

CSS Code复制内容到剪贴板

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

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

表格单元格等宽

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

CSS Code复制内容到剪贴板

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

用Flexbox摆脱外边距的各种hack

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

CSS Code复制内容到剪贴板

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

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

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