HTML- und CSS-Boxmodell

Dieses Mal werde ich Ihnen das Box-Modell von HTML und CSS vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Box-Modells von HTML und CSS? Stehen Sie auf und werfen Sie einen Blick darauf.

1. Rand (Teil 1)

1. Was ist der Rand?

Der Rand ist die Linie, die die Breite und Höhe des Beschriftung

2. Format der Randattribute

2.1 Kontinuierliches Schreiben (Rahmen auf vier Seiten gleichzeitig setzen)
Rahmen: Breite des Rahmens, Stil des Rahmens, Farbe des Rahmens;

Tastenkombination:

bd+ border: 1px solid #000;

Hinweise:

1. Das Farbattribut kann im fortlaufenden Schreibformat weggelassen werden . Wenn es weggelassen wird, ist die Standardeinstellung schwarz
2. Im fortlaufenden Schreibformat kann der Stil nicht weggelassen werden.
3. Im fortlaufenden Schreibformat kann dies nicht der Fall sein weggelassen werden, aber Sie können den Rand immer noch sehen, nachdem Sie ihn weggelassen haben

2.2 Kontinuierliches Schreiben (legen Sie die Ränder der vier Seiten separat fest)

border-top: Randbreite, Randstil, Rand color;
border-right: Randbreite, Randstil, Randfarbe;
border-bottom: Randbreite, Randstil, Randfarbe;
border-left: Randbreite, Randstil, Randfarbe;

Tastenkombination:

bt+ border-top: 1px solid #000;
br+
bb+
bl+

2. Border ( Teil 2)

2.3 Kontinuierliches Schreiben (legen Sie jeweils die Ränder von vier Seiten fest) Legen Sie den Rand anhand von drei Elementen fest:

Randbreite: oben rechts, unten links;
border-style: oben rechts, unten links;
border-color: oben rechts, unten links;

Hinweise:

1 Die Werte dieser drei Attribute werden im Uhrzeigersinn zugewiesen , das heißt, im täglichen Leben nach oben, rechts, unten und links zugewiesen, statt nach oben, unten, links und rechts

2 Wenn die Werte dieser drei Attribute weggelassen werden Die Regeln von

2.1 Oben rechts, unten links> Die Werte links sind die gleichen wie die rechts

2.2 Oben rechts, unten links> rechts> Die Werte links sind die Summe. Der Wert rechts ist derselbe, der Wert unten ist derselbe wie oben

2.3 Der Wert oben, rechts, unten und links ist das Gleiche wie oben

3. Nicht kontinuierliches Schreiben (Richtung + Element) 🎜>border-left-width: 20px;
border-left-style: double;
border-left- Farbe: rosa;

3. Polsterung

1. Was ist Polsterung?

Der Abstand zwischen dem Rand und dem Inhalt ist Polsterung

2. Format

2.1 Nicht kontinuierliches Schreiben

Auffüllen oben: ;

Auffüllen rechts: ;
Auffüllen unten: ;padding-left: ;

2.2 Fortlaufendes Schreiben

padding: oben rechts, unten links; Der Wert ist der gleiche wie rechts

3.2 Oben rechts, unten links > Der Wert links ist derselbe wie der Wert oben

3.3 Oben rechts, unten links > , unten links Der Wert ist derselbe wie oben

Hinweise:

1 Nach dem Festlegen des Abstands für das Etikett ändern sich die von dem Etikett eingenommene Breite und Höhe
2 die Polsterung für das Etikett. Danach erhält auch der Innenrand eine Hintergrundfarbe

4. Rand

1. Was ist der Außenrand? 🎜>Zwischen Tags und Tags Der Abstand ist der äußere Rand

2. Format

2.1 Nicht kontinuierliches Schreiben

Rand oben: ;

Rand rechts: ;

Rand unten

: ;

Rand links: ;

2.2 Fortlaufendes Schreiben
Rand: oben rechts, unten links;
3 Die Regeln wenn die Werte dieser drei Attribute weggelassen werden
3.1 Oben, rechts, unten> Der Wert links ist derselbe wie der rechts

3.2 Oben, rechts, unten, links> Der Wert links ist derselbe wie oben.

Oben, rechts, unten, links> Der Wert rechts. Unten und links ist das Gleiche wie oben

Hinweis:

Der Teil des äußeren Randes hat keine Hintergrundfarbe

5. Randverschmelzungsphänomen

