5大CSS重点、难点、易错点总结，入门学前端必看

最近跟粉丝同学反馈，CSS中知识点多，在学习过程中，学到后边忘记前面。有些相似的内容很容搞混，弄得自己学起来特别的吃力和头痛。要对这些容易搞混点的做好区分，最好的办法就是把他们整合到一起来对比总结分析。

做我的粉丝我宠你， 于是，我分了上中下两篇来把这些易错的难点整理出来，本篇内容概要：

1. CSS中不同属性值%百分比单位计算；

2. line-height的继承问题

3. img图片和 display: inline-block; 产生空白间隙的3种解决方案？

4. 什么叫优雅降级和渐进增强？

5. CSS选择器权重；

1、CSS中不同属性值%百分比单位计算

在css中有很多属性值的单位可以是用%百分比表示，那%百分比最终的计算结果是多少？

比如 margin-top:100%; 这里的margin-top的值最终是多少呢？

margin-top的百分比是相对于父元素的width值而言，如果父元素width为100px，则margin-top:100%;换算后的值就是100px;

以下是常见属性%百分比单位计算

css属性	标准盒模型 content-box	怪异盒模型border-box
width、height	%百分比相对于父元素的width值	%相对于（width-pading-border)的值
margin和padding	%百分比相对于父元素的width值	%相对于（width-pading-border)的值
top、bottom	%百分比相对于父元素的（width+上下padding)	%相对于（width-左右border)的值
right、left	%百分比相对于父元素的（height+左右padding)	%相对于（height-上下border)的值
line-height	%百分比相对于自身的font-size大小	无关
font-size	%百分比相对于父元素的font-size大小	无关