inline-block BFC 边距合并
在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?
首先,外边距的合并出现在垂直方向上,两个块级元素垂直外边距相邻时,两者的原外边距会合并成一个高度等于两者中较大的新外边距。
在正常的文档流下,没有边框,没有padding,但有外边距时,上下的margin会出现合并,高度等于两者中的较大者。
不让相邻元素外边距合并的方法:
- 加外边框,加padding;
- 父元素加overflow(不为visible);
- 父元素加display:inline-block;
- 父元素加float;
父容器使用overflow: auto| hidden
撑开高度的原理是什么?
overflow:auto|hidden会触发BFC,由于BFC可以包含浮动,故可以感知浮动元素的高度,所以可以撑开高度。
BFC
是什么?如何形成BFC
,有什么作用?
BFC(块级元素格式上下文)形成了一个独立的空间,空间内部不受外部元素影响。
如何形成BFC:
1.根元素
2.display:inline-block|table-cell|table-caption|flex|inline-flex;
3.position:absolute|fixed;
4.overflow:auto|hidden|scroll;
5.float:right|left|both;
有什么作用?
1.可以清除浮动,包含浮动元素;
2.不被浮动元素覆盖;
3.阻止外边距折叠。
浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法
由于浮动脱离文档流,浮动元素不会影响父元素的宽度,使父元素的高度为“0”,从而形成高度塌陷。
一般有两种解决办法:
1.用clear清除浮动;
2.使父容器形成BFC。
以下代码每一行的作用是什么? 为什么会产生作用? 和BFC撑开空间有什么区别?
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
作用:清除浮动
给类选择器clearfix的元素添加一个伪类after,添加内容为空的块级元素,清除两边的浮动。
*zoom用来触发IE浏览器下的hasLayout,解决浏览器不兼容问题。
和BFC的区别:
通过伪类清除浮动元素,并不是父元素感觉到了子元素中的浮动元素,而是在后面添加了一个块级元素。而元素形成BFC,是因为元素感觉到了子元素中浮动元素的宽度,而不是通过添加元素撑开父元素。