CSS 快速提升技巧

使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它 

*{
     box-sizing:border-box;
     margin:0;
     padding:0
}

让盒模型从html 继承：

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

当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。

为了避免nth-、first-、last-child 问题 ，可以使用flexbox 的space-between 属性值。

.flex-container{
  display:flex;
  justify-content:space-between;
}
.flex-container .item{              
  flex-basis:23%;
}

使用:not() 解决lists边框的问题

在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。

比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。

然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！

当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。

body上加入line-height样式

导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。

实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。