communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Comment utiliser l'attribut box-sizing

Comment utiliser l'attribut box-sizing

青灯夜游
Libérer： 2021-04-20 14:41:37
original
6946 Les gens l'ont consulté

L'attribut box-sizing vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique. La syntaxe d'utilisation de cet attribut est "box-sizing: content-box|border-box|inherit;" .

Comment utiliser l'attribut box-sizing

L'environnement d'exploitation de cet article : système Windows 7, version CSS3, ordinateur Dell G3.

Propriété CSS3 box-sizing

Rôle : Permet de définir de manière exacte le contenu spécifique qui s'intégrera dans une certaine zone.

Remarque : Internet Explorer, Chrome, Safari et Opera prennent en charge l'attribut box-sizing. Firefox nécessite le préfixe -moz-.

Syntaxe :

box-sizing: content-box|border-box|inherit;
Copier après la connexion
Comment utiliser lattribut box-sizing

Exemple d'utilisation de l'attribut CSS3 box-sizing

Rendu : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes 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!

Étiquettes associées：
css3
Article précédent：Comment utiliser l'attribut resize Article suivant：Comment utiliser l'attribut outline-offset
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
ValeurDescription
值描述
content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。
Il s'agit du comportement largeur-hauteur spécifié par CSS2.1.

La largeur et la hauteur sont appliquées séparément à la zone de contenu de l'élément. Dessine le remplissage et les bordures de l'élément en dehors de sa largeur et de sa hauteur.

border-box

La largeur et la hauteur définies pour l'élément Détermine la zone de bordure de l'élément. 
<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
margin: 100px auto;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>

</body>
</html>
Copier après la connexion

C'est-à-dire que 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.

inherit Spécifie que la valeur de l'attribut box-sizing doit être héritée de l'élément parent.