前端题目集css
来源:互联网 发布:软件项目质量管理 编辑:程序博客网 时间:2024/06/09 20:54
HTML:
<div style="font-size: 20px">
<span style="font-size: 30px">test</span>
</div>
<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等单位会被转换成实际的像素值。
2.computed value,第一步计算完成的值在这里会被转换,比如em,ex等单位会被转换成实际的像素值。
3.used value 因为第二步是在文档format之前做的,也就是说元素的宽度等还未建立,所以有些属性值,比如width: 50%,就在这个时候计算。
4.actual value 最后这个值是实际浏览器所表现的值,因为第三步所计算的值浏览器不一定会支持,所以会有这一步。
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来计算
- 前端题目集css
- 前端题目集js
- 前端面试经典题目合集(HTML+CSS)(一)
- 前端面试经典题目合集(HTML+CSS)(二)
- 前端面试经典题目合集(HTML+CSS)(三)
- 前端面试经典题目合集(HTML+CSS)(四)
- 前端面试题目合集
- 前端面试题目汇总(一)HTML、CSS、JavaScript
- 前端题目
- 前端题目
- 前端面试经典题目合集
- 百度前端面试题目
- 前端面试题目
- 前端面试基础题目
- 前端面试题目搜集
- 前端面试题目总结
- web前端题目集锦
- 前端面试题目
- Oracle 热备份
- full join 与 left join 和 right join
- 【SDCC讲师专访】房芳:高德地图开放平台,一场本地生活服务市场入口的争夺战
- 带你走进EJB--MDB实现发送邮件(1)
- SqlSever2005数据库转换成sql2000数据库的实现方法以及将sql2000数据库转换成sql2005数据库
- 前端题目集css
- 用js实现网页内嵌百度地图开发
- spring 定时任务(3)--配置多个定时任务
- 在ubuntu上安装配置OpenStack nova
- 标准C++中的几种强制类型转换方式比较说明
- 《数字图像处理》冈萨雷斯学习笔记5:彩色图像处理
- Java比较两个时间相差多少天,多少个月,多少年
- linux下配置jdk+tomcat环境变量
- C++ - 其他特性