CSS-Box-Modell

22.10.2016

Kapitel 6 von „CSS Beginner's Classic“

1. Jedes HTML-Element entspricht einem Anzeigefeld, aber nicht alle Elemente werden auf dem Bildschirm angezeigt.

2. Die tatsächliche Art und Weise, wie HTML-Elemente als CSS-Anzeigefelder angezeigt werden, wird als „visuelle Formatierungsmethode“ bezeichnet. Durch die visuelle Formatierung wird dem Browser mitgeteilt, wie HTML-Inhalte auf dem Bildschirm angezeigt werden sollen.

3. Elementtyp:

(1) Blockelement (Block): beginnt und endet mit einer neuen Zeile.

, ,
usw.

(2) Inline-Element (inline): Es belegt keine exklusive Zeile, sondern wird in den Textfluss eingebunden. , , , usw.

4.Anzeigeattribut

Sie können den Elementtyp ändern, indem Sie den Anzeigeattributwert festlegen

display:none;nicht anzeigen

display:block; auf Blockelement setzen

display:inline; auf Inline-Element setzen

5. Anonyme Box

Wenn ein Tag gemischte Inhalte wie Text und einige HTML-Tags enthält, wird eine Box ohne HTML-Tags generiert, die als anonyme Box bezeichnet wird. Eine anonyme Box hat den gleichen Stil wie die enthaltende Box.

zB.

Hello World!

Wie auf dem Bild zu sehen ist: Der Text Hello ist eine anonyme Box.

6. In HTML ist das -Tag als display:none; definiert. Daher können wir den Inhalt des -Tags nicht sehen.

7. Attribute der Box anzeigen

Marge: Marge

Grenze: Grenze

Polsterung: Polsterung

(1) Rand: der Abstand zwischen zwei Boxen. Die Ränder sind immer transparent.

Hinweis: Überlappende Ränder, also zwei vertikale Kästchen, verwenden den Maximalwert zwischen den beiden Elementen für ihren vertikalen Abstand. Ränder überlappen nur bei Blockelementen, und zwar vertikal, nicht horizontal.

(2) Rand:

Rahmenattributeinstellungen: selector { border: size style color;🎜>

Rahmenbreite

border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。

Gibt die Breite des Rahmens an.

thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

Randstil

Gibt den Stil des Rahmens an.

Rahmenfarbe

Gibt die Farbe des Rahmens an.

erben

Gibt an, dass die Rahmenattributeinstellung vom übergeordneten Element geerbt werden soll.

Breite:

dünn	Definieren Sie einen dünnen Rand.
mittel	Standard. Definieren Sie einen mittleren Rand.
dick	Definieren Sie einen dicken Rand.
Länge	Ermöglicht Ihnen, die Breite des Rahmens anzupassen.
erben	gibt an, dass die Rahmenbreite vom übergeordneten Element geerbt werden soll.

Stil:

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

keine

Definieren Sie keinen Rahmen.

versteckt

Gleiches wie „none“. Außer bei Anwendung auf Tabellen, bei denen „hidden“ zur Lösung von Randkonflikten verwendet wird.

gepunktet

Definieren Sie einen gepunkteten Rahmen. Wird in den meisten Browsern als durchgezogene Linie dargestellt.

gestrichelt

Definieren Sie gestrichelte Linien. Wird in den meisten Browsern als durchgezogene Linie dargestellt.

solid

Definieren Sie eine durchgezogene Linie.

doppelt

Definieren Sie Doppellinien. Die Breite der Doppellinie entspricht dem Wert von border-width.

Groove

Definieren Sie den 3D-Rillenrand. Der Effekt hängt vom Wert von border-color ab.

Kamm

Definieren Sie den 3D-Kammrand. Der Effekt hängt vom Wert von border-color ab.

Einsatz

Definieren Sie den 3D-Einsatzrahmen. Der Effekt hängt vom Wert von border-color ab.

Anfang

Definieren Sie den 3D-Ausgangsrahmen. Der Effekt hängt vom Wert von border-color ab.

erben

Gibt an, dass der Rahmenstil vom übergeordneten Element geerbt werden soll.

Beschreibung Der am wenigsten vorhersehbare Rahmenstil ist doppelt. Sie ist definiert als die Breite von zwei Linien plus dem Abstand zwischen den beiden Linien, der dem Wert für die Rahmenbreite entspricht. Allerdings sagt die CSS-Spezifikation nicht aus, ob eine der Linien dicker als die andere ist oder ob beide Linien gleich dick sein sollen, noch ob der Abstand zwischen den Linien dicker als die Linie sein soll. All dies wird vom User Agent entschieden und die Kreativen haben keinen Einfluss auf diese Entscheidung. (W3School) (3) Polsterung: der Raum um den Inhalt. Die Polsterung hat immer die gleiche Farbe wie der Hintergrund des Inhalts selbst. Hinweis: (1) Tabellenzelle ist weder ein Inline-Element noch ein Blockelement. Der Anzeigewert der Tabellenzelle ist display:table-cell. Tabellenzellenelemente dürfen keine Ränder haben. (2) Zeilenlänge em: In CSS wird eine Zeilenlänge als Maß definiert, das der Positionsgröße entspricht, also einem Quadrat mit einer Höhe und Breite, die der Höhe der Schriftart entsprechen.