Das Boxmodell verstehen

Es gibt zwei Arten von Box-Modellen: W3C- und IE-Box-Modelle

Das Box-Modell umfasst Rand, Rahmen, Polsterung und Inhalt

W3C-Elementbreite = Inhaltsbreite

IE-Elementbreite = Inhalt+Padding+Rahmen

Ich persönlich denke, dass das vom W3C definierte Box-Modell und das vom IE definierte Box-Modell sinnvoller sind, und das vom IE definierte ist es vernünftiger, und das durch

Element definierte Breite sollte Rand und Polsterung enthalten. Dies ist das gleiche wie die Box in unserem wirklichen Leben.

W3C hat auch sein eigenes Problem erkannt Eine neue Stilbox in der CSS3-Größe hinzugefügt,

enthält zwei Attribute „content-box“ und „border-box“.

content-box: width=content+padding+border

border-box: width=width (durch Stil angegebene Breite)

1. Für Elemente auf Zeilenebene sind margin-top und margin-bottom für obere und untere Elemente ungültig, und margin-left und margin-right sind gültig

2. Für benachbarte Elemente auf Blockebene gelten margin-bottom und Margin-Top-Wertmethoden

1) Alle sind positive Zahlen: Nehmen Sie den Maximalwert Distance=Math.max(margin-botton,margin-top)

2) Alle sind negative Zahlen: Nehmen Sie der Mindestwert Distance=Math.min( margin-botton,margin-top)

3) Die Oberseite ist eine positive Zahl und die Unterseite ist eine negative Zahl oder die Oberseite ist eine negative Zahl und die Unterseite ist a positive Zahl: Addition von positivem und negativem Abstand = margin-botton+margin-top

Das obige ist der detaillierte Inhalt vonDas Boxmodell verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!