So verwenden Sie CSS für ein schnelles Layout – Layoutelemente im Detail

Um das Webseitenlayout schnell durchführen zu können, müssen Sie die Elemente des Layouts genau verstehen, damit Sie nicht immer Fehler im Detail machen. In diesem Artikel werden zunächst die Faktoren im Zusammenhang mit dem Layout als Grundlage des Layouts ausführlich erläutert: Elemente auf Blockebene und Inline-Elemente, Boxmodell, genaue Positionierung, Elementausrichtung und Stilvererbung. Der nächste Artikel konzentriert sich auf die Beschreibung schneller Layout-Ideen.

1. Was sind Elemente auf Blockebene und Inline-Elemente?

Anzeige: Block zeichnet sich durch Faltung aus Ja, im Allgemeinen kann es Elemente auf Blockebene und Inline-Elemente enthalten.

Ausnahme:

P-Elemente können nur Inline-Elemente enthalten, keine Elemente auf Blockebene.

Das Blockelement „Form“ ist eine Besonderheit. Es kann nur zur Aufnahme anderer Blockelemente verwendet werden.

2. Inline-Elemente:

display:inline zeigt keine Zeilenumbrüche an und kann nur Inline-Elemente enthalten.

Inline-Elemente wie „span“ haben keinen eigenen unabhängigen Raum. Sie sind von anderen Elementen auf Blockebene abhängig. Daher ist das Festlegen von Attributen wie Höhe, Breite sowie inneren und äußeren Rändern ungültig . Tatsächlich sind die Inline-Elemente, die Sie kennen müssen, span und ein

3. Das Floating-Element wird automatisch auf das „Block“-Element

gesetzt, unabhängig davon, ob dies der Fall ist Ist Block oder Inline, können Höhe und Breite definiert werden

Normalerweise kann die Höhe nicht definiert werden. Die Breite kann definiert werden, aber nur der Textteil

reagiert auf die Maus. Wenn float:left hinzugefügt wird, können Höhe und Breite definiert werden. Der gesamte Block reagiert auf die Maus Menü,

Set display:inline; diese Eigenschaft kann das berühmte IE-Problem mit doppelten schwebenden Rändern beheben. ↓(Es scheint, dass dieses Problem nur in IE6 besteht?)

http://www.zzzszy.com/a/2016/0927/896160.html

Blockelement (Blockelement)

Inline-Element (Inline-Element)

* Adresse – Adresse

* Blockquote – Blockzitat

块元素(block element)

内联元素(inline element)

* address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * p - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form- 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 * noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容） * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表

* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器，定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量

* Mitte – zentrierter Ausrichtungsblock * dir - Verzeichnisliste* p - Häufig verwendete Blockebene ist einfach und es ist auch das Haupt-Tag des CSS-Layouts* dl – Definitionsliste* fieldset – Formularkontrollgruppe* form- interaktives Formular* h1 - großer Titel* h2 – Untertitel * h3 – Titel der Ebene 3 * h4 – Titel der Ebene 4 * h5 – Titel der Ebene 5 * h6 – Titel der Stufe 6 * hr – Horizontale Trennlinie * isindex – Eingabeaufforderung* menu – Menüliste * noframes – Frames optionaler Inhalt, (dieser Blockinhalt wird für Browser angezeigt, die kein Frame unterstützen * noscript -) Optionaler Skriptinhalt (dieser Inhalt wird für Browser angezeigt, die kein Skript unterstützen) * ol – sortierte Form* p – Absatz* vorformatierter Text* Tabelle – Tabelle* ul – unsortierte Liste

