blob: 058f1799184b536233645a51a5e4633365cc4df5 (
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
|
---
title: box-sizing
slug: Web/CSS/box-sizing
tags:
- CSS
- CSS Box Model
- CSS Property
- Experimental
- Reference
- border-box
- box model
- content-box
translation_of: Web/CSS/box-sizing
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="概要">概要</h2>
<p>The <strong><code>box-sizing</code></strong> property is used to alter the default <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a> used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.</p>
<p><strong><code>box-sizing</code></strong> 屬性 用於更改預設 <a href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" title="CSS/Box_model">CSS 盒子模型</a> 中所計算的寬度和高度。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。</p>
<p>{{cssinfo}}</p>
<h2 id="句法">句法</h2>
<pre class="brush: css">/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;
/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>這是根據 CSS 標準的起始值和預設值。 {{Cssxref("width")}} 與 {{Cssxref("height")}} 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 <code>.box {width: 350px}; 而且 {border: 10px solid black;}</code> ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，;<br>
<br>
簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。</dd>
<dt><code>border-box</code></dt>
<dd> {{Cssxref("width")}} 和 {{Cssxref("height")}} 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的<a href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" title="CSS/Box_model">盒模型</a>。注意，內邊距和邊框都將在盒子內 ，例如，<code>.box {width: 350px; border: 10px solid black;} </code>，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px， 因為邊框（border）佔了20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。<br>
<br>
這裡的維度計算為：</dd>
<dd><em>width = border + padding + 內容的 width</em>，</dd>
<dd><em>height = border + padding + 內容的 height</em>。</dd>
<dt><code>padding-box</code> {{non-standard_inline}} {{deprecated_inline}}</dt>
<dd>The {{Cssxref("width")}} and {{Cssxref("height")}} properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<pre class="brush:css">/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */
.example {
-moz-box-sizing: border-box;
box-sizing: border-box;
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.box-sizing")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a></li>
</ul>
|
