关于标准盒模型和怪异盒模型

盒模型的概念

盒模型是css布局的基石,规定了网页元素如何显示以及元素间相互关系,css定义所有的元素都可以拥有像盒子一样的外形和平面空间.即都包含内容区,补白(内填充),边框,边界(外边距)这就是盒子模型.

盒模型组成=content(内容)+padding(内填充)+border(边框)+margin(外边距).

标准盒模型 默认(box-sizing:content-box)

width=content

怪异盒模型(box-sizing:border-box)

width=content+padding+border

一.标准盒模型:box-sizing:content-box;

1.首先强调一点:这个盒子真正的大小时由文本区域content内边距padding和边框border组成的.

但在标准盒模型的代码中的width和height是只指向content的大小不包括padding和border的.

我们在代码中写的：

width: 100px;

height: 100px;

实际上可以理解为content的宽高，而标准盒模型代码中的with和height是不包含padding和border的。所以写出来真正这个盒子的大小变成了width：100px + 两个padding：10px +两个border：10px最终盒子大小变成如下图所示，盒子宽高都为140px。

二:怪异盒模型:

怪异盒模型的width和heigt都包含content,padding,border,我们在代码中写的:

width:100px;

height:100px;

实际上可以理解为指的就是真正盒子的宽高,这个时候我们去设置padding和border大小时,盒子是固定的100px宽高不会变,content文本区域会随着设置的padding和border的变化而变化,怪异盒模型是固定盒子大小的一种方法.

总结:

标准盒模型更改padding或border等会改变原本盒子大小。

怪异盒模型基本就是固定了盒子的大小。

具体使用看你应用场景而论。

---

The end.