Css 简明教程

CSS - Box Sizing

CSS 中的 box-sizing 属性用于定义元素的总宽高计算方式。默认情况下，元素的宽高包括其内容、填充和边框。但是，通过 box-sizing 属性，您可以改变此行为，以将填充和边框包含或排除在宽高计算中。

在较旧版本的 CSS (CSS2) 中，盒模型工作的默认方式使元素看起来比传递给它的尺寸（宽和高）更大。

CSS box sizing property

CSS box-sizing 属性对于调整元素布局的行为很有用。

Possible Values

box-sizing CSS 属性可以具有一个值（一个关键词），该值是以下值之一：

  1. content-box ：这是默认值。将此值传递给 box-sizing 属性时，它会返回默认行为，其中填充或/和边框会添加到元素的总宽高。

  2. border-box ：将此值传递给 box-sizing 属性时，它告诉浏览器调整传递给元素的填充或外边距值。这会导致内容区域缩小，并吸收为元素指定的边框或/和填充。这是 <table>, <select>, <button>, 和 <input> 元素使用的默认样式。

Applies to

接受宽或高的所有 HTML 元素。

DOM Syntax

object.style.boxSizing = "content-box | border-box";

Example

这里有一个 CSS 属性 box-sizing: border-box 的示例：

<html>
<head>
<style>
   .with-content-box {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 3px solid green;
      background-color: rgb(241, 234, 85);
      box-sizing: content-box;
   }
   .with-border-box {
      width: 200px;
      height: 100px;
      padding: 10px;
      border: 3px solid rgb(64, 10, 215);
      background-color: lightpink;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div class="with-content-box">CONTENT BOX</div><br />
   <div class="with-border-box">BORDER BOX</div>
</body>
</html>

上面给出的示例显示了 box-sizing: border-box 和 box-sizing: content-box 属性值之间的明显差异。这里， box-sizing: border-box 属性在计算总宽高时忽略填充值。而 box-sizing: content-box 属性值在计算中包括填充值。

为了实现平滑、流畅且直观的响应式设计，可以按如下方式设置 box-sizing: border-box 值：

* {
   box-sizing: border-box;
}

上述语法可能不会给出所需的结果，因为它会忽略伪元素。因此，还有一种包括重置的伪元素的语法。

*, *:before, *:after {
   box-sizing: border-box;
}

这种通用的框大小方法将使 box-sizing: content-box | padding-box 的使用变得困难。因此，在这种情况下，还有一种语法可能更有用、更合适。

html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}

这种通用框大小重置语法更实用，能给用户更大的灵活性。

虽然每个当前浏览器都支持 box-sizing: border-box （不带前缀）；但是一些较旧版本的浏览器需要支持。为了提供该支持，您可能需要按如下方式使用前缀 -webkit 和 -moz ：

html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}