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 Attribuut
- Referenctie
translation_of: Web/CSS/box-sizing
---
<div> </div>
<h2 id="Overzicht">Overzicht</h2>
<p>Het <strong><code>box-sizing</code></strong> attribuut wordt gebruikt om het standaard <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a> aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css">/* Keyword waarden */
box-sizing: content-box;
box-sizing: border-box;
/* Globale waarden */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
</pre>
<h3 id="Waarden">Waarden</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. <code>De </code>{{Cssxref("width")}} en {{Cssxref("height")}} attributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld:<code> .box {width: 350px;}</code> Daarna voeg je <code>{border: 10px solid black;}</code> toe. Resultaat: (in browser) <code>.box {width:370px;}</code><br>
<br>
Kort samengevat worden de afmetingen van een element berekent als volgt: <em>width = breedte van de content</em> en <em>height = hoogte van de content</em>, exclusief borders of paddings.</dd>
</dl>
<dl>
<dt><code>border-box</code></dt>
<dd>De<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{Cssxref("width")}} en {{Cssxref("height")}} waarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld: <code>.box {width: 350px; border: 10px solid black;}</code> resulteert in een gerenderd element met <code>width: 350px</code>. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van <code>border-box</code> een element de doen verdwijnen.</dd>
<dd>De afmetingen worden berekend als volgt: <em>width = border + padding + breedte van de inhoud</em> en <em>height = border + padding + hoogte van de inhoud</em>.</dd>
</dl>
<h3 id="Formele_syntax">Formele syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<pre class="brush:css">.example {
box-sizing: border-box;
}</pre>
<h2 id="Specificaties">Specificaties</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specificatie</th>
<th scope="col">Status</th>
<th scope="col">Opmerking</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Initiele definitie</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Standaard ondersteuning</td>
<td>1.0 {{property_prefix("-webkit")}}<sup>[1]</sup><br>
10.0</td>
<td>12.0</td>
<td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("29.0")}}</td>
<td>
<p>8.0<sup>[1]</sup></p>
</td>
<td>7.0</td>
<td>3.0 (522){{property_prefix("-webkit")}}<br>
5.1<sup>[2]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Standaard ondersteuning</td>
<td>2.1{{property_prefix("-webkit")}}<sup>[1]</sup><br>
4.0</td>
<td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}} [1]<br>
{{CompatGeckoMobile("29.0")}}</td>
<td>9.0</td>
<td>
<p>7.0 {{property_prefix("-webkit")}}<br>
10.0</p>
</td>
<td>3.2 {{property_prefix("-webkit")}}<br>
4.0</td>
</tr>
</tbody>
</table>
</div>
<p>[1] <code>box-sizing </code>wordt niet gerespecteerd als de hoogte wordt berekend door {{domxref("window.getComputedStyle()")}}, in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen <code>currentStyle</code> attribuut geeft niet de juiste waarde voor <code>height</code> terug.</p>
<p>[2] De vendor prefix <code>-webkit</code> is verwijderd sinds <a href="http://trac.webkit.org/changeset/71348">534.12</a>.</p>
<h2 id="Zie_ook">Zie ook</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>
|
