CSS篇：盒子模型

最近在准备面试，于是将以前总结的一些知识点发出来，也当作是给自己的复习，如果文章有不对的地方，还望指正！

在面试时涉及CSS盒子模型的问题时一般围绕以下三点来展开

• 盒子模型的概念
• 盒子模型的组成
• 盒子模型的种类

我们也将围绕这几个点来讲述

---

盒子模型的概念

在一个HTML页面中，每一个元素都会占据一定的空间，这个空间可以被看做是一个盒子，即盒子模型

---

盒子模型的组成

一个盒子模型主要由以下几个部分构成

• 元素的内容 content
• 元素的内边距 padding
• 元素的边框 border
• 元素的外边距 margin
  
  从网上随便找了个图，可以很形象的看出整个盒子模型的构造
  我们可以在CSS/JS中修改具体的样式来得到我们想要的视觉效果

盒子模型的分类

盒子模型分为两类

• W3C标准模型( content-box)
• IE模型（怪异模型 border-box）

我们可以通过 box-sizing 属性来设置我们需要的盒子模型

W3C标准模型

当块元素 box-sizing 属性为 content-box 的盒子模型
一般浏览器中所使用的盒子模型一般都为此

特点

• 开发者设置的宽高为其内容（content）宽高 不包含 padding border margin
• 盒子大小以内容优先，自动扩展，子元素可以撑开父元素
• 盒子总宽度（高度）= width/height + padding + border + margin
  

IE盒子模型

当块元素 box-sizing 属性设置为 border-box的盒模型，一般在IE浏览器中默认为此模型

特点

• 开发者设置的宽高为其content + padding + border 的总和
• 类似于一个铁箱子，大小不会因内容改变，即子元素无法撑大父元素
• 盒子总宽度（高度）= width/height + margin

---

实例

一盒子模型的参数如下：
试试计算该盒子在两种模型下的实际宽高

<style>
	margin:10px;
	border:10px;
	padding:10px;
	width:100px;
	height:100px;
</style> 

标准模型

盒子所占空间的宽高(在浏览器中所占的空间)
width/height = 10 * 2 + 10 * 2 + 10 * 2 + 100 = 160px

盒子实际宽高(不计算margin)
width/height = 10 * 2 + 10 * 2 + 100 = 140px

IE模型

盒子所占空间的宽高(在浏览器中所占的空间)
width/height = 10 * 2 + 100 = 120px

盒子实际宽高(不计算margin)
width/height = 100 = 100px

可以看出IE盒子模型在相同数据下是要小于标准模型的

效果图