Maison >interface Web >tutoriel CSS >Quelles valeurs l'affichage a-t-il ?
<p>Les valeurs d'affichage incluent block, inline, none, inline-block, flex, grid, table, inline-table et list-item, etc. Introduction détaillée : 1. block, qui transforme les éléments en éléments de niveau bloc. Les éléments de niveau bloc forment un bloc sur la page et occupent une seule ligne ; 2. inline, qui transforme les éléments en éléments en ligne. Les éléments en ligne n'occuperont pas une ligne par eux-mêmes et peuvent être côte à côte avec d'autres éléments ; 3. none, cette valeur précise que l'élément ne sera pas sur la page, etc.<p> <p>Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.
En CSS, display
l'attribut est utilisé pour déterminer le type d'affichage de l'élément. Il peut avoir de nombreuses valeurs différentes, voici quelques-unes des principales : none ; font-family : SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace : 0px 2px ; taille de l'onglet : 4 ; couleur d'arrière-plan : rgba(27, 31, 35, 0.05); border-radius : 3px;">display valeur de l'attribut : display
属性用于确定元素的显示类型。它可以有多种不同的值,以下是一些主要的display
属性值:
<div>
、<p>
、<h1>
-<h6>
以及<li>
1. block : affiche l'élément en tant qu'élément de niveau bloc. Les éléments de niveau bloc forment un bloc sur la page et occupent sa propre ligne. Par exemple, <div>
, <p>
, <h1>
-<h6>
et <li>
, etc. sont tous des éléments de niveau bloc par défaut. 🎜<p>2. inline : rendre les éléments en tant qu'éléments en ligne. Les éléments en ligne n'occupent pas une ligne par eux-mêmes et peuvent être placés à côté d'autres éléments. Par exemple, <span>
, <a>
, etc. sont tous des éléments en ligne par défaut. <span>
、<a>
等都是默认的内联元素。
<p>3、none:此值指定元素不会在页面上显示。它与visibility: hidden
不同,因为使用visibility: hidden
的元素仍然会占据页面空间,而使用display: none
<p>3. none : Cette valeur précise que l'élément ne sera pas affiché sur la page. C'est la même chose que visibilité : cachée
est différent car visibilité : les éléments cachés
occuperont toujours l'espace de la page et utiliseront display: none
les éléments sont complètement supprimés de la mise en page.
<p>4. inline-block : rendre les éléments sous forme d'éléments de niveau bloc en ligne. La caractéristique des éléments de niveau bloc en ligne est qu'ils sont placés côte à côte comme les éléments en ligne, mais peuvent définir la largeur et la hauteur et avoir leurs propres dimensions comme les éléments de niveau bloc. 🎜5. flex🎜 : Rendu des éléments sous forme de modèles de boîtes flexibles. Le modèle flexbox est une technique de mise en page CSS permettant de disposer, d'aligner et de distribuer l'espace dans un espace unidimensionnel (lignes ou colonnes). 🎜<p>6. grille : rendre les éléments dans des conteneurs de grille. Les conteneurs en grille disposent, alignent et distribuent l'espace dans deux dimensions (lignes et colonnes).
<p>7. table : Rendre les éléments dans des tableaux. Cette valeur était principalement utilisée pour afficher des données tabulaires, mais n'est plus couramment utilisée car la technologie CSS moderne offre des méthodes de mise en page plus flexibles.
<p>8. inline-table : Afficher les éléments sous forme de tableaux en ligne. Un tableau en ligne est similaire à un élément de niveau bloc en ligne, mais présente les caractéristiques d'un tableau, telles que les marges et le remplissage entre les cellules.
<p>9. list-item : Afficher les éléments sous forme d'éléments de liste. Lorsque vous utilisez cette valeur, l'élément apparaît comme un élément dans la liste, avec des puces ou une numérotation par défaut.
En plus des majeurs display
属性值,还有一些其他的取值,如 run-in
、compact
、marker
etc ci-dessus, mais dans le développement Web moderne, l'utilisation de ces valeurs n'est pas courante. Dans la plupart des cas, l'utilisation des valeurs principales mentionnées ci-dessus satisfera la plupart des besoins de mise en page.
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!