CSS 盒子尺寸

CSS 框大小调整

CSSbox-sizing属性允许我们将内边距和边框包含在元素的总宽度和高度中。

没有 CSS box-sizing 属性

默认情况下，元素的宽度和高度计算如下：

width + padding + border = 元素的实际宽度
height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常会显得比您设置的要大（因为元素的边框和填充会添加到元素的指定宽度/高度上）。

下图显示了两个具有相同指定宽度和高度的 <div> 元素：

这个div较小（宽度为300px，高度为100px）。

这个div更大（宽度也是300px，高度是100px）。

上面的两个 <div> 元素最终在结果中具有不同的大小（因为 div2 指定了填充）：

示例

.div1 {
  width: 300px;
  height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

亲自试一试 »

这个box-sizing属性解决了这个问题。

使用 CSS box-sizing 属性

这个box-sizing属性允许我们将内边距和边框包含在元素的总宽度和高度中。

如果你设置box-sizing: border-box;在元素上，内边距和边框包含在宽度和高度中：

现在两个 div 的大小相同！

万岁！

这是与上面相同的示例，其中box-sizing: border-box;添加到两个 <div> 元素：

示例

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
height: 100px;
padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

亲自试一试 »

由于使用的结果box-sizing: border-box;好多了，许多开发人员希望页面上的所有元素都以这种方式工作。

下面的代码确保所有元素都以这种更直观的方式调整大小。许多浏览器已经使用box-sizing: border-box;对于许多表单元素（但不是全部 - 这就是为什么输入和文本区域在宽度上看起来不同：100％；）。

将其应用于所有元素是安全且明智的：

示例

* {
box-sizing: border-box;
}

亲自试一试 »

CSS 框大小调整属性

Property	Description
box-sizing	Defines how the width and height of an element are calculated: should they include padding and borders, or not