盒模型和margin合并，margin塌陷问题

1、基本概念：html中的大多数元素都是行级元素（inline）和块级元素（block）

2、块级元素：占满整行，可以改变宽高，块级元素中可以有其他块级元素和行级元素

     常见的块级元素：div, p, h1-h6, address, form, table, ul, li, ol, output, canvas, header, video, audio

3、行级元素：不占满整行，不可以改变宽高，行级元素中只可以放行级元素和文字

      常见的行级元素：a, span, strong, em ,b, i, input, select, label, button

4、行级块元素（inline-block）：不占满整行，可以改变宽高：img

5、什么是盒模型：

所有的html元素都可以看做是盒子，在css中，"box model"这一术语是用来设计和布局的，css盒模型本质上是一个盒子，封装周围的html元素，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin），盒模型允许在其他元素和周围元素边框之间的空间放置元素。

6、盒模型分两种：一种是w3c标准盒模型，另一种是ie6混杂模式盒模型

w3c标准盒模型：width（content）+ padding + border + margin

ie6混杂模式盒模型：width（content + padding + border） + margin

box-sizing：border-box（ie6混杂模式盒模型）

                     content-box（w3c标准盒模型）

                     inherit（继承父元素的盒模型）

二、margin合并

1、什么是margin合并

如上图所示，在123的div的margin-bottom为100px不变时，234的div的margin-top分别为80px，100px，120px，123和234之间的距离分别为100px，100px，120px

2、margin合并：上下两个相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的值为两个发生合并的外边距中最大的外边距值




3、解决margin合并问题

overflow：hidden

                 

注：只有普通弄文档流的垂直外边距会发生margin合并问题，浮动流，绝对定位流不会发生

三、margin塌陷问题

1、什么是margin塌陷问题

如上图所示，wrapper与content绑在一起，当content的margin-top小于wrapper的margin-top，content并不下移，大于或等于wrappermargin-top时，以浏览器为顶与wrapper一起塌陷

2、margin塌陷：当两个盒子在垂直方向上设置margin值时，会发生塌陷现象

3、解决margin塌陷问题

利用bfc （block format content）  overflow:hidden（溢出容器隐藏，父级）