前端题目集css

HTML:

 <div style="font-size: 20px">
    <span style="font-size: 30px">test</span>
</div> 

CSS:

div.per{ line-height: 150%; }

div.per{ line-height: 1.5; } 

问：这两个定义之间有什么区别？

答： 150%  div与span=30px；1.5  span=30px,div=45px（后期编辑的时候添加图像吧）

考查的点有：

1) css property 的计算

2) css继承

3) line-height property的number和percentage之间的关系

分析：

 1) 每个css属性的值，比如font-size: 13px。都经过4个计算步骤

这四个步骤是： 1.specified value 2.computed value 3.used value 4.actual value

1.specified value 起始值，从author、user、agent里面取值（层叠），如果没有找到这个元素对应的样式值则寻找父元素是否可以继承，如果还是没有，则使用属性的原始值
2.computed value，第一步计算完成的值在这里会被转换，比如em,ex等单位会被转换成实际的像素值。

3.used value 因为第二步是在文档format之前做的，也就是说元素的宽度等还未建立，所以有些属性值，比如width: 50%，就在这个时候计算。
4.actual value 最后这个值是实际浏览器所表现的值，因为第三步所计算的值浏览器不一定会支持，所以会有这一步。

2)   父元素的行高为150%或1.5em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承，而父元素的行高为1.5是根据子元素的字体大小动态计算出行高值

3) <number>是动态计算的，<percentage>是静态的。 

指line-height上。span继承了div的line-height，150%是根据父元素的font-size计算的（计算完成后就不改变），而1.5则是按照span自己的font-size来计算