盒模型的一些碎碎念

1. 盒模型的简介

本文简单的总结了一些基本概念，知识点以及细节问题

做为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。

在咱们编写HTML时，网页上的内容几乎都是被包在一个个元素（固然也能够叫作标签）中的，最多见的有div、span、a、img等等。虽然标签的个数不少样，可是总的来讲能够把元素分为三种

• 块状(block)元素
• 行内(inline)元素
• 行内块(inline-block)元素

在具体讲总结盒模型前，先简单的介绍一下这几种元素各自的特性。

在CSS中咱们常常听到的一个词叫作“文档流”，那么到底什么是文档流呢？“流”实际上就是CSS中的一种基本的定位和布局机制。上述所说的三种元素固然要遵照必定的布局机制啦，具体来讲：

块状元素： 典型表明div

• 在默认状况下宽度会自动铺满于父元素，也就是一个块级元素会独占一行，并且它后面的元素会另起一行显示。
• 宽(width)、高(height)、内边距(padding)、外边距(margin)是能够进行具体设置的

行内元素： 典型表明span

• 行内元素不会独占一行，相邻的行内元素会依次排列，不足则换行。
• 宽高是没法指定的，其大小是由里面的内容撑开决定。
• 虽然宽高没法指定，可是水平方向上的内边距(padding)、外边距(margin)是能够进行设置的。

当对一个文档进行布局的时候，浏览器渲染引擎会根据CSS-Box模型将全部元素表示为一个矩形盒子，在CSS中会经过盒模型去描述这些矩形盒子————元素所占空间的内容。

那么盒子里到底有什么呢，以下图所示：

对于一个盒子来讲它由四个部分组成：其中margin叫作外边距，border叫作边框，padding叫作内边距，content叫作内容区域

细分一点,margin它能够分为margin-left,margin-right,margin-top和margin-bottom。同理border和padding也有这样的属性。

盒子出来了，天然要计算它的大小，可是可是，又有幺蛾子了，在计算大小的时候有两套不一样的标准，
也就是有两种盒模型：

• 第一种是W3C的标准模型
• 第二种是IE的怪异盒模型

天然不一样的盒子模型会有不一样的计算方式

2. 尺寸计算

在W3C标准模式下：一个盒子的空间占有宽度=content width + padding + border + margin

在IE怪异盒模型：一个盒子的空间占有宽度=width(padding和border被包含在内了) + margin

高度能够同理计算

---

因为存在以上的计算方法：

在CSS的标准盒模型中，width和height指的是内容区域的宽度和高度。
增长内边距、边框和外边距不会影响内容区域的尺寸，可是会增长整个盒子的大小。这个特色其实有的时候有点讨厌的————咱们能够经过设置box-sizing(CSS3新增属性)来改变盒子被撑大。

3. box-sizing(在IE8+浏览器中)

那么box-sizing究竟是什么呢？在MDN中有这样的解释说明：

该属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

在标准盒模型中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。若是这个元素有border或padding，当咱们在调整一个元素的宽度或高度时须要时刻注意这个元素的边框和内边距，也就上面讲的会被撑大。当咱们在实现响应式布局时候，这个特色尤其烦人。

box-sizing属性的默认值为content-box，也就是标准盒模型。

box-sizing另一个属性值border-box指的就是IE盒模型。

了解盒模型的计算方式是很是重要的，如今的网页，尤为是移动端的页面，须要适应于不一样的屏幕大小~~~

此外，若是在ie6,7,8中DOCTYPE缺失也会触发IE模式。

---

参考文献：

1.张鑫旭-鑫空间-鑫生活

2.MDN-web技术文档