Detaillierte Erklärung der Box-Größe in CSS3 (Content-Box und Border-Box)

Box-Größe in CSS3 (Inhaltsbox und Rahmenbox)

Mit der Box-Sizing-Eigenschaft in CSS3 können Sie das Boxmodell auf eine bestimmte Weise angeben. Es gibt zwei Möglichkeiten:

content-box: Standard-Boxmodell, auch bekannt als W3C-Boxmodell, das im Allgemeinen in modernen Browsern verwendet wird

border-box: Seltsames Boxmodell, Boxmodell in niedrigeren Versionen von IE-Browsern

Die Standardeinstellung für moderne Browser und IE9+ ist „content-box“.

Syntaxformat:

box-sizing：content-box | border-box

Der Unterschied:

Inhaltsbox: Polsterung und Rahmen sind nicht in der definierten Breite und Höhe enthalten.

Die tatsächliche Breite der Box = die eingestellte Breite + Polsterung + Rahmen

Border-Box: Polsterung und Rahmen sind in der definierten Breite und Höhe enthalten.

Die tatsächliche Breite der Box = die eingestellte Breite (Polsterung und Rahmen haben keinen Einfluss auf die tatsächliche Breite)

Zusammenfassen

Oben habe ich Ihnen die Größenanpassung von Boxen (Inhaltsbox und Rahmenbox) in CSS3 vorgestellt. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!