CSS盒模型1 什么是盒模型可以理解为每个html标签都是一个盒子，盒子内部存在盒子，一般由content,paddi

1 什么是盒模型

可以理解为每个html标签都是一个盒子，盒子内部存在盒子，一般由content,padding,border,margin4部分组成。

2 盒模型分类

盒模型有 2 种：content-box和border-box

如左图所示，content-box的宽度width代表内容区域宽度，元素的实际宽度=内容区宽度（width）+border+padding。

如右图所示，border-box的宽度width是元素的实际宽度，实际宽度(width)=内容区宽度+ padding + border 。

一般使用border-box。

3 盒模型中的外边距合并

外边距合并可以大致分为两类，父子合并和兄弟合并，具体有三种情况。

兄弟合并，同一层相邻元素同时指定外边距，相邻的两个元素之间的外边距重叠，只取其中的较大值而不是和。

<body>
  <div class='bro1'></div>
  <div class='bro2'> </div>
</body>

body{
  margin:0;
  padding:0;
}
.bro1{
  width:300px;
  height:200px;
  background:#ddd;
  margin-bottom:30px;
}
.bro2{
  width:200px;
  height:100px;
  background:pink;
  margin-top:10px;
}

没有内容将父元素和后代元素分开：如果没有padding、border等元素分割父元素和子元素的边界，就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

<body>
 <div class='parent'>
   <div class='child1'></div>
   <div class='child2'></div>
 </div>  
</body>

.parent{
  width:400px;
  height:300px;
  background:#ddd;
}
.child1{
  width:300px;
  height:100px;
  margin-top:40px;
  background:pink;
}
.child2{
  width:200px;
  height:100px;
  background:gray;
}

3. 空块级元素：如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

<body>
 <div class='bro1'></div>
 <div class='special'></div>
 <div class='bro2'></div>
</body>

.bro1{
  width:300px;
  height:200px;
  background:#ddd;
}
.bro2{
  width:200px;
  height:100px;
  background:pink;
}
.special{
  margin-top:20px;
  margin-bottom:30px;
}

总结：

发生外边距合并的元素：块元素之间（父子、兄弟、空块）；发生外边距合并的边距：上、下边距（左右边距不会合并）；
相邻的兄弟元素之间必出现margin合并（除非后者兄弟姐妹需要清除过去的浮动）；
父元素与第一个子元素间，如果没有padding、border、inline content、清除浮动这四个属性之一，就会出现上边距合并；
父元素与最后一个子元素之间，如果没有padding、border、inline content、height、min-height、max-height这几个属性之一，就会出现下边距合并；
空的块级元素，如果其border、padding、inline content、height、min-height都不存在，那么它的上下外边距将会合并。