CSS - 盒模型大小

CSS 中的box-sizing属性用于定义元素的总宽度和高度是如何计算的。默认情况下，元素的宽度和高度包含其内容、内边距和边框。但是，使用box-sizing属性，您可以更改此行为，以包括或排除宽度和高度计算中的内边距和边框。

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

宽度 + 内边距 + 边框 = 元素框的实际可见/渲染宽度

高度 + 内边距 + 边框 = 元素框的实际可见/渲染高度

CSS 盒模型大小属性

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

可能的值

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

content-box：这是默认值。当此值传递给box-sizing属性时，它将返回默认行为，其中内边距或/和边框添加到元素的总宽度和高度中。
border-box：当此值传递给box-sizing属性时，它会告诉浏览器调整传递给元素的内边距或边距值。这导致内容区域缩小并吸收为元素指定的边框或/和内边距。它是<table>、<select>、<button>和<input>元素使用的默认样式。

padding-box值不受任何浏览器支持，因此不能传递给box-sizing属性。

应用于

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

DOM 语法

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

示例

以下是一个 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;
}

打印页面