HTML5-Tags sind in 3 Kategorien unterteilt: 1. Elemente auf Blockebene, die sich dadurch auszeichnen, dass Breite und Höhe eingestellt werden können, automatischer Zeilenumbruch sowie oberer, unterer, linker und rechter Rand und Abstand für sie gelten 2. Inline-Elemente, die sich dadurch auszeichnen, dass die Breite und Höhe nicht festgelegt werden können, werden nicht automatisch umbrochen. 3. Inline-Blockelemente, die sich dadurch auszeichnen, dass sie die Breite und Höhe festlegen können und nicht automatisch umgebrochen werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
Marken in HTML5 sind in Elemente auf Blockebene, Inline-Elemente und Inline-Blockelemente unterteilt.
Inline-Elemente:
Breite und Höhe können nicht festgelegt werden.
Der Rand nach oben und unten ist ungültig, nur links und rechts sind wirksam; die Polsterung ist wirksam und vergrößert den Raum.
box-sizing:border-box;
ist ungültig, da dieses Attribut spezifisch für das Boxmodell ist. box-sizing:border-box;
无效,因为该属性针对盒模型。
不会自动换行
块级元素:
能够设置宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起,默认排列方式为从上至下
可以使用margin:0 auto
居中对齐
行内块元素:
不会自动换行
能够设置宽高
默认排列方式为从左到右
可以使用text-align:center
使内容相对于父盒子水平居中对齐,例如img标签,可以使用text-align:center
相对父盒子居中对齐
margin:0 auto
无效
水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器解析会将其解析成一个空格。
但标签的类型是可以转换的
display:inline
: 转换为行内元素
display:linline-block
转换为行内块元素
display:block
Elemente auf Blockebene:
kann die Breite und Höhe festlegen Der obere, untere, linke und rechte Rand und die Polsterung sind dafür gültig
kann automatisch umbrochen werden
Mehrere Blockelement-Tags werden zusammengeschrieben, und die Standardanordnung ist von oben nach unten Sie können
margin:0 auto
verwenden, um die Mitte auszurichten
Inline-Blockelemente:
Kein automatischer Zeilenumbruch Breite und Höhe können eingestellt werden Die Standardanordnung ist von links nach rechts Sie könnentext-align:center
, um den Inhalt relativ zum übergeordneten Feld auszurichten. Für eine horizontale zentrierte Ausrichtung, wie z. B. img-Tags, können Sie text-align:center
verwenden, um den Inhalt relativ zum übergeordneten Feld auszurichten übergeordnete Box
margin:0 auto
ist ungültig
horizontal anordnen, Allerdings haben alle Elemente standardmäßig eine Lücke von 1 Leerzeichen, da dazwischen ein Wagenrücklauf und ein Zeilenvorschub vorhanden sind Elemente in HTML, und der Browser analysiert sie in einem Leerzeichen.
Aber der Etikettentyp kann konvertiert werden
display:inline
: In Inline-Element konvertieren
display:linline-block
Konvertierung Konvertieren Sie Inline-Blockelemente
display:block
in Elemente auf Blockebene
Master-Elementkategorien. Klassifizieren Sie nun die gelernten Tags wie folgt:
1. Elemente auf Blockebene
TitleAbsatz-Tag < ; / p