span n'est pas un élément de bloc, mais un élément en ligne (élément en ligne), qui peut combiner des éléments en ligne dans le document. span définit uniquement le contenu dans son ensemble et l'exploite sans affecter la mise en page et l'affichage. De plus, span n'a pas de fonctionnalités pratiques. Sa fonction est d'entourer d'autres éléments dans le code HTML et de spécifier des styles pour eux.
(Tutoriel recommandé : tutoriel HTML)
span n'est pas un élément de bloc, mais un élément en ligne (inline element ), principalement utilisé pour accueillir du texte. span est utilisé pour combiner des éléments en ligne dans le document.
span définit uniquement le contenu dans son ensemble et l'exploite sans affecter la mise en page et l'affichage. De plus, span n'a pas de fonctionnalités pratiques. Sa fonction est d'entourer d'autres éléments dans le code HTML et de spécifier des styles pour eux. La balise
n'a pas de format fixe. Cela ne change visuellement que lorsque vous lui appliquez un style. Si vous n'appliquez pas de styles à , le texte de l'élément ne sera pas visuellement différent des autres textes. La balise
permet d'isoler une partie de texte ou une partie d'un document.
Exemple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p> </body> </html>
Rendu :
Élément bloc, élément en ligne, élément en ligne Bloc éléments : les éléments
sont des balises. Il existe trois balises couramment utilisées dans la mise en page, les éléments de bloc, les éléments en ligne et les éléments de bloc en ligne. Ce n'est qu'en comprenant les caractéristiques de ces trois éléments que vous pourrez maîtriser la page. mise en page.
1. Éléments de bloc :
Les éléments de bloc peuvent également être appelés éléments de ligne. Les balises couramment utilisées dans la mise en page, telles que : div, p, ul, li, h1-h6, etc. Élément bloc, son comportement dans la mise en page :
(1) Prend en charge tous les styles
(2) Si la largeur n'est pas définie, la largeur par défaut est 100 % de la largeur parent
(3) La case occupe une ligne, même si la largeur est définie
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style type="text/css">
.box{
background-color: gold;
/*width:300px;*/
/*height:200px;*/
}
.box2{
background-color: green;
/*width:300px;*/
/*height:200px;*/
}
</style>
</head>
<body>
<div>div元素</div>
<p>p元素</p
</body>
</html>Effet d'affichage de la page :
2. À l'intérieur des éléments en ligne :
Les éléments en ligne peuvent également être appelés éléments en ligne. Les balises couramment utilisées dans la mise en page, telles que : a, span, em, b, strong, i, etc. sont tous des éléments en ligne. Ils sont utilisés dans le comportement de mise en page dans :
(1) Prend en charge certains styles (largeur, hauteur, marge supérieure et inférieure, le remplissage supérieur et inférieur ne sont pas pris en charge)
(2) Largeur et hauteur sont déterminés par le contenu
( 3) Les cases sont combinées en une seule ligne
(4) Le code se casse, et il y aura un espace entre les cases
(5 ) L'élément enfant est un élément en ligne et l'élément parent peut utiliser l'attribut text-align pour définir les éléments enfants se faisant face horizontalement
Méthodes pour résoudre l'écart entre les éléments en ligne :
(1) Supprimez les sauts de ligne entre les éléments en ligne
(2) Changez le parent de l'élément en ligne. Le niveau font-size est défini sur 0 et l'élément en ligne lui-même définit la taille de la police
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联元素</title>
<style type="text/css">
.box{
width:500px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
font-size:0; /* 解决内联元素间隙 */
}
.box div{
width:100px;
height:100px;
margin:10px;
background-color:gold;
}
.box a{
background-color:gold;
/*
width:300px;
height:200px;
设置宽高完全不起作用 */
/*
margin:100px 20px;
没有上下的边距，只有左右的边距 */
/*padding:10px 10px;*/
/* padding的上下不应该起作用的，却出现了bug */
font-size:16px;/* 解决内联元素间距 */
}
.box2{
width:500px;
height:100px;
border:1px solid #000;
margin:50px auto 0;
text-align:center;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<a href="#">链接文字一</a><a href="#">链接文字二</a> /* 取消间隙 */
<a href="#">链接文字三</a>
<a href="#">链接文字四</a>
<a href="#">链接文字五</a>
</div>
<div>
<a href="#">链接文字</a>
</div>
</body>
</html>3. Élément de bloc en ligne :
Élément de bloc en ligne, également appelé éléments de bloc en ligne, il s'agit d'un nouveau type d'élément. Les éléments existants n'entrent pas dans cette catégorie. Les éléments d'entrée se comportent comme cet élément, mais ils sont également classés comme éléments en ligne. Nous pouvons utiliser l'attribut display pour bloquer les éléments ou les éléments en ligne sont convertis en de tels éléments. Leur comportement dans la mise en page :
(1) Prend en charge tous les styles
(2) Si la largeur et la hauteur ne sont pas définies, la largeur et la hauteur sont déterminées par le contenu
(3) Box Together
(4) Le code se casse et la boîte produira un espacement
(5) L'élément enfant est un élément de bloc en ligne et l'élément parent peut utiliser le texte Attribut -align pour définir l'alignement horizontal de l'élément enfant.
Ces trois éléments peuvent être convertis les uns dans les autres via l'attribut display. Cependant, dans le développement réel, les éléments de bloc sont utilisés plus souvent, nous convertissons donc souvent les éléments en ligne en éléments de bloc, et une petite quantité en éléments en ligne. . Lorsque vous souhaitez utiliser des éléments en ligne, utilisez les éléments en ligne directement au lieu de convertir les éléments de bloc.
Pour plus de connaissances liées à la programmation, veuillez visiter : Site Web d'apprentissage en programmation ! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
