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 属性框大小调整的示例： 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;
}

这种通用的框大小重置语法更有用，并为用户提供了更大的灵活性。

尽管每个当前浏览器都支持框大小：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;
}
本页
上一页
下一页