乐趣区

关于css:5分钟搞懂css里面的盒模型

jiezi

教你 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

退出移动版