Maison >interface Web >tutoriel HTML >Comment utiliser correctement les éléments de niveau bloc et les éléments en ligne pour obtenir des effets de mise en page Web
Comment utiliser correctement les éléments de niveau bloc et les éléments en ligne pour obtenir des effets de mise en page Web
- WBOYoriginal
- 2024-01-07 08:10:56629parcourir
Comment utiliser correctement les éléments de niveau bloc et les éléments en ligne pour obtenir des effets de mise en page de page Web
Lors de la mise en page de pages Web, nous utilisons souvent des éléments de niveau bloc et des éléments en ligne. Les éléments de niveau bloc et les éléments en ligne sont deux types d'éléments de base en HTML et jouent des rôles différents dans la mise en page des pages Web. Cet article présentera en détail comment utiliser correctement les éléments de niveau bloc et les éléments en ligne pour obtenir des effets de mise en page Web, et fournira des exemples de code spécifiques.
1. Caractéristiques et scénarios d'application des éléments de niveau bloc
Les éléments de niveau bloc ont les caractéristiques suivantes :
- Chaque élément de niveau bloc occupera sa propre ligne, c'est-à-dire qu'il s'enroulera automatiquement.
- La largeur des éléments au niveau du bloc est par défaut de 100 % de l'élément parent, et la largeur peut être personnalisée en définissant l'attribut width.
- Les éléments au niveau du bloc peuvent définir divers attributs du modèle de boîte, tels que la marge, le remplissage, etc.
- Les éléments de niveau bloc peuvent imbriquer d'autres éléments de niveau bloc et des éléments en ligne.
Les scénarios d'application courants des éléments de niveau bloc incluent :
- Structure de base de la mise en page : en-tête, navigation, section, article, côté, pied de page, etc.
- Blocs de texte : p, h1~h6, div, etc.
- Liste : ul, ol, etc.
- Tableaux : table, tr, td, etc.
Ce qui suit est un exemple de code qui utilise des éléments de niveau bloc pour implémenter la mise en page de page Web :
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 600px;
margin: 0 auto;
}
.header {
background-color: #f1f1f1;
height: 100px;
}
.sidebar {
background-color: #d3d3d3;
float: left;
width: 200px;
height: 400px;
}
.content {
background-color: #ffffff;
float: right;
width: 400px;
height: 400px;
}
.footer {
background-color: #f1f1f1;
clear: both;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="content">内容区域</div>
<div class="footer">底部</div>
</div>
</body>
</html>Dans le code ci-dessus, le conteneur est un élément de niveau bloc, utilisé pour contenir l'intégralité du contenu de la page. L'en-tête, la barre latérale, le contenu et le pied de page définissent respectivement l'en-tête, la barre latérale, la zone de contenu et le bas de la page Web. Ce sont également des éléments de niveau bloc. En définissant des attributs tels que la largeur et le flotteur, la mise en page de base de la page est obtenue.
2. Caractéristiques et scénarios d'application des éléments en ligne
Les éléments en ligne ont les caractéristiques suivantes :
- Les éléments en ligne n'occuperont pas une seule ligne, c'est-à-dire qu'ils peuvent être affichés sur la même ligne que les autres éléments.
- La largeur d'un élément en ligne est déterminée par son contenu, et la largeur et la hauteur ne peuvent pas être définies.
- Les attributs du modèle de boîte des éléments en ligne, tels que la marge, le remplissage, etc., ne sont pas valides dans le sens vertical.
- Les éléments en ligne ne peuvent pas imbriquer des éléments au niveau du bloc, mais ils peuvent imbriquer d'autres éléments en ligne.
Les scénarios d'application courants pour les éléments en ligne incluent :
- Texte : span, a, em, strong, etc.
- Photo : img.
- Éléments de formulaire : saisie, bouton, etc.
Ce qui suit est un exemple de code qui utilise des éléments en ligne pour implémenter la mise en page de pages Web :
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
}
.container {
display: inline-block;
border: 1px solid #000000;
padding: 20px;
}
.button {
background-color: #f1f1f1;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<p>这是一个居中的段落。</p>
<div class="container">
<h3>标题</h3>
<p>内容</p>
<a href="#" class="button">按钮</a>
</div>
</body>
</html>Dans le code ci-dessus, p est un élément en ligne et son texte est centré en définissant l'attribut text-align sur center. Le conteneur est un élément de niveau bloc en ligne. Il utilise l'attribut display:inline-block, qui peut être affiché sur la même ligne et peut définir des attributs tels que la largeur, la hauteur et la bordure. Le bouton est un élément en ligne en définissant des propriétés telles que le remplissage, la couleur d'arrière-plan et les coins arrondis, le style du bouton est implémenté.
Résumé :
Les éléments au niveau du bloc et les éléments en ligne jouent un rôle important dans la mise en page des pages Web. L'utilisation correcte des éléments de niveau bloc et des éléments en ligne peut nous aider à obtenir divers effets de mise en page de page Web. Grâce à des exemples de code spécifiques, nous pouvons mieux comprendre et maîtriser comment utiliser les éléments de niveau bloc et les éléments en ligne pour la mise en page des pages Web. J'espère que cet article pourra être utile aux lecteurs.
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!
Articles Liés
Voir plus- Explication détaillée des différences entre les éléments en ligne, les éléments de niveau bloc et les éléments vides
- Résumer trois méthodes de conversion d'éléments en ligne en éléments de niveau bloc
- Connaissance de base de la mise en page Web CSS (résumé)
- Comment l'attribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?
- Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?