CSS box-sizing 属性-之路教程

CSS box-sizing 属性值说明

值	说明
content-box	宽度和高度属性包括内容，但不包括填充、边框或者边距。它是默认值。
border-box	宽度和高度属性包括内容、填充和边框，但不包括边距。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

语法

box-sizing: content-box | border-box | initial | inherit;

在此示例中，显示了两个具有相同指定宽度和高度的 <div> 元素：

box-sizing 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .div1 {
        box-sizing: content-box;
        width: 400px;
        height: 50px;
        padding: 50px;
        border: 5px double #1c87c9;
      }
      .div2 {
        box-sizing: border-box;
        width: 400px;
        height: 50px;
        padding: 50px;
        border: 5px dashed #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <hr />
    <h3>box-sizing: content-box (default):</h3>
    <div class="div1">此 div 的宽度设置为 400px。 因此，全宽为 400px + 10px（左右边框）+ 100px（左右填充）= 510px。</div>
    <br>
    <h3>box-sizing: border-box:</h3>
    <div class="div2">宽度和高度适用于 div 元素的所有部分：全宽为 400px。</div>
  </body>
</html>

如果 box-sizing 定义为 content-box，则全宽将大于 div 定义的宽度。
如果定义了 box-sizing:border-box，则宽度和高度中将包含内边距和边框。

box-sizing 和 border-box 属性用于布局元素。
这种方法很有用，因为它消除了在布局内容时可能会遇到的许多陷阱，从而使处理元素的大小变得更加容易。

使用 box-sizing 属性创建两个并排定义的边框的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.container {
        width: 100%;
        border: 2px double #1c87c9;
      }
      div.box {
        box-sizing: border-box;
        width: 50%;
        border: 3px solid #ccc;
        float: left;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <p>两个并排定义的盒子</p>
    <div class="container">
      <div class="box">左半部分</div>
      <div class="box">右半部分</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

CSS box-sizing 属性

box-sizing 属性定义元素的宽度和高度的计算，如果它们包括填充和边框。

box-sizing 属性是 CSS3 属性之一。

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

宽度 + 填充 + 边框 = 元素的实际宽度
高度 + 填充 + 边框 = 元素的实际高度

因此，当定义了元素的宽度和高度时，该元素通常看起来比设置的要大（因为元素的边框和内边距被添加到元素指定的宽度和高度上）。

初始值	content-box
应用于	接受宽度和高度的所有元素。
继承	无效
可动画的	无效
版本	CSS3
DOM 语法	object.style.boxSizing=“border-box”；

日期：2020-06-02 22:14:21 来源：oir作者：oir

←CSS box-shadow 属性

CSS break-after属性→

CSS box-sizing 属性值说明

语法

box-sizing 属性示例：

使用 box-sizing 属性创建两个并排定义的边框的示例：

目录