css盒模型：标准盒模型、怪异盒模型

盒模型分为：

1. 标准盒模型 ： W3C标准的盒子模型（更常用）
2. 怪异盒模型：IE标准的盒子模型                         

       目前大部分主流的浏览器支持的是W3C标准盒模型

标准盒模型

  设置：box-sizing: content-box ;

标准的盒子模型由：content(区域内容大小) + padding(内边距) + border(边框) + margin(外边距)组成

              width = content(内容)的宽度 + padding(左右) + border(左右)；

               height = content(内容)的高度 + padding(上下) + border(上下)；

               总宽 = width + margin(左右)

               总高 = height + margin(上下)

               总面积 = 总宽 x 总高

1、content

    平常设置的width和height都是content的宽高，显示文本和图像。

    

2、padding

 padding有四个方向： 上 右 下 左。

写法：

   （1）单独设置某个方向的padding：

           padding-left：2px;
           padding-right：2px;
           padding-top：2px;
           padding-bottom：2px;

   （2）复合属性写法：

• 一值法： padding:20px;                               上下左右的padding相等。

• 二值法： padding:20px 10px;                       上下 左右
• 三值法： padding:20px 10px 30px;              上 左右 下。
• 四值法： padding：10px 20px 30px 40px;   上 右 下 左，为顺时针。

3、border

 border有三个要素：宽度，线的类型，颜色。

  线的类型有：

1. solid：实线
2. dashed：虚线
3. dotted：点状线
4. double：双线
5. none 或 0 去掉边框

  写法： 

/* 一次设置  border:宽度 线的类型 颜色; */
div {
  border: 1px solid red;
}

/* 宽度、线的类型、颜色分开设置 */
div {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

/* 单边设置 */
div {
  border-top: 10px solid #000;
  border-right: 20px dashed #111;
  border-bottom: 30px dotted #222;
  border-left: 40px double #333;
}

4、margin

写法：

 （1）单独设置某个方向的margin：

           margin-left：2px;
           margin-right：2px;
           margin-top：2px;
           margin-bottom：2px;

   （2）复合属性写法：

• 一值法： margin:   20px;                               上下左右的margin相等。
• 二值法： margin:   20px 10px;                       上下 左右
• 三值法： margin:   20px 10px 30px;              上 左右 下。
• 四值法： margin：10px 20px 30px 40px;     上 右 下 左，为顺时针。

        auto:代表自适应。 会将剩余的空间自动分配给设置auto的外边距。
        margin : 0 auto;可以让盒子水平居中

margin存在的问题：

  1、当浏览器上下放置两个块元素时，他们垂直方向的距离会发生什么变化？

计算：两个div垂直方向之间的距离为：margin-bottom(div.box1)+margin-top(div.box2)=10px+20px=30px    ?  

实际上他们之间的距离并非是期望的30px，而是20px，为什么？

这是因为浏览器上下放置两个块元素时，它们垂直方向的外边距会发生重叠，浏览器会把他们之间的外边距会折叠在一起，折叠后的外边距就是两个外边距中较大的那个外边距的大小。

所以重新计算两个div垂直方向之间的距离为：

max(margin-bottom(div.box1),margin-top(div.box2))=max(10px,20px)=20px

2、如果一个元素嵌套在另一个元素中，它们都有外边距，也会发生重叠吗？（父级外边距折叠塌陷问题）

对比div.parent和div.child设置外边距前和设置外边距后的渲染结果发现：

水平方向：div.child和div.parent之间的外边距就是设置的20px，未发生折叠，div.parent和body之间也是设置的10px

垂直方向：div.child和div.parent之间的外边距发生了重叠，取二者中较大者，为20px，如图，div.child和div.parent上边重叠，和body的上边之间距离为20px

解决方法：

•   给父级1px的边框
•   给父级1px内边距
•   不用margin-top，改用父级内边距padding   
•   给父元素设置overflow:hidden; （触发bfc）父元素会变成独立的空间
•   将子元素转换为行内块元素

怪异盒模型 

   1、设置： box-sizing:border-box;

   2、宽高

    计算盒子宽：width(content + padding + border)

    计算盒子高：heigth(content + padding + border)

怪异盒子模型的宽高是定死的，设置 padding 或 border 不会影响页面布局。

  3、怪异盒模型应用场景：

比如说现在有一个大盒子里面有三个小盒子，让他们都浮动起来，向上图这样排列，刚好能放下三个，但是当我们给三个盒子增加内边距和边框时他们的盒子整体都会变大，然后就可能第三个盒子放不下了，就被挤到下面去了，如果这时候我们将三个盒子都设置成怪异盒模型，那么提前设置好他们每个盒子的大小，在设置内边距和边框就只从他们里面去挤压设置了，整体的盒子大小不变，那么第三个盒子也就不会被挤下去了。