Maison > Article > interface Web > Explication détaillée du code graphique sur le dimensionnement des boîtes en CSS3

Explication détaillée du code graphique sur le dimensionnement des boîtes en CSS3

黄舟original: 2017-08-04 13:38:111952parcourir

1. Lisez l'introduction sur w3cschool : attribut CSS3 box-sizing_w3cschool.

2. Je ne le comprends pas assez profondément après avoir lu l'introduction, et je fais partie de ces personnes qui peuvent l'oublier en un clin d'œil après l'avoir lu. Par souci pour moi-même, j'ai honnêtement pris l'exemple hors ligne et je l'ai regardé :

<!DOCTYPE html><html><head>
   <meta charset="utf-8">
   <title></title>
   <style>
      .container      {
         width:30em;
         border:1em solid;
      }
      .box      {
         box-sizing:border-box;
         -moz-box-sizing:border-box; /* Firefox */
         width:50%;
         border:1em solid red;
         float:left;
      }
   </style></head><body><p class="container">
   <p class="box">这个 p 占据了左边的一半。.</p>
   <p class="box" style="border:1em solid #888;">这个 p 占据了右边的一半。</p></p></body></html>

Utilisez Firebug dans Firefox pour examiner la mise en page et remplacez l'attribut box-sizing par content-box (ou supprimez box-sizing, box-sizing par défaut:content-box), comme le montre la figure ci-dessous.

Après comparaison, nous avons trouvé :

Lorsque le dimensionnement de la boîte de l'élément parent avec le nom de classe .container n'est pas défini, qui est la valeur par défaut content-box ou box-sizing : border-box, Il existe deux situations :

(élément parent le plus externe)

1) Lorsque le box-sizing : border-box de deux éléments enfants , la largeur est de 208 px, y compris les ensembles border-left-width et border-right-width (tous deux 16 px), le résultat est de 240 px, soit la moitié de la largeur de l'élément parent, comme le montre la figure ci-dessous (l'élément de gauche est le diagramme de mise en page, la droite est l'effet réel de la page) : (c'est-à-dire la moitié de la largeur de l'élément parent + bordure-gauche-largeur + bordure-droite-largeur)

2 ) Lorsque le box-sizing:content-box de deux sous-éléments, la largeur est de 240px, le remplissage et la marge sont exclus, comme le montre la figure suivante (la gauche est le diagramme de disposition , la droite est l'effet de page réel) :

3. Lors de la définition de box-sizing:border-box pour un élément, cela fait en fait sa largeur = padding-left + padding-right + border-left-width + border-right-width, mais n'inclut pas margin-left et margin-right.

D'accord, je comprends enfin.

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!

Déclaration：

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

Article précédent：Exemple d'analyse sur css annulant la couleur de fond d'un tag lors d'un clic sur le terminal mobileArticle suivant：Exemple d'analyse sur css annulant la couleur de fond d'un tag lors d'un clic sur le terminal mobile

Articles Liés

Voir plus