标签：box 盒子 模型 元素 一些 碎碎念 margin CSS
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模式。
参考文献：
标签：box,盒子,模型,元素,一些,碎碎念,margin,CSS 来源： https://www.cnblogs.com/10manongit/p/13024829.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。