第十一弹-inline-block、BFC、边距合并
问答
1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
什么是外边距合并？
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
1.什么情况会产生合并？
- 必须是处于常规文档流（非float和绝对定位）的块级盒子（块级盒子的display属性必须是以下三种之一：'block'， 'list-item'， 和 'table'）,并且处于同一个BFC当中。
- 没有线盒，没有空隙（没有使用clear属性制造空隙），没有padding和border将他们分隔开
- 都属于垂直方向上相邻的外边距
Paste_Image.png
2.如何合并？
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和
3.如何不让相邻元素外边距合并？
-
元素使用浮动和绝对定位 脱离文档流，导致与普通元素的margin不在一个层面上，构不成合并
下图所示 所有div的大小都为100*100，红色为普通元素margin:20px;、绿色为浮动元素margin为30px；现在两个元素的举例为50px；
Paste_Image.png
-
父元素设置border属性 设置线盒
Paste_Image.png
-
inline-block元素与其兄弟元素、子元素和父元素的外边距都不会折叠（包括其父元素和子元素）
inline-block属性之间不会合并
Paste_Image.png
inline-block和普通元素间不会合并
Paste_Image.png
父子之间
Paste_Image.png
父子之间如果合并会顶到头
Paste_Image.png
-
普通元素和使用clear属性的元素之间
虽然普通元素和使用clear属性的元素虽然同处在文档流中，但是并没有发生边框合并
Paste_Image.png
2.去除inline-block内缝隙有哪几种常见方法?
我们在使用inline-block将li标签设置横向的时候会遇到如下情况，标签之间有缝隙
Paste_Image.png
具体的解决办法如下
1.li标签上不换行
<ul class="nav">
<li>1</li><li>2</li><li>3</li>
</ul>
<ul class="nav">
<li>1</li
><li>2</li
><li>3</li>
</ul>
2.使用负margin（第一个li标签除外）
.nav li:nth-child(1){
margin-left: 0;
}
.nav li{
display: inline-block;
background: blue;
list-style: none;
margin-left: -8px;
}
3.在父容器上设置font-size:0; li标签上再设置回来
.nav{
background: #ccc;
font-size: 0;
}
.nav li{
display: inline-block;
background: blue;
list-style: none;
font-size: 16px;
}
效果如下
Paste_Image.png
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
在父容器中使用overflow: auto| hidden式父容器形成BFC，在BFC内 父容器高度计算 包括float元素都会算在内
.container{
border: 1px solid;
overflow: auto; /*设置 overflow: auto| hidden 父容器形成BFC*/
width: 600px;
}
.item{
height: 200px;
width: 200px;
background: red;
float: right;
}
Paste_Image.png
4.BFC是什么？如何形成BFC，有什么作用?
1.BFC是什么？
BFC 的全称是Block Formating Contents 块级格式上下文
w3c规范中的BFC定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
如何形成BFC？
- 在元素上定义float：left right
- 设置绝对定位 position: absolute
- 对于块级元素（块级盒子的display属性必须是以下三种之一：'block'， 'list-item'， 和 'table'）使用overflow值为非visiable（常见用法是：auto| hidden ）
- 对于非块级元素添加 display属性为：inline-blocks, table-cells, 和 table-captions
-
BFC的作用？
1.撑开浮动元素的父元素 （如题目3）
2.解除文字环绕效果
我们先将文字放入p标签中
在没有形成BFC前，文字是环绕在浮动元素旁边的
Paste_Image.png
在 p标签上加上 overflow: auto 使p标签自己形成BFC
.container P{
overflow: auto;
}
Paste_Image.png
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
由于浮动元素脱离文档流，导致父容器的在计算高度时 为零，
有两种解决办法
1.在父容器中形成BFC
2.在父容器中添加伪类
.clear:after{
content: ""; /*内容为空*/
display: block; /*将文本 变为block*/
height: 0; /*不占用高度 ，用户看不见*/
clear: both; /*清除元素左右的浮动*/
}
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ /*使用伪元素、在元素后面加入新内容*/
content: ""; /*内容为空*/
display: block; /*将文本 变为block*/
height: 0; /*不占用高度 ，用户看不见*/
clear: both; /*清除元素左右的浮动*/
}
.clearfix{ *zoom: 1;} /*使用星号 兼容IE6、IE7*/
本博客版权归博主和饥人谷所有，转载请说明来源