1. In der vertikalen Richtung des Standardlayouts überlappen sich die Ränder standardmäßig nicht, und wenn die Ränder größer sind, hören Sie einfach zu, wer auch immer sagt; tritt nicht in horizontaler Richtung auf;

Randverschmelzungsphänomen (Kollaps)

6 >

1. Was ist das CSS-Box-Modell?Das CSS-Box-Modell ist nur eine Metapher, alles in HTML. Die Tags sind alle Boxen

Fazit

1 . Alle Tags in HTML können auf Breite/Höhe == festgelegt werden, um den Bereich anzugeben, in dem Inhalte gespeichert werden können innerer Rand = = Polsterung Rand == Mobiltelefonbox selbst Rand == Lücke zwischen Boxen

7. Breite und Höhe des Boxmodells

1. Die Breite und Höhe des Inhalts

sind die durch festgelegte Breite und Höhe die Breiten-/Höhenattribute

2. Die Breite und Höhe des Elements

Breite = linker Rand + linker Rand + Breite + rechter Rand + rechter Rand

Höhe kann im nachgewiesen werden auf die gleiche Weise3. Breite und Höhe des Elementraums

Breite = linker Außenrand + linker Rand + linker Innenrand + Breite + rechter Innenrand + rechter Rand + rechter Außenrand
Das gleiche Prinzip kann bewiesen werden

8 -sizing-Attribut

1. Es gibt ein neues Box-Sizing-Attribut in CSS3. Dieses Attribut kann sicherstellen, dass die Breite und Höhe des Box-Elements unverändert bleiben

2. Wie das Box-Sizing-Attribut sicherstellt, dass die Breite und Höhe des Box-Elements unverändert bleibt. Nach dem Hinzufügen von Padding und Rand müssen wir dasselbe tun Stellen Sie sicher, dass die Breite und Höhe des Box-Elements unverändert bleiben. Dann müssen Sie die Breite und Höhe eines Teils des Inhalts

3.box-sizing value

3.1content-box ( Standardwert)
Die Breite und Höhe des Elements = Rand + Polsterung + Breite und Höhe des Inhalts

3.2border-box (die Breite und Höhe des Elements ändert sich nicht)
Die Breite und Höhe des Elements = Breite und Höhe von Breite/Höhe

9 .Hinweise (1)

1 Zwei Boxen stehen in einer verschachtelten Beziehung. Wenn Sie dann den oberen Rand der inneren Box festlegen, wird auch die äußere Box nach unten gedrückt

2. Wenn die äußere Box nicht zusammen nach unten gesetzt werden soll, können Sie eine hinzufügen border-Attribut auf oder in der Unternehmensentwicklung, wenn Sie den Abstand zwischen verschachtelten Beziehungen steuern müssen Bei Kästchen sollten Sie zuerst die Auffüllung und dann den Rand in Betracht ziehen

Der Rand wird im Wesentlichen zur Steuerung der Geschwisterbeziehungen verwendet

Hinweise zur Lücke zwischen

(2)

1. In verschachtelten Feldern können wir „margin: 0 auto“ verwenden, um die innere Box in der äußeren Box „Medium“ horizontal zu zentrieren.

2.margin: 0 „auto“ ist nur für die horizontale Richtung gültig wird nach Pixeln in vertikaler Richtung berechnet;

10 text-align: center; and margin:0 auto;text-align: center; >

Stellen Sie den in der Box gespeicherten Text/das Bild so ein, dass er horizontal zentriert istmargin:0 auto; Funktion

Lassen Sie die Box horizontal zentrieren

11. Löschen Sie die Standardränder

1. Warum sollten Sie die Standardränder (äußere Ränder und Abstand) löschen

In der Unternehmensentwicklung, um die Position der Box besser kontrollieren zu können? und berechnen Sie die Breite und Höhe der Box usw. In der Unternehmensentwicklung besteht das erste, was Sie vor dem Schreiben von Code tun müssen, darin, die Standardränder zu löschen 2. So löschen Sie die Standardränder

Format

3. Notizen

Wildcard Der Selektor

*{margin: 0;padding: 0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{            margin:0;padding:0}

sucht (durchläuft) alle Tags in der aktuellen Schnittstelle, also die Die Leistung ist nicht gut

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS-Hintergrund und Sprites

Drei Hauptfunktionen von CSS, die Sie kennen müssen

Tipps zur Verwendung von CSS, die Sie nicht kennen

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