摘要：盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。
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新增属性)来改变盒子被撑大。
那么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技术文档
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113759.html
摘要：判断步骤如下如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值转换为，而转换为。实际上是对比运用上面的顺序，是布尔值，所以转化为数值为。 『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题，一般都是比较基础但是容易遗忘的知识点，你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解，来记录这些问题。更多文章请前往我的个人博客 类似标题中的问题还有很多，例如： 为...
摘要：前端碎碎念系列会记录我平时看书或者看文章遇到的问题，一般都是比较基础但是容易遗忘的知识点，你也可能会在面试中碰到。当两个操作数都是数值时，执行常规的数值加法计算。关键还是要加深对中对数值转换的理解，以不变应万变。 『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题，一般都是比较基础但是容易遗忘的知识点，你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解，来记录这些问题...
摘要：使用命名空间的目的是对标识符的名称进行本地化，以避免命名冲突或名字污染，关键字的出现就是针对这种问题的。缺省参数概念缺省参数是声明或定义函数时为函数的参数指定一个默认值。 ...
摘要：在美国和一些其他发达国家，程序员已经从一个相对高端的行业变成越来越多普通人的日常。是五十个编辑推荐话题之一软件开发者是美国四个州最常见的职业图片来源我们不难设想，把软件开发的工作自动化掉，对相关企业来说将会是一个多么巨大的诱惑。 在美国和一些其他发达国家，程序员已经从一个相对高端的行业变成越来越多普通人的日常。 JavaScript 是 Medium 五十个编辑推荐话题之一: http...
摘要：更多文章请前往我的个人博客这个问题是有关执行顺序和的。其中，整体代码，可以理解为待执行的所有代码。当队列执行完后再执行一个任务。然后再次回到新的事件循环。所以两个执行完后队列里只剩下第一个里的。 『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题，一般都是比较基础但是容易遗忘的知识点，你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解，来记录这些问题。更多文章请前往我...
阅读 1099·2021-11-23 10:04
阅读 2372·2021-11-22 15:29
阅读 2639·2021-11-19 09:40
阅读 686·2021-09-22 15:26
阅读 2084·2019-08-29 16:27
阅读 2455·2019-08-29 16:10
阅读 1874·2019-08-29 15:43
阅读 3239·2019-08-29 12:43
