Heim > Web-Frontend > CSS-Tutorial > Ausführliche Erläuterung der umfassenden Analyse der Boxgröße

Ausführliche Erläuterung der umfassenden Analyse der Boxgröße

高洛峰
Freigeben: 2017-03-07 11:43:58
Original
2322 Leute haben es durchsucht

---Inhalt wiederherstellen beginnt---

Boxgröße

Mit Attributen können Sie bestimmte Elemente definieren, die auf eine bestimmte Weise zu einer bestimmten Region passen.

Wenn Sie beispielsweise zwei umrandete Boxen nebeneinander platzieren müssen, können Sie dies tun, indem Sie box-sizing auf „border-box“ einstellen. Dadurch rendert der Browser ein Feld mit der angegebenen Breite und Höhe und fügt die Ränder und den Innenabstand in das Feld ein.

Syntax
box-sizing: content-box|border-box|inherit;

content-box: w3c standard (Standard)

border-box: IE traditioneller Standard

Ausführliche Erläuterung der umfassenden Analyse der Boxgröße

content-box:

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; das Gleiche wie So ist die physikalische Höhe.

border-box:Ausführliche Erläuterung der umfassenden Analyse der Boxgröße

.test2{ box-sizing:border-box; width:10px; border:15px solid }

Die Breite 200px in test2 bezieht sich auf die Breite des Rahmens, das Gleiche gilt für die Höhe.

Sie können die Padding-Box anhand des obigen Beispiels verstehenAusführliche Erläuterung der umfassenden Analyse der Boxgröße

Das oben genannte umfassende Verständnis der Boxgröße ist der gesamte vom Herausgeber geteilte Inhalt Ich hoffe, dass es jedem eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Für eine detailliertere und umfassendere Analyse von Artikeln zum Thema Boxgröße beachten Sie bitte die chinesische PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage