Langage CSSModèle de conteneur
Modèle de boîte CSS
En CSS, chaque élément d'un document HTML est prise en charge sous la forme d'une boîte rectangulaire - on leur applique ensuite diverses règles de mise en forme visuelle.
Attributs CSS
- Chaque boîte est constituée de quatre éléments :
- son contenu (texte ou image)
- son remplissage (l'espace entre le contenu et la bordure), soit l'attributs CSS padding
- sa bordure (visible ou pas), soit l'attribut CSS border
- sa marge (l'espace séparant la boîte et le reste), soit l'attribut CSS margin
Spécificité IE
- Certains navigateurs :-) divergent largement de la spécification CSS lors de l'application des dimensions (marges, bordures...).
La largeur totale de la boîte = marge + bordure + remplissage + largeur du contenu.
Mais Internet Explorer 5.x ne prenais pas en compte la largeur de la marge (margin) - on parle alors, de bug d'interprétation (plus d'infos...).
Pour une boîte (un div par exemple) avec 100px de large (width:100px;), 10px de remplissage (padding:10px;), une bordure de 5px (border-width) et pas de marge (margin:0px;), on a un cadre de 130px de large (100+2*10+2*5+0).
Or Internet Explorer 5.x ne réservera à cette même boîte que 100px, puis il soustraira les valeurs de paddings (2*10) et de borders (2*5) de la valeur de width. (plus d'infos...).
Attribut CSS BORDER
- border-width :
Exemple : border-width : 5px; - border-style :
border-style: dotted solid double dashed;
Cela représente les 4 droites d'un rectangle : top, right, bottom et enfin left.
- Le top border est dotted (petits points)
- Le right border est solid
- Le bottom border est double
- Le left border est dashed (petits tirets)
- border-color :
Exemple : border-color : #c0c0c0; - Saisie rapide, les trois attributs ensemble :
border:5px solid red;
Soit : border-width puis border-style et enfin border-color
