CSS-Box-Modell-HTML-Tutorial-php.cn

CSS-Box-Modell

WBOY

Freigeben： 2016-10-23 00:00:09

Original

1289 Leute haben es durchsucht

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.

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.

CSS-Box-Modell

Hello World!