CSS /

INTRODUCTION AU

MODÈLE DE BOITE

2014 - SUTTERLITY

1
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 q...
CSS / INTRODUCTION AU MODÈLE DE BOITE

Exemple
Modèle de boite par défaut.

.box {
width: 100px;
height: 100px;
padding: 1...
CSS / INTRODUCTION AU MODÈLE DE BOITE

02

L’évolution box-sizing
Margin
Border

La propriété box-sizing est issue de la s...
CSS / INTRODUCTION AU MODÈLE DE BOITE

Exemple
Modèle de boite : content-box

.box {
width: 100px;
height: 100px;
padding:...
CSS / INTRODUCTION AU MODÈLE DE BOITE

Exemple
Modèle de boite : border-box

.box {
width: 100px;
height: 100px;
padding: ...
CSS / INTRODUCTION AU MODÈLE DE BOITE

03

Facilitez-vous la vie
Utiliser la valeur border-box est aujourd’hui possible en...
CSS / INTRODUCTION AU MODÈLE DE BOITE

Les ressources
Paul Irish
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
...
FOLLOW ME /

TWITTER

PORTFOLIO

!

!

@sutterlity

sutterlity.fr

2014 - SUTTERLITY
Prochain SlideShare
Chargement dans…5
×

Modèle de boite CSS

1 541 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 541
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 093
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Modèle de boite CSS

  1. 1. CSS / INTRODUCTION AU MODÈLE DE BOITE 2014 - SUTTERLITY 1
  2. 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. 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. 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. 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. 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. 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. 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. 9. FOLLOW ME / TWITTER PORTFOLIO ! ! @sutterlity sutterlity.fr 2014 - SUTTERLITY

×