CSS-Floating-Schreibmethode
In diesem Kapitel werden hauptsächlich die häufig verwendeten Methoden zum Positionieren und Schweben beschrieben.
1. Floating
Apropos Floating: Wir müssen zunächst über Standard-Streams und Floating-Streams sprechen.
1. Standard-Stream
Standard-Stream ist sehr verbreitet und die Standardmethode von Browsern ist Standard-Stream.
Wie versteht man den Standard-Stream?
Zur Implementierung müssen wir die drei Elementklassifizierungen in CSS kennen.
Inline-Elemente, Block-Level-Elemente, Inline-Block-Level-Elemente
| 行内元素 | 块级元素 | 行内块级元素 |
|---|---|---|
| 不独占一行 | 独占一行 | 不独占一行 |
| 默认和内容一样宽 | 默认和父元素一样宽 | 默认和内容 |
| 不可以设置宽高 | 可以设置宽高 | 可以设置宽高 |
Es wird zwischen ungefähr drei Arten von Elementen unterschieden.
Fügen Sie hier einen weiteren Wissenspunkt ein:
In HTML werden Elemente (Tags) normalerweise in zwei Kategorien unterteilt:
| 容器级标签 | 文本级标签 |
|---|---|
| p h ul ol li dt等 | span/p/em/ins等 |
| 可以嵌套其他的所有标签 | 只可以嵌套文字/图片/超链接 |
Jetzt können wir über den Standardfluss sprechen:
Da Es gibt zwei Layoutmethoden im Standardfluss, und Inline-Elemente und Inline-Blockebene sind horizontal. Folgen Sie diesem
Floating-Fluss
Floating-Attribute.
| clear | 清除 | float | 浮动 |
|---|---|---|---|
| left/right | 左/右不允许浮动 | left/right | 左浮动/右浮动 |
| both/none | 均不可/不清除 | none | 不浮动 |
Beim Floating sind einige Dinge zu beachten:
Floating bezieht sich darauf, wie das Element nach dem Festlegen des Floats um es herum schwebt! ! !
Recht bedeutet beispielsweise, dass die folgenden Elemente links von ihm angeordnet werden! ! !
Der schwebende Fluss unterscheidet nicht zwischen Elementen. Er kann nur horizontal ohne Zentrierung (Mitte) eingegeben werden, und die Breite und Höhe von „margin: 0 auto“ kann nicht verwendet werden.
| 特点 |
|---|
| 前一个浮动后面一个没有，那么前面一个会盖住后面一个（文字不会盖住，会环绕在周围），这里可以试着去想想都浮动的排列景象。 |
| 先浮动的会在前面，后浮动的会在后面 |
| 浮动之后的位置由浮动之前在标准流中的位置来确定，这里主要是理解为浮动后什么元素会受影响 |
| 左浮动会去找左浮动，右浮动会跟在右浮动后面 |
| 当父元素宽度可以显示所有浮动时，并排显示 |
| 浮动的贴靠主要是指当父元素宽度不够时会往前靠，怎么理解呢，就是假如你一个窗口放了很多图片把窗口宽度缩小时图片会自动往下排的现象 |
Das obige ist der detaillierte Inhalt vonCSS-Floating-Schreibmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
So überprüfen Sie das Bootstrap -Datum
Apr 07, 2025 pm 03:06 PM
Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.
So setzen Sie die Bootstrap -Navigationsleiste
Apr 07, 2025 pm 01:51 PM
Bootstrap bietet eine einfache Anleitung zum Einrichten von Navigationsleisten: Einführung der Bootstrap -Bibliothek zum Erstellen von Navigationsleistencontainern Fügen Sie Markenidentität hinzu. Erstellen Sie Navigationslinks. Hinzufügen anderer Elemente (optional) Anpassungsstile (optional).
