blob: db43c19ab323c92ec7c2d1feed6f6eabde684782 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: box-sizing
slug: Web/CSS/box-sizing
tags:
- CSS
- CSS Box Model
- CSS 属性
- Reference
- border-box
- border-box不包含margin
- box-sizing
- margin
translation_of: Web/CSS/box-sizing
---
<div>{{CSSRef}}</div>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 中的 <strong><code>box-sizing</code> </strong>属性定义了 {{glossary("user agent")}} 应该如何计算一个元素的总宽度和总高度。</p>
<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
<p>在 <a href="/en-US/docs/CSS/Box_model" title="CSS/Box_model">CSS 盒子模型</a>的默认定义里，你对一个元素所设置的 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只会应用到这个元素的内容区。如果这个元素有任何的 {{Cssxref("border")}} 或 {{Cssxref("padding")}} ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。</p>
<p>box-sizing 属性可以被用来调整这些表现:</p>
<ul>
<li><code>content-box</code> 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。</li>
<li><code>border-box</code> 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。</li>
</ul>
<p><strong>译者注:</strong> <code>border-box</code>不包含<code>margin</code></p>
<div class="hidden">
<p>一些专家甚至建议所有的 Web 开发者们<a href="https://css-tricks.com/international-box-sizing-awareness-day/">将所有的元素的box-sizing都设为border-box</a>。</p>
</div>
<div class="blockIndicator note">
<p><strong>Note:</strong> 对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示：</p>
<p class="syntaxbox">* { box-sizing: border-box; }</p>
<p>这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。</p>
</div>
<h2 id="语法">语法</h2>
<p><code>box-sizing</code> 属性被指定为下面列表中的关键字。</p>
<h3 id="Values" name="Values">属性值</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>默认值，标准盒子模型。 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，<code>.box {width: 350px; border: 10px solid black;}</code> 在浏览器中的渲染的实际宽度将是 370px。<br>
<br>
尺寸计算公式：</dd>
<dd><code>width</code> = 内容的宽度</dd>
<dd><code>height</code> = 内容的高度</dd>
<dd>宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。</dd>
<dt><code>border-box</code></dt>
<dd> {{Cssxref("width")}} 和 {{Cssxref("height")}} 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的<a href="/en-US/docs/CSS/Box_model" title="CSS/Box_model">盒模型</a>。注意，填充和边框将在盒子内 , 例如, <code>.box {width: 350px; border: 10px solid black;}</code> 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。<br>
<br>
尺寸计算公式：</dd>
<dd><em><code>width</code> = border + padding + 内容的宽度</em></dd>
<dd><em><code>height</code> = border + padding + 内容的高度</em></dd>
<dt>
<h3 id="形式化语法">形式化语法</h3>
</dt>
</dl>
{{csssyntax}}
<h2 id="Examples" name="Examples">示例</h2>
<p>本例显示了不同的 <code>box-sizing</code> 值如何改变两个原本相同的元素的渲染尺寸。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample('Examples', 'auto', 300)}}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.box-sizing")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/CSS/box_model" title="CSS/Box model">CSS 框盒模型</a></li>
</ul>
|
