今天课后练习:
仿b站模块练习。
用到了浮动的相关知识,相关的知识点比较熟练,主要发现的一些问题是关于行高和字体的把握还不够熟练,这个需要更多的练习。
练习模块:
相关代码:
html 代码
css 代码
float浮动的特性:
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、阻止margin叠压
目前所学清除浮动的一些方法及每个方法的原理及优缺点:
1.加高度
缺点:
不利于维护
在内容不确定高度时无法使用
2.inline-block清浮动
缺点:
会产生空格间隙
无法使用margin左右居中
3.空标签清浮动
缺点:
必须是非内联元素
但凡使用到浮动都需要加个空标签
4.以浮制浮
缺点:
所有浮动元素的父级都要加浮动
最终加到HTML上就无法继续清除浮动了
5.<br /> 换行符
W3C规范
行为、结构、样式三者分离
br
缺点:
不符合W3C规范
6.after伪类
相对完善的清除方式
整体感受
大量的练习及思考是最好的方式
关于思维结构方面,需要有丰富的经验才能驾轻就熟,不过目前主流的结构方式应该大部分在练习题中都有所涉及,所以······写好练习。
关于清除浮动
目前所学的几种方法大体可以归为两类:
- 触发BFC规则,解决问题。
- 通过快元素的clear属性,来清除。
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复