* a – Anker* abbr – Abkürzung* Akronym – Initiale Wort* b – fett (nicht empfohlen) * bdo – bidi override* big – große Schriftart * br – Zeilenumbruch* cite – Referenz* code – Computercode (erforderlich beim Zitieren von Quellcode)* dfn – define Feld * em – Hervorhebung * Schriftart – Schriftarteinstellung (nicht empfohlen) * i – kursiv * img – Bild* input – Eingabefeld* kbd – Tastaturtext definieren * label – Tabellenbezeichnung * q – kurzes Zitat * s – Unterstrich (nicht empfohlen) * samp – Definitionsbeispiel-Computercode* select – Elementauswahl* small – kleiner Schrifttext* span – häufig verwendeter Inline-Container, der den inneren Textbereichsblock definiert * durchgestrichen – Bindestrich * stark – fett hervorgehoben * sub – tiefgestellt * sup – hochgestellt * textarea – mehrzeiliges Texteingabefeld* tt – Telextext* u – Unterstreichung

* var – Variablen definieren

4. Variable Elemente

Variable Elemente bestimmen basierend auf dem Kontext, ob das Element ein Blockelement oder ein Inline-Element ist. .

* Applet – Java-Applet

* Button – Button

* del – Text löschen

* iframe – Inline-Frame

* ins – eingefügter Text

* Karte – Bildblock (Karte)

* Objekt – Objekt Objekt

* Skript – Client-Skript

5, display: inline-block;

Behalten Sie die Breite und Höhe von Elementen auf Blockebene bei, sie können aber auch mit anderen Inline-Elementen wie Inline-Elementen kombiniert werden. Auf einer Zeile platzieren.

2. Box-Modell

3

Relative Positionierung: bezieht sich auf die Positionierung relativ zu anderen definierten Elementpositionen im Dokumentenfluss.

statisch (Standardwert): Wenn Sie den Standardwert verwenden, wird der für das Element in CSS definierte Top-, Left-, Right-, Bottom.z-Index nicht wirksam.

relativ: Relativ zum Element selbst bewegen.

Absolute Positionierung: löst sich vom normalen Dokumentenfluss und nimmt keinen Platz mehr ein.

absolut: Absolute Positionierung relativ zu einem übergeordneten Element, das nicht statisch ist. Wenn die Position des übergeordneten Elements nicht angegeben ist, erfolgt die absolute Positionierung relativ zum gesamten HTML-Dokument. Es wird zuerst in den im normalen Dokumentfluss positionierten Elementen und Float-Elementen angezeigt.

behoben: Relativ zum Browserfenster positioniert, bleibt das Element immer an einer bestimmten Position auf dem Bildschirm, egal wie die Webseite gescrollt wird.

Float: float

Aus Dokumentfluss – Position relativ zur Größe des übergeordneten Elements. Wenn die Breite des übergeordneten Elements 100 beträgt und die Breite der beiden untergeordneten Elemente jeweils 200 beträgt, wird es weiterhin als obere und untere Hierarchie anstelle von links und rechts angezeigt.

Äußeres Feld – wird in normalen Dokumentenfluss-Positionierungselementen zuerst angezeigt. Innere Box – schwächer als Elemente auf Blockebene, stärker als Inline-Elemente

Wichtiger Punkt! Die Anzeigebeziehung zwischen Positionierungselementen und Dokumentenfluss

1. Die Anzeigebeziehung zwischen internen und externen Boxen zwischen normalem Dokumentenfluss:

代码结构如下（粗略展示）<p>黄色块正方形
　　</p><p>红色块</p>　　<p>红色块</p><p>蓝色块正方形</p>

Die gelben und blauen sind die externen Dokumentenflüsse und die roten sind die beiden internen Dokumentenflüsse des gelben Blocks.

Die äußere Box ist ein externer Dokumentenfluss und die innere Box hat Sein eigener Dokumentenfluss stört sich nicht gegenseitig, aber der externe Dokumentenfluss (nicht sein eigenes übergeordnetes Element) wird zuerst über dem internen Dokumentenfluss angezeigt.

2. Die Beziehung zwischen internen Box-Floating-Elementen und internen Dokumentflusselementen:

• Inline-Elemente und Priorität von schwebenden Elementen:

Im normalen Dokumentenfluss belegen Elemente jeweils eine Zeile.

Wenn es jedoch auf ein schwebendes Element eingestellt ist, wird das Dokument flow Verknüpfte Elemente weichen schwebenden Elementen (das Ergebnis der Definition von vor

ist dasselbe). Wie folgt:

