oujood.com

Définit la manière de calculer la largeur et la hauteur d'un élément : Propriété css box-sizing

La propriété box-sizing définit la manière dont la largeur et la hauteur d'un élément sont calculées : doivent-elles inclure ou non le padding et les bordures.

chercher |

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éfautcontent-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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion10.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>


La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web