摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。
引言
CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为“盒模型”。
一、什么是盒模型我们首先来看一下在HTML中盒模型的样子：
我们可以清楚的看出，盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。
二、W3C标准盒模型IE8以上浏览器默认使用W3C标准盒模型
在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值，因此有：
元素占据的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
元素占据的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
这里给大家举个栗子：
盒模型内部元素
最终呈现的效果如下图：
W3C盒模型各部分取值：
三、IE盒模型IE8及以下的浏览器默认使用IE盒模型
IE盒模型又称“怪异盒模型”，在该标准下，我们定义元素的width值为盒模型中的border-left + padding-left + content的宽度值 + padding-right + border-right的总和，height值为盒模型中的border-top + padding-top + content的高度值 + padding-bottom + border-bottom的总和
元素占据的宽度 = margin-left + width + margin-right
元素占据的高度 = margin-top + height + margin-bottom
上述同样的代码，在IE盒模型下会有如下效果：
以下是MDN对 box-sizing 属性的说明：
box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
我们可以简单的理解，当box-sizing为content-box时，我们使用的是W3C盒模型，当box-sizing为border-box时，我们使用的是IE盒模型。
更多关于box-sizing属性的使用，可以看这里：box-sizing | MDN
结束语盒模型概念无论是在实战中或者面试中都是非常重要且基础的知识点，因此需要熟练掌握，此文章对盒模型概念做了基本介绍，希望能给你带来帮助。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52312.html
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。 盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性： 从内往外： width:内容的宽度，而不是盒子的宽度； hei...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...
阅读 3451·2021-11-24 09:39
阅读 2991·2019-08-30 15:56
阅读 1210·2019-08-30 15:55
阅读 839·2019-08-30 15:53
阅读 1716·2019-08-29 18:37
阅读 3437·2019-08-29 18:32
阅读 2949·2019-08-29 16:30
阅读 2690·2019-08-29 15:14
