什么是盒模型

什么是盒模型

概念：盒模型是css布局的基石，规定了网页元素如何显示以及元素间相互关系。

可以把网页里的元素内容看成一个盒子。

盒模型的四个属性：content(内容区) 、padding(填充区)、border(边框区)、margin(外边界区)。

盒子模型又有两种形式：标准盒子模型 和 怪异盒子模型。

标准盒模型：标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小 = content + border + padding + margin

怪异盒模型：怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度。

怪异盒模型下盒子的大小=width（content + border + padding） + margin

两种模式可以利用box-sizing属性进行自行选择：
　box-sizing:content-box; (标准盒模型) / border-box; (怪异盒模型)

–逆战 蒲秋