Verständnis des CSS3-Boxmodells und der Boxgrößeneigenschaften-CSS-Tutorial-php.cn

Verständnis des CSS3-Boxmodells und der Boxgrößeneigenschaften

高洛峰

Freigeben： 2017-03-02 15:16:24

Original

1808 Leute haben es durchsucht

Jedes Element im Dokument wird als rechteckiges Feld dargestellt. Der Zweck der Rendering-Engine besteht darin, die Größe, Eigenschaften – wie Farbe, Hintergrund, Randaspekte – und die Position dieser Boxen zu bestimmen. In CSS werden diese rechteckigen Boxen mithilfe des Standard-Box-Modells beschrieben. Dieses Modell beschreibt den Raum , den ein Element einnimmt. Jede Box hat vier Ränder: Rand, Rand, Innenabstand und Inhalt.

css3 盒模型以及box-sizing属性了解

Im W3C-Modell: Gesamtbreite = linker Rand + linker Rand + linker Rand + Breite + rechter Rand + rechter Rand + rechter Rand

im IE-Modell: Gesamtbreite = Rand links + Breite + Rand rechts

führte das Attribut box-sizing in CSS3 ein, das Änderungen am Standard-CSS-Feld ermöglicht Das Modell berechnet die Breite und Höhe von Elementen.

enthält zwei Optionen:

content-box: Standard-Box-Modell, Breite und Höhe, definiert durch CSS. Enthält nur die Breite und Höhe des Inhalts. (Standard)

border-box: IE-Boxmodell, die durch CSS definierte Breite und Höhe umfasst Inhalt, Abstand und Rand

Beispiel:

( con1 ist auf box-sizing: border-box eingestellt, con ist die Standard-Inhaltsbox)

<head lang="en">     
    <meta charset="UTF-8">     
    <title></title>     
    <style>     
        .con{width: 100px; height: 100px;background-color:royalblue;     
             border:1px solid red; padding: 10px;}     
        .con1{box-sizing: border-box;}     
    </style>     
</head>     
<body>     
    <p class="con"></p>     
    <p class="con con1"></p>     
</body>

Nach dem Login kopieren

Sie können den Unterschied zwischen den beiden Boxen deutlich erkennen die Konsole

Das Boxmodell des ersten p lautet wie folgt: content-box

css3 盒模型以及box-sizing属性了解

Das Boxmodell des zweiten p lautet wie folgt: border- box

css3 盒模型以及box-sizing属性了解

Das Obige ist der gesamte Inhalt, den der Herausgeber Ihnen zu einem umfassenden Verständnis des CSS3-Boxmodells und der Boxgrößeneigenschaften vermittelt hat . Bitte unterstützen Sie die chinesische PHP-Website~

Weitere CSS3-Boxmodelle und Boxgrößenattribute finden Sie auf der chinesischen PHP-Website für verwandte Artikel!