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的一些缺陷行为）

1. html,body{height:100%;margin:0;}

2. body {

3. -webkit-align-items: center;

4. -ms-flex-align: center;

5. align-items: center;

6. display: -webkit-flex;

7. display: flex;

8. }

4、逗号分离的列表

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

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

1. 在CSS使用负nth-child选择1到n的元素。

2. li {display: none;}

3. li:nth-child(-n+3) {display: block;}//选择1到3的元素并显示

4. 伪类 :not()方法：

5. li:not(:nth-child(-n+3)){display: none;}//选择1到3的元素并显示

6.  

7. 使用SVG图标：

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

9. SVG对所有分辨率类型具有良好的伸缩性，IE9以上的所有浏览器都支持。所以放弃.png，.jpg或gif-jif等任何文件。

10. 注意：如果你使用SVG图标按钮，同时SVG加载失败，下面能帮助你保持可访问性：

11. .no-svg .icon-only:after {content: attr(aria-label);}

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

1. .ul ul{max-height:0;overflow:hidden;}

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

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

1. 从html继承box-sizing

2. html{box-sizing:border-box;}

3. , :before, *:after {box-sizing: inherit;}

8、表格单元格等宽

table-layout:fixed;

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

1. .list{display:flex;justidy-content:space-between;}

2. .list .person{flex-basis:23%;}