1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
-
以下是 三种发生外边距合并的场景:
(1) 在普通文档流中,当两个兄弟元素的垂直外边距相遇时,会发生外边距合并。如下图所示。避免此种情况下外边距合并的方法:使元素BFC化。
(2) 如果一个盒子没有border-top或padding-top,那么它的上边距会和第一个子元素的上边距重叠,如下图所示.避免此种情况下外边距合并的方法:给父元素添加padding-top或border-top。
(3) 自身元素空间没有撑开时,发生自身外边距合并。
-
如何合并
margin值为都为正值时取最大值。
margin值为都为负数取绝对值最大值。
margin值一个为正数一个为负数取两者的和。
2.去除inline-block内缝隙有哪几种常见方法?
(1)去除inline-block元素标签间因空格回车产生的间隔
(2)父元素设置font-size:0
(3)给inline-block设置浮动
(4)使用负边距
3.父容器使用overflow: auto| hidden撑开高度的原理是什么?
使用over:auto/hidden后,父元素形成了一个独立的空间(BFC),不受外界外部干扰,从而能撑开高度。
4.BFC是什么?如何形成BFC,有什么作用?
- BFC即Block Formatting Context,他能提供一个环境,使元素在这个环境中按照一定规则进行布局。这个环境中的元素不会影响到其它环境中的布局,也不会受其他元素的影响。
- float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。 - 多栏布局、阻止外边距合并、清除浮动。
5.浮动导致的父容器高度塌陷指什么?为什么会产生?有几种解决方法?
浮动元素脱离文档流,让父元素感知不到内部有元素存在,从而会形成高度塌陷。
解决方法总体上分两种:
1.使父元素BFC化(包括设置float:left/right
, overflow:auto/hidden
, display:inline-block
等)
2.在设置了浮动的子元素后插入设置了clear:both
属性的空标签或伪元素
6.以下代码每一行的作用是什么? 为什么会产生作用? 和BFC撑开空间有什么区别?
.clearfix:after{
content: ''; /*伪元素内容为空*/
display: block; /* 伪元素是block元素*/
clear: both; /* 两侧清除浮动*/
}
.clearfix{
*zoom: 1; /*为了兼容IE低版本,IE6/7不支持:after伪元素,zoom可触发IE的haslayout属性,类似于形成BFC清除浮动*/
}