Einführung in das Layout von HTML-Elementen, Inline-Elementen und Elementen auf Blockebene

高洛峰
Freigeben: 2017-03-20 17:03:50
Original
1465 Leute haben es durchsucht

HTML-Element-Layout-Anzeige

Standardanzeige (Breite- und Höhenattribute werden nicht hinzugefügt)

①HTML-Elemente werden im Browser wie folgt angezeigt: von oben nach unten, von links nach rechts .

②Inline-Elemente werden entsprechend der Breite des Browsers und seiner eigenen Breite gefüllt. Wenn in der aktuellen Zeile nicht mehr genügend Leerraum vorhanden ist, wird zur nächsten Zeile gewechselt.

③Elemente auf Blockebene zeigen den ungefähren Bereich entsprechend der Anzeigemethode von Inline-Elementen an. Wenn die Breite des Browsers abnimmt, wird der Wert des Höhenattributs von Elementen auf Blockebene automatisch erweitert, um der Anzeige gerecht zu werden von Inline-Elementen

Seite anzeigen

Einführung in das Layout von HTML-Elementen, Inline-Elementen und Elementen auf Blockebene

Anzeige des Breitenattributs hinzugefügt

Blockebenenelement (div) Breitenattribut hinzugefügt

Einführung in das Layout von HTML-Elementen, Inline-Elementen und Elementen auf Blockebene

Fazit

① Wenn das Breitenattribut für Elemente auf Blockebene nicht festgelegt ist, wird durch Änderungen der Browserbreite das Layout der im Blockelement eingebetteten Elemente komprimiert.

②Wenn Sie das Breitenattribut eines Blockebenenelements festlegen, wirken sich Änderungen am Breitenattributwert des Browsers nicht auf das Layout der Inline-Elemente im Blockebeneelement aus. Sie (eingebettete Elemente) sind davon betroffen durch den Einfluss des übergeordneten Elements auf Blockebene.

Anwendungsbereich: Navigationsleiste (in der Navigationsleiste gibt es mehrere a-Tags, die in einem Div platziert werden können, und das Breitenattribut wird an das Div angehängt, um zu verhindern, dass der Browser kleiner wird und die Navigation verursacht Layout soll durcheinander gebracht werden);


Das obige ist der detaillierte Inhalt vonEinführung in das Layout von HTML-Elementen, Inline-Elementen und Elementen auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage