教你5分钟搞懂css外面的盒模型

什么是盒模型

在html中，咱们写的标签，很多都是有盒模型的，也就是在css外面，咱们为这些标签设置款式的时候，实际上就是为这些盒子设置款式。

可能这样不是很好了解，咱们来看一个例子：

在日常生活中，咱们常常应用一些盒子来装货色，此时咱们将盒子设想成从上往下看的二维立体：
那么盒子将会蕴含以下货色：

  • 盒子外面装的货色【内容】
  • 盒子内容与盒子包装的间隔【内边距】
  • 盒子的厚度：【边框】
  • 盒子间隔其余货色的间隔【外边距】

css外面的盒模型就蕴含内容content,内边距padding,边框border,外边距margin
如下图所示：

  • 红色框框外面的就是内容content
  • 绿色箭头的间隔就是内边距padding
  • 再往外的彩色边框就是盒子的边框border
  • 最里面的的蓝色箭头就是外边距margin

盒模型的分类

在现在css的规范外面，盒模型有两种，一种是规范盒模型，一种是IE盒模型。

css默认应用的是ie盒模型，这就导致了一些初学者在设置css款式的时候呈现一些出其不意的问题。

至于是什么问题呢？
接着往下看。

ie盒模型

首先咱们来讲讲ie盒模型是怎么样子的。

咱们在ie盒模型中，设置的宽度以及高度，只是蕴含了内容content的宽度以及高度，不蕴含内边距padding以及边框border的宽度以及高度。

.box{    width: 100px;    height: 100px;    padding: 10px;    border: 1px solid #000;    margin: 19px;}


在浏览器开发者工具中，咱们能够看到，该盒子的内容内容长宽都为100px,然而盒子的理论长宽为130px，这就是因为ie盒模型长宽只蕴含内容的长宽。

此时咱们设置的长宽度计算形式为：

width = content.width
height = content.height

这时候，问题就来了：
一些初学者明明只给盒子设置了100px的宽度，为什么盒子的理论宽度却是130px呢？

看来下面的例子，就很明了了，这就是ie盒子长宽不蕴含内边距以及边框的宽度导致的问题。

规范盒模型

规范盒模型，就是咱们常说的盒模型，它的长宽蕴含了内容content，内边距padding，边框border的宽度以及高度。

留神：

  • 规范盒模型并不蕴含外边距margin的宽度以及高度。
  • 在应用规范盒模型之前，咱们须要通过box-sizing: border-box;来设置盒模型的类型。
.borderBox {            box-sizing: border-box;            width: 100px;            height: 100px;            padding: 10px;            border: 1px solid #000;            margin: 19px;        }


在下面的图片咱们能够看到，盒子外面的内容显著比ie盒模型的内容要小，这是因为规范盒模型的长宽蕴含了内容content，内边距padding，边框border的宽度以及高度。

此时的咱们设置的长宽度计算形式为：
width = content.width + padding.width + border.width
height = content.height + padding.height + border.height