Le modèle de boîte CSS définit les boîtes rectangulaires qui sont générées pour les éléments de la structure HTML. Présentation de la propriété box-sizing issue de la spécification CSS3.

1. CSS /
INTRODUCTION AU
MODÈLE DE BOITE
2014 - SUTTERLITY
1

2. CSS / INTRODUCTION AU MODÈLE DE BOITE
01
Résumé
Margin
Border
Le modèle de boîte CSS définit les boîtes rectangulaires qui sont
générées pour les éléments de la structure HTML.
Padding
!
!
•
•
•
•
margin les marges extérieures
border les bordures
padding les marges intérieures
width le contenu
height
En CSS une boîte est constituée de 4 valeurs :
Contenu
!
Par défaut, la longueur totale du modèle de boîte et
l’addition des valeurs du padding, des borders et de la
propriété width.
2014 - SUTTERLITY
width
2

3. CSS / INTRODUCTION AU MODÈLE DE BOITE
Exemple
Modèle de boite par défaut.
.box {
width: 100px;
height: 100px;
padding: 10px 15px;
margin: 20px 0;
border: 4px solid #666;
background-color: #09f;
}
2014 - SUTTERLITY
Résultats
largeur / 4 + 15 + 100 +15 + 4 = 138
hauteur / 4 + 10 + 100 + 10 + 4 = 128
3

4. CSS / INTRODUCTION AU MODÈLE DE BOITE
02
L’évolution box-sizing
Margin
Border
La propriété box-sizing est issue de la spécification CSS3.
!
!
Elle accepte 3 valeurs :
content-box
height
Elle est utilisée pour modifier le modèle de boîte par défaut qui
est utilisé pour calculer la largeur et la hauteur des éléments.
Padding
Contenu
C’est la valeur par défaut. Les propriétés width et height sont
calculées en additionnant le padding, les border et le contenu.
width
border-box
Les propriétés width et height incluent le padding, les border,
mais pas la marge extérieure.
2014 - SUTTERLITY
4

5. CSS / INTRODUCTION AU MODÈLE DE BOITE
Exemple
Modèle de boite : content-box
.box {
width: 100px;
height: 100px;
padding: 10px 15px;
margin: 20px 0;
border: 4px solid #666;
background-color: #09f;
-webkit-box-sizing: content-box;
-moz-box-sizing:
content-box;
box-sizing:
content-box;
}
2014 - SUTTERLITY
Résultats
largeur / 4 + 15 + 100 +15 + 4 = 138
hauteur / 4 + 10 + 100 + 10 + 4 = 128
5

6. CSS / INTRODUCTION AU MODÈLE DE BOITE
Exemple
Modèle de boite : border-box
.box {
width: 100px;
height: 100px;
padding: 10px 15px;
margin: 20px 0;
border: 4px solid #666;
background-color: #09f;
-webkit-box-sizing: border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;
}
2014 - SUTTERLITY
Résultats
largeur / 100 = 100
hauteur / 100 = 100
6

7. CSS / INTRODUCTION AU MODÈLE DE BOITE
03
Facilitez-vous la vie
Utiliser la valeur border-box est aujourd’hui possible en production,
car elle à l’avantage d’être reconnue depuis IE8.
!
Il suffit d’utiliser le code ci-dessous dans votre fichier CSS, pour
appliquer le nouveau modèle de boîte à tout votre document HTML.
!
Le sélecteur universel * est communément considéré comme non
performant. Cependant certains tests démontrent que la perte de
performance est négligeable (6ms sur de gros gabarits).
2014 - SUTTERLITY
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;
}
7

8. CSS / INTRODUCTION AU MODÈLE DE BOITE
Les ressources
Paul Irish
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
!
W3C Box CSS2
http://www.w3.org/TR/CSS21/box.html
!
W3C Box-sizing CSS3
http://www.w3.org/TR/css3-ui/#box-sizing0
!
CSS TRICKS
http://css-tricks.com/box-sizing/
2014 - SUTTERLITY
8

9. FOLLOW ME /
TWITTER
PORTFOLIO
!
!
@sutterlity
sutterlity.fr
2014 - SUTTERLITY