CSS盒子模型详解

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

1. css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，每个框影响着其他元素框的位置和大小。它包括：外边距（margin），内边距（padding），边框（border），内容（content）。
2. 标准w3c盒子模型和IE盒子模型
   盒子模型的本质是将页面上的一个个元素看做是一个个盒子，渲染器通过分析这些盒子的大小从而来对整个网页进行布局。标准盒子模型和IE盒子模型的区别在于其对元素的width和height的不同解析：（元素的width和height的大小指的就是我们给元素设置的width和height的大小）。
   标准w3c盒子模型：元素的width和height = content
   IE盒子模型：元素的width和height =( content+border+padding )
   如下：

标准w3c盒子模型

标准w3c盒子模型.jpg

标准w3c盒子模型的width = content的widht
标准w3c盒子模型的height = content的height
// 所占区域
标准w3c盒子模型所占区域的总宽度 = content的widht + padding的左右边距和 + 左右border和 + margin的左右边距和
标准w3c盒子模型所占区域的总高度 = content的height + padding的上下边距和 +上下border和 + margin的上下边距和

IE盒子模型

IE盒子模型.jpg

IE盒子模型的width = content的widht + padding的左右边距和 + 左右border和
IE盒子模型的height = content的height + padding的上下边距和 +上下border和 
// 所占区域
IE盒子模型所占区域的总宽度 = content的widht + margin的左右边距和
IE盒子模型所占区域的总高度 = content的height + margin的上下边距和

3. box-sizing
   CSS3中新增的属性：
   box-sizing模拟了标准盒子模型和IE盒子模型box-sizing:content-box | bordrer-box | padding-box | inherit。
   默认值：content-box:标准盒子模型
   border-box:IE盒子模型(怪异模式)
   padding-box:padding计算入width内

此处只列举常用的两种模式
//标准盒子模型
div{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
//IE盒子模型
div{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

兼容：ie8+浏览器支持content-box和border-box，ff则支持全部三个值,只有ff支持padding-box，IE浏览器在getComputedStyle得到width/height是按照标准模式计算的，而不论box-sizing的取值。
建议：使用w3c标准盒子，对浏览器的兼容度较高，是网页兼容各浏览器

4. 盒子模型空间结构

   
   盒子模型空间结构.png

如图，盒子模型的空间结构可以理解为，从上到下依次是,
   1. border
   2. content+padding
   3. background-image
   4. background-color
   5. margin

相关文章：
   https://www.jianshu.com/p/6e7d830a5102
   https://www.jianshu.com/p/366665ab9c1c

今天的成功是因为昨天的积累，明天的成功则依赖于今天的努力。成功需要一个过程。