一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
创建了新的BFC的元素（例如浮动元素、 inline-block元素、绝对定位元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会合并。
或者给父元素设置padding或边框也可以解决外边距合并的问题。
- 外边距合并的例子
<style>
*{
margin:0px;
padding: 0px;
}
.div1{
width:800px;
height: 200px;
background-color: cornflowerblue;
margin:0px auto;
}
.div2{
width:80%;
height: 10%;
background-color: wheat;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
结果为：
Paste_Image.png
父子外边距合并了，取了较大值30px（儿子的外边距），父子元素的margin-top塌陷，此时子元素margin-top:30px，使得父子元素同时移动。（父元素无 border、padding）
二、去除inline-block内缝隙有哪几种常见方法?
inline-block（>IE8使用），IE6、7bug存在写成 display:inline-block;*display:inline。
1.去掉html中无序列表前面的空格。使其紧挨着排列。
如
<li>tag1</li><li>tag2</li><li>tag3</li>
或者： <li>tag1</li
><li>tag2</li
><li>tag3</li>
2.负margin。
.box>li{
display:inline-block;
padding:3px;
margin:-4px;
}
3.float。采用浮动时父容器会撑开要清除浮动（父容器要overflow：auto或hidden一下；）
.box>li{
display:inline-block;
padding:3px;
float:left;
}
4.将父容器设置font-size=0；此时子容器font-size需重新设置。
三、父容器使用overflow: auto| hidden撑开高度的原理是什么？
overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
overflow值为auto| hidden时可以闭合元素修复高度坍塌，清除浮动。
例如子容器设置高度大于父容器时，父容器会自动撑开。此时overflow:hidden会清除子容器浮动，子容器超出高度部分自动隐藏。
#box{
width:500px;
background:#000;
/* height:500px;*/
overflow:hidden
}
#content {
float:left;
width:600px;
height:600px;
background:red;
}
如结果为500*600的盒子，超出100隐藏了。
Paste_Image.png
做法：
- overflow:hidden;
只要使用了这个样式的元素都会闭合，触发 hasLayout； - overflow:auto;zoom:1;
在不使用 overflow:hidden 的场景下，需要触发 hasLayout ，可以用 zoom: （normal以外的值） 这个样式； - overflow:auto;height:1%;
在不使用 overflow:hidden 的场景下，需要触发 hasLayout ，可以用 height: （auto以外的值）这个样式，1%是为了在实现非0。
四、BFC是什么？如何形成BFC，有什么作用?
定义及形成：
1.BFC可以理解为一个箱子，箱子里面的东西不受外界影响。并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
2.浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC。
作用：
作用：不与任何元素产生 margin 折叠，消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。
五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
例如：父块没有设置指定的高宽，当子块设置为浮动后，原本包裹子块的父块的高度塌陷。
<div style="background: #F99; width: 400px; border: 1px solid #3CF;">
<div style="float: left; background: #36F; width: 180px; height: 180px;">
I'm a son container .</div>
<div style="float: left; background: #F60; width: 180px; height: 180px;">
I'm the other son container .</div>
</div>
Paste_Image.png
父容器的高度为0，能看到的只是父容器的边框，而高度并没有被内部的两个子容器的高度撑开。
解决方法：
1.在父容器里加入height属性，该方法适用于子元素高度已知并且固定的情况。
2.在最后一个子元素后加入<div style="clear:both;"></div>，清除浮动元素。
3.给父容器增加overflow:hidden属性。或者overflow:auto;zoom:1;
overflow:auto;height:1%;
4.浮动外部元素，float-in-float让父容器也浮动。
5.使用after伪元素。对浮动元素增加after伪类。（IE8以上生效，在IE6、7中可在父容器中增加overflow:auto;或者overflow:hidden等）。
#outer:after{
content:"";
height:0;
display:block;
clear:both;
}
六、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
Paste_Image.png
.clearfix:after{
content:"";
display:block;
clear:both;
}
作用是清除浮动。
*zoom:1;作用是为兼容IE6,IE7。
BFC撑开空间也可以清除浮动。但它还可以形成BFC盒子，避免与其他元素产生 margin 折叠。
本文版权归本人及饥人谷所有，转载请注明出处，谢谢！
网友评论