Es wird auch einen Textumbruch geben:

• Block-Level-Element- und Floating-Element-Priorität

Wann Wenn ein Element auf Blockebene vor einem schwebenden Element definiert wird, wird das schwebende Element danach umbrochen. Wenn das schwebende Element zuerst definiert wird, wird es vom Dokumentfluss getrennt und hat keinen Einfluss auf die Elemente auf Blockebene des normalen Dokumentflusses.

3. Die Beziehung zwischen den internen Box-Floating-Elementen und den internen Elementen des externen Dokumentenflusses:

Floating-Elemente decken die externen Dokumentflusselemente ab, tun dies jedoch nicht Raum einnehmen.

Der grüne Block und das Bild sind die internen Elemente des blauen Blocks. Es ist ersichtlich, dass die Blockebene Elemente werden gemäß dem normalen Dokumentfluss angezeigt. Das Inline-Element img weicht jedoch immer noch schwebenden Elementen, selbst wenn es sich um schwebende Elemente im externen Dokumentfluss handelt.

4. Prioritätsbeziehung zwischen absoluter Positionierung und Floating von Geschwisterelementen

Blauer Block Positionieren Sie das Element absolut für den gelben Innenblock und setzen Sie p vor den roten Block. Der rote Block ist ein Float-positioniertes Element und wird durch absolute abgedeckt.

5. Die Prioritätsbeziehung zwischen absoluten Positionierungs- und Dokumentenflusselementen und die Prioritätsbeziehung zwischen relativen Positionierungselementen

Absolute Positionierungsposition: absolut.

1, absolute Positionierung relativ zu einem übergeordneten Element durchführen, das nicht statisch ist. Wenn die Position des übergeordneten Elements nicht angegeben ist, führt absolute eine absolute Positionierung relativ zum gesamten HTML-Dokument durch.

2. Wenn topleftbottomright nicht festgelegt ist, stimmen seine oberen und linken Seiten mit der Position des ursprünglichen Dokumentflusses überein (d. h. es ist dasselbe, als ob die Position nicht festgelegt wäre), aber es wird so sein decken die überschüssigen internen Floating-Elemente des externen Dokumentenflusses ab.

Das Bild unten zeigt die Einstellungsposition des blauen Blocks: absolut;

(Hinweis: Der gelbe Block (enthält rote und grüne Unterelemente ) und Der blaue Block (der grüne Unterelemente enthält) ist ein Geschwisterelement)

Ändern Sie die Reihenfolge. Der blaue Block setzt zuerst p und Position auf absolut. Für den gelben Block ist keine Position festgelegt, was bedeutet, dass er standardmäßig statisch ist. Aufgrund der Trennung vom Dokumentenfluss werden absolute Elemente zuerst angezeigt.

Setzen Sie die Position des gelben Blocks auf relativ, und der gelbe Block deckt das Absolute ab positioniertes Element. Das heißt, wenn ein relativ positioniertes Element nach einem absolut positionierten Element positioniert wird, wird das relativ positionierte Element zuerst angezeigt.

Zusammenfassung:

1, normaler Dokumentenfluss, Priorität der externen Box Wird im inneren Feld des zuvor definierten Elements angezeigt (wird bei Überschreitung überschrieben). Elemente auf Blockebene und Inline-Elemente befinden sich nicht in derselben Zeile.

 

2. Bei internen und externen Dokumentenflüssen werden schwebende Elemente vom Dokumentenfluss getrennt und zuerst definierte Elemente werden entsprechend dem normalen Dokumentenfluss angezeigt (Platz für Block machen). Ebene, Inline ausquetschen), was sich nicht auf das Layout später definierter Elemente auswirkt, sich aber auf die Anzeige von Inline-Elementen im normalen Dokumentfluss auswirkt Elemente sind, sie werden nicht überschrieben) Unterhalb schwebender Elemente)

3. Absolut positionierte Elemente werden zuerst über schwebenden Elementen angezeigt.

 

