Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der CSS3-Boxgröße

Detaillierte Erläuterung der CSS3-Boxgröße

高洛峰Original: 2017-02-20 11:28:541335Durchsuche

Die Leute erkannten langsam, dass das traditionelle Box-Modell nicht einfach war, also fügten sie eine neue CSS-Eigenschaft namens box-sizing hinzu.

box-sizing: Boxgröße, Boxmodell.

Wir stellen oft fest, dass die Breite des linken und rechten Moduls dazu führt, dass es herunterfällt. Das Hinzufügen dieses Stils kann das Problem lösen:

<!DOCTYPE html><html><head><style> p.container{width:300px;border:10px solid blue;}p.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;height:80px;padding:10px;border:10px solid red;float:left;}</style></head><body><p class="container"><p class="box">这个 p 占据左半部分。</p><p class="box">这个 p 占据右半部分。</p><p style="clear:both;"></p></p></body></html>

Die Box-Sizing-Eigenschaft kann einer von drei Werten sein: content-box (Standard), border -Box, Polsterbox.

content-box, border und padding werden nicht in die Breite berechnet

padding-box, padding werden in die Breite berechnet

border-box, border und padding werden in die Breite berechnet Im Inneren ist es tatsächlich ein seltsamer Modus.

Pear:

<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }</style>

Ausführlichere Artikel zur CSS3-Boxgröße finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

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

Vorheriger Artikel：CSS3 simuliert ein JQ-KlickereignisNächster Artikel：CSS3 simuliert ein JQ-Klickereignis

In Verbindung stehende Artikel

Mehr sehen