HTML5-Notizen zum fünften Tag

CSS-Eigenschaften

Absatzeigenschaften

letter-spacing:10px; der Abstand zwischen Wörtern

word-spacing:1px; der Abstand zwischen Wörtern (Wird hauptsächlich auf Englisch verwendet Websites)

text-transform:capitalize (den ersten Buchstaben jedes Wortes groß schreiben) Großbuchstaben (alles in Großbuchstaben) Kleinbuchstaben (alles in Kleinbuchstaben) (Wird hauptsächlich auf englischen Websites verwendet)

white-space :normal /nowrap (keine Zeilenumbrüche)

Box-Modell

Alle Tags werden als Box behandelt;

Elemente auf Blockebene werden als große Box behandelt, und das Inline-Element ist als kleiner Kasten betrachtet

Aus welchen Teilen besteht die Verkörperung eines Kastenmodells?

width+height (Breite und Höhe des Inhalts)+padding (innerer Rand/padding)+border (border)+margin (äußerer Rand)

border: (border)

Rand-oben:

Rand-unten:

Rand-links:

Rand-rechts:

Rand-unten: (unterer Rand)

border-bottom-style: durchgezogen (durchgezogene Linie) gestrichelt (gestrichelte Linie) gepunktet (gepunktete Linie) doppelt (doppelte durchgezogene Linie) Rahmenlinienstil

border-bottom-color :red/ #fff;Die Farbe des Randes

border-bottom-width:3px;Die Dicke des Randes

border:3px solid red;

border:none/0 ;

border-top:none/0;

border-collapse:collapse (starke Kanten entfernen)

padding: (padding, padding, padding) content Der Abstand zu der Rand ist relativ

padding-top:

padding-left:

padding-right:

padding-bottom:

(Auffüllung wirkt sich auf die Breite und Höhe der Box aus)

Auffüllung:10px (oben, unten, links und rechts)

Auffüllung:10px 20px (oben, unten, links und rechts)

padding:10px 20px 30px ;(oben rechts, unten) links = rechts „Folge dem Prinzip im Uhrzeigersinn“

padding: 10px 20px 30px 40px ;(oben rechts, unten links)

padding: 0 0 5px 0; (kann nur so geschrieben werden)

margin: (Ränder, padding) Der Abstand zwischen Beschriftungen
ist relativ zu

Der obere und Untere Ränder von Inline-Elementen können nicht implementiert werden

Blöcke Die oberen und unteren Ränder von Ebenenelementen können nicht akkumuliert werden und können nur den Maximalwert annehmen

Der linke und rechte Rand von Inline und Block -Level-Elemente sind kumulative Werte

Die Ränder haben keinen Einfluss auf die Breite und Höhe des Felds

Rand:10px (oben, unten, links und rechts)

Rand: 10px 20px; (oben, unten, links und rechts)

Rand:10px 20px 30px; (oben, rechts, unten) links = rechts „Grundsätze im Uhrzeigersinn befolgen“

Rand: 10px 20px 30px 40px; (oben rechts, unten links)

Rand: 0 0 5px 0; (kann nur so geschrieben werden)

Eine Box Tatsächliche Größe:

Breite: Breite des Inhalts (Breite) + Rand (links und rechts) + Abstand ((links und rechts) + Rand (links und rechts)

Höhe: Höhe des Inhalts (Höhe) + Rand (oben und unten) + Polsterung (oben und unten) + Rand (oben und unten)

Anwendung von Rändern: Zentrieren Sie die Box im Browser, in der Zentriermethode des übergeordneten Elements

margin:0 auto;

Neue Attribute von CSS3

box-sizing:border-box/content-box ignoriert die Werte von border und padding

Das Obige ist der Inhalt des fünften Tag der HTML5-Notizen, mehr Für verwandte Inhalte achten Sie bitte auf die chinesische PHP-Website (m.sbmmt.com)!