发表于: 2020-03-15 22:37:16
0 1505
今天完成的事情:重新复习任务一和任务二的深度思考以及相关延伸知识,完成了自己的简历
明天计划的事情:看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重叠:
评论