Trois types de balises HTML5 : 1. Les éléments de niveau bloc, dont la valeur d'affichage est "block", se caractérisent par la possibilité de définir la largeur, la hauteur, les marges et le retour à la ligne automatique. 2. les éléments en ligne, dont la valeur d'affichage est ; "inline", Il ne s'enroulera pas automatiquement et la largeur et la hauteur ne peuvent pas être définies ; 3. Les éléments de bloc en ligne ne s'enrouleront pas automatiquement et la largeur et la hauteur peuvent être définies.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Classification des balises html5
les balises sont également appelées éléments
Selon les caractéristiques des balises, elles peuvent être divisées en : balises de bloc, balises en ligne (inline), balises de bloc en ligne
Selon règles de fermeture des balises , peuvent être divisées en : étiquette simple (étiquette vide, étiquette à fermeture automatique), étiquette double
Éléments de bloc couramment utilisés :
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及上下左右的margin、padding值都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
行内元素特点:display:inline
;
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置(只支持左右方向的margin、padding);
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
行内块状元素的特点:display:inline-block;
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。(支持上下左右的margin、padding值)
3、margin:0 auto无效
4、水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器解析会将其解析成一个空格。
标记类型的转换
标签的类型是可以转换的:
设置display:inline
转换为行内元素
设置display:linline-block
转换为行内块元素
设置display:block
1. mis à jour à partir du nouveau Commence une ligne et les éléments qui la suivent démarrent également une nouvelle ligne.
3. Lorsqu'elle n'est pas définie, la largeur d'un élément est 100 % de son conteneur parent (la même que la largeur de l'élément parent), sauf si une largeur est définie. Caractéristiques des éléments en ligne :
display:inline
🎜🎜🎜;🎜🎜🎜🎜1, et les autres éléments sont sur la même ligne 🎜🎜2. Hauteur🎜, Largeur🎜 et marges supérieure et inférieure🎜 ne peuvent pas être définis🎜🎜 ( uniquement la marge et le remplissage pris en charge dans les directions gauche et droite) ; 🎜🎜3. La largeur d'un élément est la largeur du texte ou de l'image qu'il contient et ne peut pas être modifiée. 🎜🎜🎜🎜Caractéristiques des éléments de bloc en ligne : display:inline-block;
🎜🎜🎜🎜1, et les autres éléments sont sur la même ligne ; 🎜🎜2, 🎜La hauteur, la largeur, la hauteur de ligne ainsi que les marges supérieure et inférieure de l'élément peuvent être définies. 🎜🎜 (Prend en charge les valeurs de marge et de remplissagehaut, bas, gauche et droite) 🎜🎜3. Marge : 0 auto n'est pas valide 🎜🎜4. Organisez horizontalement, mais tous les éléments auront un espace de 1 espace par défaut. comme il y a un écart entre les éléments lors de l'écriture dans le saut de ligne HTML Cart, l'analyse du navigateur l'analysera dans un espace. 🎜🎜🎜🎜 Conversion du type de balise 🎜🎜🎜🎜Le type de balise peut être converti : 🎜🎜🎜🎜Définissez display:inline
pour convertir en éléments en ligne 🎜🎜🎜🎜Définissez display:linline - block
Convertir en élément de bloc en ligne 🎜🎜🎜🎜 Définissez display:block
pour convertir en élément de niveau bloc 🎜🎜🎜🎜 (Partage vidéo d'apprentissage : 🎜tutoriel vidéo HTML🎜, 🎜front web -fin🎜 )🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!