Comment utiliser l'affichage en CSS
Les valeurs d'attribut d'affichage couramment utilisées sont le bloc au niveau du bloc, le bloc en ligne au niveau de la ligne, le bloc en ligne au niveau du bloc de ligne et aucun, et le niveau de la ligne ou du bloc. les étiquettes de niveau peuvent être converties via display
Cet article partagera l'attribut display en CSS, qui a une certaine valeur de référence, j'espère qu'il sera utile à tout le monde
Nous utilisons généralement les valeurs. block, none, inline et inline dans l'attribut display lors de la création de mises en page CSS -block Nous allons donc aujourd'hui apprendre à les utiliser
attribut display
. L'attribut display peut avoir plusieurs valeurs, mais celles couramment utilisées sont les suivantes
aucun : cet élément ne sera pas affiché.
block : Cet élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après cet élément.
inline : cet élément sera affiché comme un élément en ligne, sans saut de ligne avant et après l'élément.
inline-block : élément de bloc en ligne, qui possède à la fois des attributs au niveau du bloc et des attributs au niveau de la ligne.
Donc, dans cet article, je présenterai en détail block, inline, inline-block et none Ces valeurs d'attribut couramment utilisées
display: block.
Caractéristiques : occupe une ligne seule, la largeur et la hauteur peuvent être modifiées via CSS
Éléments de niveau bloc couramment utilisés : div, p, ul, li, ol, formulaire, adresse
affichage : en ligne
Caractéristiques : le contenu détermine la taille, la largeur et la hauteur ne peuvent pas être modifiées via CSS
Éléments de niveau ligne couramment utilisés : span, strong , em, a, del
<style>
div{
background-color: pink;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<div>123</div>//块级元素
<p><span class="span">hello</span>world</p>//行级元素Comme le montre l'image ci-dessus, vous pouvez voir que l'élément block occupe toute la largeur de la ligne. Si vous le considérez comme width:100%, ce qui suit. le contenu doit commencer par une nouvelle ligne
L'élément au niveau de la ligne s'affiche uniquement. Cette partie du contenu n'occupe pas de ligne de conversion d'élément au niveau du bloc
( 1) Convertissez les éléments de niveau bloc en éléments de niveau ligne
et définissez l'affichage pour les éléments de niveau bloc : en ligne
Le résultat est comme ceci
(2) Convertissez les éléments au niveau de la ligne en éléments au niveau du bloc Définissez display:block en éléments au niveau de la ligne et les résultats sont les suivants
display:inline -block
Éléments de bloc en ligne courants : img, input
Caractéristiques : Le contenu détermine la taille, ainsi que la largeur et la hauteur peut être modifié
Rendu
<style>
span{
background-color: yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>La différence entre l'affichage : aucun et la visibilité : cachée
affichage : aucun ne sert à masquer des éléments, ce qui est non seulement invisible mais aussi n'occupe aucun espace
visibilité : caché peut également être utilisé pour masquer des éléments, mais ils existent toujours même s'ils ils sont invisibles, laissant un espace
Exemple
affichage : aucunRendu
bonjour est caché mais ne laisse aucun espace
.span{
background-color: aquamarine;
display:none;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>
Rendu
bonjour est caché mais il y a encore un poste vacant
<style>
.span{
background-color: pink;
visibility: hidden;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Les attentes en matière de prix du Fujifilm X-M5 augmentent alors que l'écran selfie qui fuit ajoute de la complexité à la gamme d'appareils photo autrefois abordables
Sep 07, 2024 am 09:34 AM
Les fans de Fujifilm ont récemment été très enthousiasmés par la perspective du X-T50, car il présentait une relance du Fujifilm X-T30 II, axé sur le budget, devenu très populaire dans la catégorie APS-C à moins de 1 000 $. Malheureusement, lors du lancement du Fujifilm X-T50
Le cordon d'alimentation de l'Apple Studio Display est détachable, mais nécessite des outils spéciaux
May 17, 2023 pm 03:05 PM
Apple Studio Display est désormais officiellement disponible dans les magasins et de nombreux clients du monde entier ont acheté le produit. Contrairement au ProDisplayXDR, le StudioDisplay possède un connecteur d'alimentation unique qui semble non amovible. Il s'avère que le câble est amovible, mais vous aurez besoin d'un outil spécial pour le retirer. Apple indique sur son site Web que le cordon d'alimentation du Studio Display n'est pas détachable – et de nombreux utilisateurs le pensent. En effet, retirer le câble avec les mains semble impossible, mais heureusement, le câble peut être détaché du moniteur. , Apple dispose d'un outil spécial pour extraire les informations de son nouveau StudioDispl
Comparatif : Apple Studio Display vs Samsung Smart Monitor M8
May 11, 2023 pm 10:46 PM
Samsung Smart Display M8 vs Apple Studio Display : conception et taille Depuis son lancement, l'Apple Studio Display a été comparé à l'iMac, composé d'un panneau relativement fin sur un support en forme de L relativement simple. C'est une esthétique connue et appréciée, et Samsung semble l'avoir empruntée pour sa présentation. Le Samsung SmartMonitor M8 reprend la même idée d'un écran fin sur un support très similaire. Certains éléments mineurs sont différents, comme la petite section dans le coin inférieur gauche qui dépasse un peu et le menton du Samsung est très fin, mais ils semblent proches en termes de design de base. Samsung semble s'être beaucoup inspiré de l'iMac 24 pouces. L'écran d'Apple est plus petit que celui de Samsung
Samsung : un nouveau grand écran basé sur la technologie E Ink affiche les couleurs et communique sans fil
Jun 19, 2024 pm 03:37 PM
Nous faisons fréquemment état d'appareils basés sur des écrans à encre électronique, tels que les liseuses électroniques. La technologie offre de nombreux avantages : elle peut être lue dans des environnements lumineux sans rétroéclairage et elle ne nécessite d'énergie que lors d'une commutation sans lumière.
Comparaison : Apple Studio Display vs LG UltraFine 5K Display : lequel est le meilleur ?
Apr 16, 2023 pm 08:25 PM
StudioDisplay et LG UltraFine5KDisplay occupent des positions similaires sur le marché, mais le moniteur d'Apple coûte 300 $ de plus. Voici tout ce que vous devez savoir sur la comparaison de ces moniteurs. Six ans, c'est long dans le monde de la technologie, et c'est aussi le moment où Apple a vendu un moniteur de marque qui coûte moins de 5 000 $. Pendant ce temps, Apple s'est associé à LG pour vendre la série LG UltraFine, destinée spécifiquement aux utilisateurs de Mac. En 2019, Apple a arrêté de vendre ces moniteurs LG au profit de ProDisplayXDR, un écran abordable compatible avec Mac.
Boot Camp mis à jour pour prendre en charge Apple Studio Display
May 20, 2023 pm 11:34 PM
Les utilisateurs d'IntelMac exécutant Windows sur un Mac peuvent désormais mettre à jour leurs pilotes dans BootCamp pour prendre en charge StudioDisplay d'Apple. Apple met régulièrement à jour BootCamp pour introduire la prise en charge du nouveau matériel, ainsi que des améliorations typiques de compatibilité et de performances. Dans la mise à jour logicielle de mars, Apple a activé BootCamp pour fonctionner avec le nouveau StudioDisplay. La mise à jour qui amène BootCamp à la version 6.1.17 introduit deux éléments de support clés. Premièrement, il ajoute la compatibilité avec StudioDisplay, garantissant
Quelles valeurs l'affichage a-t-il ?
Nov 20, 2023 pm 05:28 PM
Les valeurs d'affichage incluent block, inline, none, inline-block, flex, grid, table, inline-table et list-item. 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.
Apple Studio Display fonctionne sous Windows avec certaines limitations
Apr 14, 2023 pm 03:49 PM
Apple a annoncé cette semaine Studio Display, qui comprend un panneau 5K de 27 pouces combinant une caméra, un microphone et des haut-parleurs qui fonctionnent ensemble lorsque les utilisateurs connectent l'écran à leur Mac. Où sont les fenêtres ? Si, pour une raison quelconque, vous devez utiliser le moniteur Apple à 1 599 $ avec un PC Windows, vous le pouvez, mais il existe certaines limitations. Lorsqu'il est branché sur un PC Windows via une connexion Thunderbolt (non prise en charge par tous les PC), le StudioDisplay est reconnu comme un moniteur ordinaire. Cela dit, si vous en achetez un pour l'utiliser avec Windows, vous voudrez vous rappeler
