CSS之小技巧(2)

1、使用伪类:not()去除导航上某个不需要的边框或者添加

li:not(:last-child){border-right:1px solid #ccc;}//给你指定的某个元素添加右边框

2、为body添加行高，这样就不需要分别为每一个p,h*等元素添加行高，因为文本元素会从body继承；

body{line-height:1;}

3、垂直居中任何元素(注意：IE11上flexbox的一些缺陷行为）

html,body{height:100%;margin:0;}
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

4、逗号分离的列表

ul > li:not(:last-child)::after {content: ",";}

5、使用负nth-child选择元素

在CSS使用负nth-child选择1到n的元素。
li {display: none;}
li:nth-child(-n+3) {display: block;}//选择1到3的元素并显示 
伪类 :not()方法：
li:not(:nth-child(-n+3)){display: none;}//选择1到3的元素并显示 

使用SVG图标：
.logo {background: url("logo.svg");}
SVG对所有分辨率类型具有良好的伸缩性，IE9以上的所有浏览器都支持。所以放弃.png，.jpg或gif-jif等任何文件。
注意：如果你使用SVG图标按钮，同时SVG加载失败，下面能帮助你保持可访问性：
.no-svg .icon-only:after {content: attr(aria-label);}

6、在纯CSS实现的内容化快上使用max-height（同时设置overflow:hidden）

.ul ul{max-height:0;overflow:hidden;}
.ul:hover ul{max-height:1000px;transition: .3s ease; /* animate to max-height */}

7、继承box-sizing(让插件或使用其他行为的组件能很容易改变box-sizing）

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

8、表格单元格等宽

table-layout:fixed;

9、使用Flexbox拜托边界Hack(当使用列约束时,可以抛弃nth-,first- 和last-child的hacks,使用flexbox的space-between属性)

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

浏览器支持：当前版本的Chrome，Firefox， Safari， 以及Edge， 和IE11