4, absolut positionierte Elemente, die keinen bestimmten Wert festlegen, werden gemäß dem normalen Dokumentfluss angeordnet, werden jedoch vom Dokumentfluss getrennt und haben keinen Einfluss auf den später definierte Elemente.

5, wenn das Geschwisterelement auf position:relative gesetzt ist, wenn es vor dem absolut positionierten Element definiert wird, wird das absolut positionierte Element zuerst über dem relativ positionierten Element angezeigt.

Wenn es nach einem absolut positionierten Element definiert wird, hat das relativ positionierte Element Vorrang vor dem absolut positionierten Element.

4. So zentrieren Sie die Ausrichtung

Horizontale Zentrierung:

1. Implementierung Zentrierung von Inline-Elementen. Methode: Hinzufügen: text-align:center;

2. Um eine horizontale Zentrierung von Blockebenenelementen im Stil des Blockelements außerhalb des Inline-Elements zu erreichen.

Methode 1: margin:0 auto;

Hinweis: Wenn das Blockebenenelement ein direktes untergeordnetes Element des Körpers ist und die Breite nicht Wenn die Höhe nicht festgelegt ist und kein Inhalt in p vorhanden ist, wird die Höhe standardmäßig auf 0 gesetzt. Stellen Sie daher sicher, dass Sie die Breite und Höhe der Elemente auf Blockebene gleichzeitig festlegen, um den Effekt zu sehen. Diese Methode kann auch verwendet werden, wenn ein anderes p innerhalb eines p zentriert werden soll, da der Rand zu diesem Zeitpunkt relativ zu seinem übergeordneten Element ist.

　

　Methode 2: Verwenden Sie absolute Positionierung und negative Ränder.

　 Position:absolut; Hälfte der eigenen Breite

Vertikale Zentrierung

Vertikale Zentrierung von Inline-Elementen

　

Methode 1:

Zentrieren Sie die Schriftart vertikal und stellen Sie die Zeilenhöhe auf die Höhe des übergeordneten Elements ein. 　

Methode 2:

Stellen Sie den Abstand so ein, dass er vertikal zentriert wird.

Methode 3:

Legen Sie die Zeilenhöhe für das übergeordnete Element und die vertikale Ausrichtung: Mitte für das Inline-Element fest.

2. Vertikale Zentrierung von Elementen auf Blockebene.

　

Methode 1:

Verwenden Sie absolute Positionierung und negative Ränder. ​

Methode 2:

Fügen Sie display:flex;align-items:center; zum übergeordneten Element hinzu, um eine vertikale Zentrierung zu erreichen.

Horizontale und vertikale Zentrierung erreichen

Methode 1:

Absolute Positionierung und negative Ränder verwenden

Methode 2:

Verwenden Sie display: flex　　　Fügen Sie display: flex; align-items:center hinzu, um eine vertikale Zentrierung zu erreichen, und justify-content:center;, um eine horizontale Zentrierung

im Stil des übergeordneten Elements zu erreichen.

Methode 3:

Verwenden Sie auch display:flex.Setzen Sie display:flex im übergeordneten Element; set margin:auto im untergeordneten Element.

Methode 4: Verwenden Sie das CSS3-Attribut - Translate()-Transformationsfunktion Position: absolut; links: 50%; transformieren (-50%, -50%);

5. Informationen zur Stilvererbung

Boxmodellstile wie Breite und Höhe (Breite und Höhe) sind nicht vererbbar. , Rahmen (Rand), Rand (Rand), Polsterung (Padding) und Hintergrund usw.

vertikale Ausrichtung ist nicht vererbbar

vererbbare Attribute

Farbe

Cursor

Richtung

Schriftart

Buchstabenabstand

Zeilenhöhe

Liste- style

text-align

text-indent

text-shadow

text-transform

whitewhite-space

Wortumbruch

Wortabstand

Zeilenumbruch

Schreibmodus

Mehr zur Verwendung von CSS Schnelles Layout – Für detaillierte Layoutelemente beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!