Maison > Article > interface Web > Utilisation de l'attribut border-sizing en CSS
Cet article vous présente l'utilisation de l'attribut border-sizing en CSS. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.
box-sizing modifie le modèle de boîte CSS par défaut utilisé pour calculer la largeur et la hauteur des éléments. Il a trois valeurs : content-box, border-box etherit. Hériter fait référence à l'héritage du formulaire de dimensionnement de boîte de l'élément parent, qui n'est plus redondant.
## 1. Explication de l'attribut
#### content-box
La valeur par défaut est également le modèle de boîte en CSS2.1. Lors du calcul de width
et height
, border
, padding
et margin
ne sont pas calculés. La hauteur et la largeur ne sont que la hauteur du contenu.
#### border-box
css3
Nouveau. Les attributs width
et height
incluent le contenu, le remplissage et les bordures, mais pas les marges.
Formule de calcul :
largeur = largeur = bordure + remplissage + largeur du contenu
hauteur = bordure + rembourrage + hauteur du contenu
## 2. Compte tenu du margin
du modèle de boîte, on peut savoir d'après ce qui précède que même si c'est border-box
, il ne calculera pas margin
C'est juste un calcul inutile de border
et padding
. Parce que border
et padding
font tous deux partie du modèle de boîte, mais margin
marque la distance entre la boîte et la boîte . Par conséquent, l’explication de border-box
relève du bon sens.
La question est : si la marge doit parfois être définie, comment peut-elle être librement contrôlée pour garantir la compatibilité ? Par exemple, nous souhaitons configurer un élément de boîte qui remplit toute la page et qui est interféré par les marges. Comment devons-nous procéder ?
Réalisez les rendus suivants :
Code : Téléchargement du code source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>yuanxin.me</title> <style type="text/css"> *{ margin: 0; padding: 0; } #app { box-sizing: border-box; /* 指定计算方式 */ margin: 10px; /* 外边距干扰 */ /* 利用 css3 的 calc */ width: calc(100vw - 2*10px); height: calc(100vh - 2*10px); } </style> </head> <body> <p id="app"> </p> </body> </html>
Alors, lorsque vous besoin de calculer Pour la marge, calc
peut être utilisé en conjonction avec les quatre opérations arithmétiques () dans CSS3.
## 3. Suggestions d'utilisation
Sur la base de l'expérience du projet et des recommandations du w3c, il est recommandé de définir l'attribut box-sizing sur border-box.
* { margin: 0; padding: 0; } p { box-sizing: border-box; }
Recommandations associées :
Comment utiliser du CSS pur pour implémenter un train dynamique
Quels sont les sélecteurs CSS ? Résumé complet des sélecteurs CSS (avec code)
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!