盒子模型

什么是盒子模型

CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：

• margin 值用于盒子与盒子之间，表示盒子与盒子之间的距离

• border 值为边框的宽度，相当于现实中盒子的包装。

• padding 值为内边距，指盒子内容距离盒子边框的距离

• content 值为盒子的主要内容

标准盒子模型和怪异盒模型

• 标准盒模型中一个盒子的宽度是：margin(左右外边距)+border(左右边框)+padding(左右内边距)+内容的(width)

• 怪异盒模型中一个盒子的宽度=内容的(width)+margin(左右)

这里的内容width包含了padding+border

两种模式的转换

• 当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
• 当设置box-sizing:border-box时，采用怪异模式进行计算；