Les balises
html5 sont divisées en 3 catégories : 1. Les éléments au niveau du bloc, qui se caractérisent par la possibilité de définir la largeur et la hauteur, le retour à la ligne automatique, et les marges et le remplissage supérieur, inférieur, gauche et droit sont valables pour eux. 2. Les éléments en ligne, qui se caractérisent par le fait que la largeur et la hauteur ne peuvent pas être définies, ne seront pas automatiquement renvoyés à la ligne. 3. Les éléments de bloc en ligne, qui se caractérisent par la possibilité de définir la largeur et la hauteur, ne seront pas automatiquement renvoyés à la ligne.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
Les marques en HTML5 sont divisées en éléments de niveau bloc, éléments en ligne et éléments de bloc en ligne.
Éléments en ligne :
La largeur et la hauteur ne peuvent pas être définies.
Les marges haut et bas ne sont pas valides, seules la gauche et la droite sont efficaces ; le rembourrage est efficace et agrandira l'espace.
box-sizing:border-box;
n'est pas valide car cet attribut est spécifique au modèle de boîte. 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
Éléments au niveau du bloc :
peut définir la largeur et la hauteur Les marges et le remplissage supérieur, inférieur, gauche et droit sont valables pour cela
peut automatiquement envelopper
Plusieurs balises d'éléments de bloc sont écrites ensemble et la disposition par défaut est de haut en bas Vous pouvez utiliser
margin:0 auto
pour centrer
Éléments de bloc en ligne :
Pas de retour à la ligne automatique Peut définir la largeur et la hauteur La disposition par défaut est de gauche à droite Vous pouvez utilisertext-align:center
pour rendre le contenu relatif à la boîte parent Pour l'alignement central horizontal, tel que les balises img, vous pouvez utiliser text-align:center
pour centrer l'alignement par rapport au la boîte parent
margin:0 auto
n'est pas valide
organiser horizontalement, cependant, tous les éléments auront un espace de 1 espace par défaut, car il y a un retour chariot et un saut de ligne entre éléments en HTML, et le navigateur les analysera dans un espace.
Mais le type d'étiquette peut être converti
display:inline
: Convertir en élément en ligne
display:linline-block
Conversion Convertissez les éléments de bloc en ligne
display:block
en éléments de niveau bloc
Catégories d'éléments principaux. Classez maintenant les balises apprises comme suit :
1. Éléments au niveau du bloc
Titre