OUJOOD.COM
Définition et utilisation da la propriété css
La propriété "box-sizing" du CSS définit la manière dont l'utilisateur doit calculer la largeur et la hauteur totales d'un élément, c'est-à-dire si le padding et les bordures doivent être inclus ou non.La Syntaxe CSS
box-sizing: content-box|border-box|initial|inherit;
| Valeurs par défaut | content-box |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.boxSizing="border-box" |
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 10.0 4.0 -webkit- |
8 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Valeurs de la propriété
content-box Par défaut. Les propriétés de largeur et de hauteur (et les propriétés min/max) n'incluent que le contenu. La bordure et le padding ne sont pas inclus.border-box Les propriétés de largeur et de hauteur (et les propriétés min/max) incluent le contenu, le padding et la bordure.
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.
L'exemple ci-dessus illustre l'utilisation de la propriété box-sizing dont la valeur est définie sur content-box et border-box.
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Propriété box-sizing </title>
<style>
div {
width: 200px;
padding: 20px;
border: 2px solid #003668;
background: #003668;
color: white;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>box-sizing: content-box</h2>
<br>
<div class="content-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada nunc vel risus commodo. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Amet massa vitae tortor </div><br><h2>box-sizing: border-box</h2>
<br>
<div class="border-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada nunc vel risus commodo. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Amet massa vitae tortor </div>
</body>
</html>
Modifier la taille des boîtes avec JavaScript
Deux boîtes de 200 pixels chaqu'une à l'intérieur d'un conteneur de 400 pixels. Cela devrait normalement convenir, mais à cause des bordures et du padding, les deux boîtes prennent plus d'espace que 200 pixels chacune et donc le conteneur ne suffit plus pour les contenir touts les deux en largeur. Ce "problème" peut être résolu en donnant à la propriété "box-sizing" la valeur "border-box".
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modifier la taille des boîtes avec JavaScript </title>
<style>
div.container {
width: 400px;
border: 1px solid;
}
div.box {
width: 200px;
border: 3px solid coral;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<h1>Modifier la taille des boîtes avec JavaScript</h1>
<div class="container">
<div class="box" id="box1"><h2>Ceci est BOX1.</h2>condimentum lacinia quis. Dui faucibus in ornare quam viverra orci sagittis. Nunc mattis enim ut tellus elementum sagittis vitae. Vitae auctor eu augue ut lectus arcu bibendum at. </div>
<div class="box" id="box2"><h2>Ceci est BOX2.</h2>Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Id venenatis a condimentum vitae. </div>
<div style="clear:both;"></div>
</div>
<p>Cliquez sur le bouton "Modifier" pour définir la propriété "box-sizing" des deux boîtes sur "border-box" :</p>
<button onclick="changer()"> Modifier </button>
<script>
function changer() {
document.getElementById("box1").style.boxSizing = "border-box";
document.getElementById("box2").style.boxSizing = "border-box";
}
</script>
</body>
</html>