Css 简明教程

CSS - Box Sizing

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

The box-sizing property in CSS is used to define how the total width and height of an element is calculated. By default, the width and height of an element includes its content, padding, and border. However, with the box-sizing property, you can alter this behavior to include or exclude the padding and border from the width and height calculation.

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

In older version of CSS (CSS2), the default way in which the box model worked made the element look bigger than the dimensions that were passed to it (width and height).

CSS box sizing property

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

The CSS box-sizing property is useful in adjusting the behaviour of the layout of the elements.

Possible Values

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

The box-sizing CSS property can have a value, that is a keyword, either of one of the following:

  1. content-box: This is the default value. When this value is passed to box-sizing property, it returns the default behavior, where padding or/and border are added in the total width and height of the element.

  2. border-box: When this value is passed to box-sizing property, it tells the browser to adjust the padding or margin values, that are passed to an element. This results in shrinking the content area and absorbing the border or/and padding specified for the element. It is the default styling used for <table>, <select>, <button>, and <input> elements.

Applies to

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

All the HTML elements that accept width or height.

DOM Syntax

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

Example

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

Here is an example of CSS property 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 属性值在计算中包括填充值。

The example given above shows a clear difference between the box-sizing: border-box and box-sizing: content-box property values. Here the box-sizing: border-box property ignores the padding value in calculation of total width and height. Whereas the box-sizing: content-box property value includes the padding value in the calculation.

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

For a smooth, fluid and intuitive responsive design, the box-sizing: border-box value can be set in the following manner:

* {
   box-sizing: border-box;
}

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

The above syntax may not give desired results, as it ignores the pseudo-elements. So there is another syntax which includes the pseudo-elements for the reset.

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

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

This universal box sizing method will make the use of box-sizing: content-box | padding-box difficult. Hence, there is one more syntax that may be more useful and apt in such situations.

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

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

This universal box-sizing reset syntax is more useful and gives more flexibility to the users.

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

Though every current browser supports the box-sizing: border-box, unprefixed; but some older versions of the browsers need support. In order to provide that support you may need to use the prefixes -webkit and -moz in the following manner:

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;
}