盒子模型、CSS边距合并、inline-block缝隙、BFC
1 盒子模型的组成
盒子模型是由边距、边框、填充和内容组成的。其中边距、边框、填充可以在盒子模型上下左右四个方向上设置属性值。在HTML文档中，每个元素（element）都有盒子模型(不论是块级元素还是行内元素)。
Paste_Image.png
在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
padding和margin
对于行内元素，设置padding和margin属性的上下方向的属性值是无效的,不占用页面空间，但是上下padding会占用元素背景色。
边距合并
什么是边距合并呢？在这里分两种情况：
1. 兄弟间边距合并
2. 父子间边距合并
我们先说兄弟间边距合并，先看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.wrapper {
border: 1px solid ;
width:300px;
}
.box1,.box2 {
width: 100px;
height: 100px;
border:1px solid red;
margin:30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
Paste_Image.png
那么外边距是如何产生的呢？（其实说白了就是没有边框和填充属性引起的，最重要的是让其形成BFC，下面我们就会讲到BFC）在正常的文档流之中，相邻的两个块级元素如果在垂直方向上有外边距，则会产生外边距合并。合并之后两个块级元素在垂直方向上的距离是取两者之间外边距最大值。
另外一种情况是父子之间的外边距合并，先看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.wrapper {
width:400px;
background: pink;
margin:10px;
}
.box1,.box2 {
width: 100px;
height: 100px;
border:1px solid red;
margin:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
Paste_Image.png
显然，在父子之间也产生了边距合并。那怎么取消外边距合并呢？
对于兄弟外边距，我们可以设置兄弟元素是浮动元素或是行内元素或是overflow:hidden，这样就不会产生外边距合并。
display:float;
/*或者是*/
display:inline-block
/*或者是*/
<div class="wrapper">
<div class="box1">
< div class="box"></div>
</div>
<div class="box2">
<div class="box> </div>
</div>
</div>
.box1,.box2 {
overflow:hidden
}
而对于父子外边距合并，则需要在父元素添加边框或者padding:1px 。
border:1px;
/*或者是*/
padding:1px;
另外还有一种情况是自身合并，主要是这个块级元素中什么内容都没有，
<div class="box5"></div>
<h3>hello</h3>
.box5 {
margin:40px;
}
解决办法：形成BFC
overflow:hidden;//或者
border:1px solid transparent;//或者
padding:1px;
BFC
- BFC 是什么
对于有浮动属性的元素、绝对定位属性的元素，块级容器（inline-block,table-cell）,块级元素OverFlow属性值不是Visible的元素。块级容器和块级元素OverFlow属性值不是Visible的元素虽不是块级元素，但是有块级元素的属性。上述元素就会建立块格式化上下文为里面的内容。
在BFC之中，盒子在水平方向上是一个紧挨着一个排列的，两个相邻的盒子垂直方向上的距离依赖于margin属性，垂直方向上的不同的两个盒子margin属性会折叠。
在BFC之中，盒子的左边界会触碰到父元素的左边界（或者右边界）。即使浮动元素也如此。
父容器使用overflow: auto| hidden撑开高度的原理是什么？
使父容器形成BFC。
使用display:inline-block 之后的块级元素会产生缝隙，如何去除呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
background: pink;
}
.wrapper li {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul class="wrapper">
<li></li>
<li></li>
<li></li>
</ul>
</html>
Paste_Image.png
这个缝隙之所以会产生是因为，li元素之间有空白，
Paste_Image.png
消除空白有四种方法 分别是
1. 让li排成一列(这个只不过方法肯定不行，最起码影响代码的阅读性。)
2.给每一个li负边距 margin-left:-4px;
3.li 浮动，li {float:left;}
4.ul {font-size:0}
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
指的是父容器无法再次包裹其子元素了，会产生这种情况是因为浮动元素脱离的正常的文档流了。
没有添加浮动元素之前
Paste_Image.png
Paste_Image.png
添加浮动元素之后
Paste_Image.png
这就是父元素的高度塌陷，如果想让父元素重新包裹子元素，解决的方案由如下几种，主要是给父元素添加属性。
1. display:inline-block
2. overflow:hidden
3. float:left
4. 添加伪类元素
这种方式同上面的方式有所不同，上面的方式是在父元素内部形成块格式化上下文，形成一个独立的小空间，但是这种方式是虚拟的向父元素添加一个标签。作用是清除浮动，清除浮动后重新让父元素包裹子元素。
.clearfix:after{ /*在父元素内部添加一个标签元素*/
content: ''; /*元素为行内元素，内容为空*/
display: block; /*元素转化为块级元素*/
clear: both;/*清除浮动*/
}
.clearfix{ *zoom: 1;/*属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。*/}
另外BFC 还有一个作用 就是让围绕浮动元素的文字不再环绕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.wrapper li {
list-style: none;
}
.wrapper {
width: 300px;
border: 1px solid red;
}
.wrapper img {
float: left;
width:100px;
}
.wrapper p {
/*overflow: auto;*/
}
</style>
</head>
<body>
<div class="wrapper">
<p>HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML</p>
</div>
</html>
P标签没有添加overflow属性之前，
Paste_Image.png
添加overflow属性之后
Paste_Image.png
