CSS3 box-sizing 属性
CSS3 box-sizing 属性
CSS3 box-sizing 属性允许您定义某个元素的CSS框模型应该如何计算其宽度和高度。通过设置 box-sizing 属性,您可以改变元素如何在浏览器中计算它们的大小。
语法
box-sizing: content-box | border-box | inherit;
可选值
- content-box:默认值。元素的宽度和高度只包括内容的宽度和高度,不包含边框(border)和内边距(padding)。
- border-box:元素的宽度和高度包括内容、内边距和边框的总宽度和高度。
- inherit:继承父元素的 box-sizing 属性的值。
用法
对于一个带有内部填充和边框的 div
元素,其默认 box-sizing
值为 content-box
。以下是一个示例:
<div>
<h2>Hello World</h2>
<p>这是一个段落</p>
</div>
div {
width: 200px;
border: 10px solid #000;
padding: 20px;
margin: 20px;
}
这个 div
元素具有以下CSS框模型:
宽度 = 内容宽度(h2和p)+ 2 * padding(20px)+ 2 * border(10px)= 280px
高度 = 内容高度(h2和p)+ 2 * padding(20px)+ 2 * border(10px)= 200px
如果为该元素设置 box-sizing: border-box
,则元素的宽度和高度将包括其内部填充和边框。以下是一个示例:
<div class="border-box">
<h2>Hello World</h2>
<p>这是一个段落</p>
</div>
.border-box {
width: 200px;
border: 10px solid #000;
padding: 20px;
margin: 20px;
box-sizing: border-box;
}
这个 div
具有以下CSS框模型:
宽度 = 200px(已设置为元素宽度)
高度 = 200px(已设置为元素高度)
总结
通过使用 box-sizing
属性,您可以控制CSS框模型的计算方式,使您更加方便地设计和排版您的网页。默认情况下,元素的 box-sizing
值为 content-box
。但是,通过将 box-sizing
值设置为 border-box
,您可以轻松将元素的宽度和高度设置为包括其内部填充和边框。这可以让您更加轻松地设计一个响应式布局。