Maison > interface Web > tutoriel CSS > le corps du texte

Quelles valeurs l'affichage a-t-il ?

百草
Libérer: 2023-11-20 17:28:15
original
2663 Les gens l'ont consulté
<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>Quelles valeurs l'affichage a-t-il ?

<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属性值:

<p>1、block:将元素渲染为块级元素。块级元素在页面上形成一个块,并且独占一行。例如,<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-incompactmarkeretc 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!