BOX

box-shadow

box-shadow : décalage_horizontal décalage_verticale taille du flou étendue couleur inset

box-shadow : 10px 10px 5px navy;

salut les gars

 

box-shadow : 10px 10px 25px red inset;

salut les gars

box-sizing

-moz-box-sizing: border-box | content-box | padding-box

Lorsque la taille d'un bloc est précisée (WIDTH), celle-ci représente la taille du contenu ; la taille totale comprendra en plus la taille du PADDING et de BORDER !

Donc pour éviter que 2 blocs ayant une taille identique soient affichés différemment, on utilise BORDER-BOX qui indique que WITH est la taille du bloc complet.

Bloc de taille 300px sans PADDING et sans BORDER
Bloc de taille 300px avec PADDING = 50px et BORDER = 10px
Bloc de taille 300px avec PADDING = 50px et BORDER = 10px mais avec -moz-box-sizing: border-box

box-orient

box-orient : horizontal | vertical | inline-axis | block-axis

Affiche des descendants

display:-moz-box; -moz-box-orient:vertical;

salut

les

gars

 

display:-moz-box; -moz-box-orient:horizontal;

 salut 

les 

gars

box-direction

box-direction : normal | reverse | inherit

Affiche les descendants selon la direction normale ou inverse

box-flex

box-flex : valeur

Firefox = -moz-box-flex property

Précise si un descendant a une taille fixe (0.0) ou variable

box-align

box-align : start | end | center | baseline | stretch

display:-moz-box;-moz-box-align : center : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

display:-moz-box;-moz-box-align : end : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.