Quelles sont les valeurs d'attribut de l'attribut display en HTML ? Comment l'attribut display réalise-t-il le centrage horizontal et vertical ?

Quelles sont les valeurs d'attribut de l'attribut display en HTML ? Quelle est la signification ? Et comment l'attribut display en HTML réalise-t-il un centrage horizontal et vertical ? L'article d'aujourd'hui vous présentera la valeur de l'attribut display en HTML et comment réaliser un centrage horizontal et vertical de la valeur de l'attribut display en HTML. Deux méthodes sont présentées.

display Ici, je parle des quatre valeurs d'attribut les plus couramment utilisées​​inline, block, inlin-block et none.

Parlons d'abord de l'inline (n élément en ligne) :

Cette valeur d'attribut est la valeur par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément. Cette valeur d'attribut n'est généralement pas définie. D'après ma compréhension personnelle, ce n'est pas différent des éléments en ligne normaux, Block et inline-block sont plus couramment utilisés.

Ensuite, il y a la valeur d'attribut du bloc (élément de niveau bloc) :

Cette valeur d'attribut est plus intéressante. Elle est définie pour que l'élément de niveau bloc. occupe une ligne exclusive, en ce qui concerne les sauts de ligne, l'effet est le même que celui de la balise p, mais une fois cette valeur d'attribut définie, en tant qu'élément de niveau bloc, elle a une largeur, une hauteur et une distance entre elles. il et d'autres éléments au niveau du bloc. Le paramètre d'attribut de marge et le remplissage du paramètre d'espacement, mais ne peuvent pas définir la hauteur de ligne.

Il y a aussi la valeur d'attribut de inline-block :

Cette valeur d'attribut est relativement puissante, je l'ai essentiellement vue lorsque j'ai commencé à apprendre. être défini tant qu'il n'est pas renvoyé à la ligne. D'une part, il peut être utilisé comme élément de niveau bloc et peut avoir les caractéristiques d'un bloc. D'autre part, comme je suis débutant, c'est gênant. pour définir le centre. Tous ceux qui utilisent cette valeur d'attribut peuvent définir la hauteur de la ligne afin que le texte soit centré pour faciliter son utilisation.

Ces attributs sont très utiles pour l'implémentation de cette barre de navigation. Les deux valeurs d'attribut​​block et inline-block sont principalement utilisées comme implémentation de plusieurs éléments dans le. même ligne, et le bloc est utilisé comme implémentation de sauts de ligne entre les éléments. Tout le monde peut l'essayer.

Pour la dernière valeur d'attribut none :

Personnellement, je pense qu'il est plus pratique de masquer les éléments lorsque la souris flotte, modifiez la valeur de l'attribut d'affichage en. obtenir un affichage. Effet avec des éléments cachés.

Quelles sont les valeurs d'affichage couramment utilisées en HTML ? Jetons un coup d'œil à

L'affichage en HTML est relativement facile à utiliser dans le développement normal d'un projet. Les valeurs principales sont :

• aucun (l'élément ne sera pas affiché)

• block (l'élément sera affiché sous forme de élément de niveau bloc, et l'élément sera précédé et suivi de sauts de ligne);

• inline (l'é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. Nouvelle valeur dans CSS2.1

• table (l'élément sera affiché sous forme de tableau au niveau d'un bloc, similaire à f5d188ed2c074f8b944552db028f98a1, avec des sauts de ligne avant et après le tableau );

• table-row (l'élément sera affiché sous forme de ligne de tableau , similaire à a34de1251f0d9fe1e645927f19a896e8);

• table-cell (l'élément sera affiché sous forme de cellule de tableau, similaire à b6c5a531a458a2e790c1fd6421739d1c et b4d429308760b6c2d20d6300079ed38e).

• L'affichage permet un centrage horizontal et vertical !

Utilisez la position et la marge pour centrer les éléments horizontalement et verticalement ; je pense que tout le monde le connaît et l'utilise fréquemment. Mais je me demande si vous avez déjà utilisé display: table et table-cell pour centrer des éléments horizontalement et verticalement ?

Voici deux façons d'utiliser display: table-cell pour centrer les éléments horizontalement et verticalement :

1 Utilisez display: table et table-cell pour centrer les éléments horizontalement et verticalement.

Structure :

<div class="wrap">
 <div class="box">
  <div class="con">梦幻雪冰</div>
 </div>
</div>

Style :

.wrap {
    /*让元素以表格形式渲染*/
    display: table;
    height: 400px;
    width: 400px;
    background: #fcf;
}
.box {
    /*让元素以表格的单元素格形式渲染*/
    display: table-cell;
    /*使用元素的垂直对齐*/
    vertical-align: middle;
}
.con {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

Avantages :

Cette méthode ne sera pas comme les deux méthodes précédentes De même , il y a une limite de hauteur.Cette méthode peut modifier dynamiquement la hauteur en fonction du contenu de l'élément, il n'y a donc pas de limite d'espace. Le contenu de l'élément ne sera pas coupé ou des barres de défilement laides apparaîtront en raison d'un espace insuffisant.

Inconvénients :

Quelles sont les lacunes ? Cette méthode ne convient qu'aux navigateurs modernes et ne fonctionnera pas correctement sous IE6-7.

2. Utilisez display: table-cell pour centrer les éléments horizontalement et verticalement

Structure :

<div class="wrap">
 <div class="box">
  梦幻雪冰
 </div>
</div>

Style :

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

Avantages :

Les avantages de cette méthode sont les mêmes que ceux de la troisième méthode, et il n'y aura aucune restriction de hauteur.

Inconvénients :

IE6 et IE7 ne sont pas pris en charge

[Recommandations associées]

Qu'est-ce que le Web en HTML5 ? Quels sont les éléments du stockage Web ?

Quels sont les attributs de la balise HTML IMG ? Apprenez à utiliser la balise IMG

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!