发表于: 2020-03-15 22:37:16

0 1507


今天完成的事情:重新复习任务一和任务二的深度思考以及相关延伸知识,完成了自己的简历
明天计划的事情:看es6和任务3和任务4的简历
遇到的问题:问题基本能自己解决
收获:

浮动和inline-block的区别和清除浮动

以及inline和block的使用

空隙产生的原因

元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。


方法6 : 给父元素设置display:flex,


浮动:

1.浮动不是任意的,其还是在父元素的范围之中,不能脱离于父元素的内容区域。

2.若浮动元素比它的父元素还高,那么它就会溢出父元素外面

3.脱离文档流(普通流)

4.浮动有可能会造成父元素的高度坍塌



清除浮动:

1.直接给父元素定高:解决浮动元素脱离文档流导致的高度坍塌

2.给父元素加overflow:hidden属性触发bfc(关于bfc后面会详谈)

3.给元素添加display:inline-block(原理也是触发bfc)

4.使用伪类

5.在浮动元素后添加空标签并使用clear:both这个是不允许有浮动元素在哪个位置both是左右(clear只能清除该元素之前的浮动。 


bfc:

BFC的布局规则是什么?

1.内部的box会在垂直方向,一个接一个地放置(可以看作BFC中有一个的常规流)。

2.Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3.每个元素的margin box 的左边,会包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此

4.BFC的区域不会与float box 重叠

5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此

6.计算BFC的高度时,浮动元素也参与计算


那些情况会产生新的BFC/如何创建BFC?

⑴根元素或其它包含它的元素

⑵浮动 (元素的 float 不为 none)

⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)

⑷行内块 inline-blocks (元素的 display: inline-block)

⑸表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)

⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)

⑺overflow 的值不为 visible的元素

⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)


由bfc延伸至高度坍塌:

父元素高度自适应,子元素 float 后,造成父元素高度为0,称为高度塌陷问题。

float 脱离了普通流,并且创建了新的BFC,而父元素不具备产生 BFC 的条件,所以它的高度为0。

通过了解BFC的特性我们知道,BFC会把它包含的浮动元素高度也算在里面,也就是闭合浮动。

拿 overflow: auto 举例:

overflow: auto 并不会闭合浮动,而是 overflow: auto 会创建一个新的BFC,避免浮动的元素侵入其他元素。

和clear:both很像


由bfc又延伸到margin重叠:





返回列表 返回列表
评论

    分享到