From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/nl/web/css/box-sizing/index.html | 145 +++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 files/nl/web/css/box-sizing/index.html (limited to 'files/nl/web/css/box-sizing') diff --git a/files/nl/web/css/box-sizing/index.html b/files/nl/web/css/box-sizing/index.html new file mode 100644 index 0000000000..ed31e59295 --- /dev/null +++ b/files/nl/web/css/box-sizing/index.html @@ -0,0 +1,145 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Attribuut + - Referenctie +translation_of: Web/CSS/box-sizing +--- +
 
+ +

Overzicht

+ +

Het box-sizing attribuut wordt gebruikt om het standaard CSS box model aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword waarden */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Globale waarden */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

Waarden

+ +
+
content-box
+
Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. De {{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: .box {width: 350px;} Daarna voeg  je {border: 10px solid black;} toe. Resultaat: (in browser) .box {width:370px;}
+
+ Kort samengevat worden de afmetingen van een element berekent als volgt: width = breedte van de content en height = hoogte van de content, exclusief borders of paddings.
+
+ +
+
border-box
+
De {{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: .box {width: 350px; border: 10px solid black;} resulteert in een gerenderd element met width: 350px. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van border-box een element de doen verdwijnen.
+
De afmetingen worden berekend als volgt: width = border + padding + breedte van de inhoud en height = border + padding + hoogte van de inhoud.
+
+ +

Formele syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
.example {
+  box-sizing: border-box;
+}
+ +

Specificaties

+ + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Initiele definitie
+ +

Browser compatibiliteit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Standaard ondersteuning1.0 {{property_prefix("-webkit")}}[1]
+ 10.0		12.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("29.0")}}		 +

8.0[1]

+ 		7.03.0 (522){{property_prefix("-webkit")}}
+ 5.1[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Standaard ondersteuning2.1{{property_prefix("-webkit")}}[1]
+ 4.0		{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}} [1]
+ {{CompatGeckoMobile("29.0")}}		9.0 +

7.0 {{property_prefix("-webkit")}}
+ 10.0

+ 		3.2 {{property_prefix("-webkit")}}
+ 4.0
+
+ +

[1] box-sizing 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 currentStyle attribuut geeft niet de juiste waarde voor height terug.

+ +

[2] De vendor prefix -webkit is verwijderd sinds 534.12.

+ +

Zie ook

+ + -- cgit v1.2.3-54-g00ecf