Comment utiliser l'attribut CSS table-cell

table-cell est un formulaire d'affichage représenté par l'attribut display comme les éléments en ligne et les éléments de bloc. Il peut être utilisé pour créer des tableaux et des cellules Excel. attribut table-cell en CSS.

Introduisons d'abord le concept de base de l'attribut table-cell

table-cell est la valeur de l'attribut d'affichage, qui peut être donnée de manière similaire à la balise table Le style de l'élément enfant.

Mais je pense que cela ressemble à "des éléments peuvent être facilement disposés côte à côte".

Cette partie du "tableau" initial a une balise table. Lorsque les sites Web dits Web ont commencé à devenir populaires, le cadre était essentiellement réalisé à l'aide de balises de table.

Puisque la balise HTML elle-même est forcée de se comporter, il est impossible de faire comme "différence de largeur d'affichage, disposition verticale", et maintenant elle est complètement invisible et réactive au réseau.

Parce que la balise HTML elle-même est forcée de ressembler à un tableau, "comme ramer un bateau en fonction de la largeur d'affichage" n'est pas possible, et maintenant elle ne répond absolument pas à la visualisation sur le Web.

Concernant la "cellule" de "tableau", avez-vous entendu parler de "cellule" dans Excel, etc. ? En d'autres termes, display : table - cell peut reproduire le cadre dans le tableau.

Une chose à noter : il se déplace différemment des éléments de bloc normaux.

Comment utiliser l'attribut table-cell

En gros, utilisez display: table sur l'élément parent ; puis utilisez table-cell

Regardons un exemple

HTML

<p>apple</p> 
  </div> 
  <div class ="box orange"> 
    <p> oranges </p> 
  </div> 
  <div class ="box apple">
  <div class ="box grape"> 
    <p>grape</p> 
  </div> 
</div>

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}
.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}
.apple{
  background: #ED3B2B;
  vertical-align: middle;
}
.orange{
  background: #E4642C;
  vertical-align: top;
}
.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

Nous pouvons modifier les valeurs des attributs et essayer diverses Je n'entrerai pas dans les détails de telles opérations ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo CSS du site Web php chinois ! ! !

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!