关于浮动学习的记录

原创 15102883200 随笔 HTML学习 196阅读 2017-11-15 23:17:15 举报

今天课后练习:
仿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伪类
                    相对完善的清除方式

整体感受
大量的练习及思考是最好的方式
关于思维结构方面,需要有丰富的经验才能驾轻就熟,不过目前主流的结构方式应该大部分在练习题中都有所涉及,所以······写好练习。

关于清除浮动
目前所学的几种方法大体可以归为两类:

  1. 触发BFC规则,解决问题。
  2. 通过快元素的clear属性,来清除。

关于浮动学习的记录

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复