Notion de modèle de boîte CSS
Sommaire
- 1- Objectif
- 2- Introduction
- 3- Définition
- 4- Le modèle de boîte officiel W3C
- 5- Les différents modèles existants
- 5.1- Le modèle de boîte de type block
- 5.2- Le modèle de boîte de type inline
- 5.3- Le modèle de boîte de type tabulaire
- 5.4- Le modèle de boîte de type tabulaire
- 6- Applications
- 6.1- App01
- 6.2- App02
- 6.3- App03
- 6.3.1- Cours CSS
Notion de modèle de boîte CSS
-
Objectif
- Comprendre la notion de modèle de boîte CSS
-
Introduction
- Les sites actuels reposent sur une architecture de boîtes, que ce soit des boîtes de types blocs, des textes, des tableaux ou des éléments positionnés.
- La spécification CSS2.1 définit ainsi quatre modèles de positionnement :
- block layout utilisé pour les pages web « classiques »
;
- inline layout utilisé pour le texte ;
- table layout utilisé pour des données tabulaires ;
- positioned layout utilisé pour le positionnement d’élément autonome au sein de la page.
-
Définition
- Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le terme « modèle de boîte » est utilisé quand on parle de design et de mise en page.
- Le modèle de boîte décrit la manière dont interviennent les différentes propriétés
width,height,margin,paddingetborderafin de déterminer les dimensions d’une boîte rectangulaire. - Le Box Model est la manière dont les navigateurs doivent afficher les boîtes CSS ( c’est à dire comment ils doivent calculer les dimensions de ces boîtes afin d’effectuer correctement leur rendu ).
-
Le modèle de boîte officiel W3C
- Dans le modèle des feuilles de style, tous les éléments d’une page HTML se coulent dans des blocs (ou «boîtes») rectangulaires.
- Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d’espacement, une aire de bordure et une aire de marge ; Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner :
- Voici un schémas pour comprendre le modèle de boîte standard W3c
- A partir de l’extérieur, on rencontre successivement 4 zones
- Une marge externe (margin), toujours transparente, avec des épaisseurs réglables côté par côté ;
- Une bordure (border), dont on peut régler l’épaisseur, la couleur et le style côté par côté ;
- Une marge interne (padding), ou «espacement», d’épaisseur réglable côté par côté ;
- Enfin, l’espace dévolu au contenu du bloc..
- Le modèle de boîte CSS est essentiellement une boîte qui entoure chaque élément HTML. Il comprend: les marges, les bordures, le remplissage et le contenu.(margins, borders, padding,the actual content.)
- Par défaut, en CSS, le modèle de boîte fonctionne de la manière suivante : la largeur totale de la boîte correspond à la somme de sa largeur, son padding et de sa bordure.
-
Les différents modèles existants
-
Le modèle de boîte de type block
- Le modèle de boîte de type block est le modèle de boîte classique (figure ci-dessus).
- Les principaux avantages de ce modèle sont que les boites de type block peuvent êtres dimensionnées avec les propriétés
widthetheight, et qu’elles sont pourvues de marges internes (padding) et de marges externes (margin) qui nous permet d’espacer les boites les unes des autres. - Les inconvénients majeurs de ce modèle sont qu’il n’existe pas d’alignement vertical du contenu au sein de la boîte, qu’il n’y a pas de lien avec le contexte (les boîtes sont autonomes), mais surtout que le calcul de la taille d’une boîte se fait en
ajoutant les valeurs de largeur (width), de marge interne (padding) et de bordures (border). -
Le modèle de boîte de type inline
- Le type inline, ne définit pas de boîte autonome contrairement aux blocs, par conséquent les éléments s’affichent côte à côte.
- La boîte ne peut cependant pas être dimensionnée.
- une balise de type inline se trouve obligatoirement à l’intérieur d’une balise block.
- Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l’intérieur s’écrit donc à la suite du texte précédent, sur la même ligne .
-
Le modèle de boîte de type tabulaire
- Ce modèle, utilisé avec les balises HTML de tableaux, son avantage principal est que le positionnement des boîtes est dépendant du contexte, sans création de boîte autonome.
- C’est aussi son principal inconvénient. Ainsi deux boîtes peuvent se positionner côte à côte, leur taille peut être modifiée, et un alignement vertical est possible. De plus la largeur et la hauteur des boîtes sont « fluides » et s’adaptent aux boîtes environnantes.
- C’est un avantage quand il s’agit de deux boîtes côte à côte car les hauteurs seront identiques mais cela peut être un inconvénient dans le cas de plusieurs lignes, car les largeurs s’adapteront entre elles.
-
Le modèle de boîte de type tabulaire
- Le dernier modèle de boîte concerne les éléments positionnés hors du flux. Les éléments HTML basculent dans ce modèle lorsque les propriétés CSS position ou float sont utilisées.
- Dans ce cas les éléments n’ayant plus de parent, n’ont plus de taille par défaut. Leur taille est donc dépendante de leur contenu. Pour le reste, le modèle de boîte de type block s’applique.
-
Applications
-
App01
- Créez deux pages la première est de type HTML5 et la deuxième est de type css3.
- Ces deux pages contiendront les éléments présents dans la maquette présentée ci-dessous.
- Dans la deuxième page créer le code CSS qui va permettre de réaliser une mise en page correspondant à l’illustration suivante :
-
App02
- Créez deux pages la première est de type HTML5 et la deuxième est de type css3.
- Ces deux pages contiendront les éléments présents dans la maquette présentée ci-dessous.
- Dans la deuxième page créer le code CSS qui va permettre de réaliser une mise en page correspondant à l’illustration suivante :
-
App03
- Écrivez le HTML et le CSS nécessaires pour créer la mise en page représentée par la figure suivante.
- Vous devez utiliser seulement, les propriétés de positionnement
margin : valeur;etdisplay: inline-block;et tous autres propriétés, de non positionnement, nécessaires .
Le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes.
