Introduction à l'utilisation de l'attribut CSS box-sizing (modèle de boîte)-tutoriel CSS-php.cn

Introduction à l'utilisation de l'attribut CSS box-sizing (modèle de boîte)

不言

Libérer： 2018-08-06 17:39:21

original

2973 Les gens l'ont consulté

Le contenu de cet article concerne le code de conversion de chaîne utilisant l'attribut text-transform en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. À propos du dimensionnement de la boîte : La propriété est utilisée pour modifier le modèle de boîte CSS par défaut utilisé pour calculer la largeur et la hauteur des éléments.
Les valeurs sont : content-box (valeur par défaut), border-box, hériter.
A. content-box : La largeur et la hauteur sont appliquées respectivement à la zone de contenu de l'élément. Dessinez le remplissage et la bordure de l'élément à l'intérieur de 宽度和高度之外.
B. border-box : Tous les remplissages et bordures spécifiés pour l'élément seront dessinés dans la largeur et la hauteur définies. La largeur et la hauteur du contenu sont obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies.

<!DOCTYPE html><html><head><style> .box,.box1{    
box-sizing:border-box;    
-moz-box-sizing:border-box; 
/* Firefox */
    -webkit-box-sizing:border-box; 
    /* Safari */
    width:200px;    
    height: 50px;    
    border:10px solid red;    
    float:left;}.box1{    
    margin-left: 10px;  
  box-sizing:content-box;
  }
  </style>
  </head>
  <body>
  <div class="container">
    <div class="box">这个 div 占据部分。</div>
    <div class="box1">这个 div 占据部分。</div>
    </div>
    </body>
    </html>
    </body>  
    </html>

Copier après la connexion

Introduction à lutilisation de lattribut CSS box-sizing (modèle de boîte)

Comme le montre la figure, la taille de la boîte intérieure (hors marge) de la boîte de bordure de l'attribut p dans la figure 1 est de 200*50, 盒子的长=width, y compris border, paddind, content, content=width-border*2-padding*2=170(蓝色框);
La taille de la boîte intérieure (hors marge) de la zone de contenu de l'attribut p dans la figure 2 est de 230*80, 盒子的长=width+border*2+padding*2=230, width=content(蓝色框) ; 🎜> C. hériter : Spécifie que la valeur de l'attribut box-sizing doit être héritée de l'élément parent.

.box2{
    width:200px;
    height: 50px;
    padding: 5px;
    border:10px solid red;
    float:left;
    box-sizing:inherit;
}

<p class="box">
    <p class="box2">这个 p 占据部分。</p>
</p>

Copier après la connexion

Introduction à lutilisation de lattribut CSS box-sizing (modèle de boîte) .box2 hérite de la valeur d'attribut border-box de box.