Modèle de boîtes
- François Brucker
Modèle de Boites positionnement et propriétés css.
Chaque balise html est une boite qu'il faut représenter à l'écran. Cette représentation est de cette forme :
Le contenu de la boîte pouvant — bien sûr — être d'autres boites (les enfants de la balise).
La représentation graphique de la boite est contrôlé par de nombreuses propriétés css, que nous allons passer en revue.
Nous utiliserons ce code html pour nos expérimentations :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Modèle de boîte</title>
<style>
</style>
</head>
<body>
<h1>Bonjour Monde !</h1>
<h2>et univers.</h2>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur</strong>
adipiscing elit. Vivamus dolor lacus, maximus non arcu sit amet,
feugiat condimentum libero. Proin suscipit, nunc ut aliquet
pretium, diam enim rutrum justo, at ornare magna massa non
ligula. Vivamus facilisis tincidunt leo, sit amet rutrum dolor
fringilla sed. Donec dapibus nulla nec fermentum aliquam. Sed
vestibulum felis in ornare eleifend.
</p>
<p>
Vestibulum ante ipsum primis in <em>faucibus</em> orci luctus et
ultrices posuere cubilia curae; Ut mattis ornare posuere. Quisque elit
neque, lacinia ac vestibulum a, lobortis ac felis. Nunc eget accumsan
lorem, id interdum sem. Curabitur facilisis, arcu dictum lacinia
scelerisque, ante augue varius lorem, id blandit felis mi a mi. Mauris
lectus odio, rutrum sed gravida vel, ultrices eget mi.
</p>
</body>
</html>Créer un fichier boites.html qui contient le code html précédent et ouvrez le avec chrome.
Les outils de développement vous permettent de visualiser la boîte associée à chaque élément :
Affichage : balise display
Documentation
La propriété display est la plus importante, puisqu'elle détermine si et comment vont être représentés les balises.
Remplacez le style du fichier boites.html par :
<style>
strong {
display: none;
}
</style>rechargez le fichier et voyez comment les éléments <strong></strong> ont disparu.
Notez que si le display est placé à none, l'élément est tout simplement ignoré. Ce n'est pas identique à : visibility: hidden; qui ne fait que cacher l'élément (sa place est réservée). Testez la différence !
Il existe de nombreuses valeurs possibles à la propriété display. Nous allons en présenter trois ici.
display: block
Comme les éléments <p></p> ou encore <h1></h1>.
Les éléments de display block commencent en-dessous de la boîte précédente et prennent, par défaut la largeur de la fenêtre.
Leur hauteur est par défaut la hauteur nécessaire pour représenter son contenu.
Les éléments de display block, se suivent les uns en dessous des autres.
Utilisez les outils de développement pour voir comment les éléments <p></p> s'agencent les uns en dessous des autres.
Changez le display des éléments <strong></strong> à block et observez le résultat.
display: inline
Les éléments de display inline commencent à la suite de l'élément inline précédent et n'ont pas de largeur (width) ni de hauteur height).
Les éléments de display inline, se suivent les uns à côté des autres.
Changez le display des éléments <h1></h1> et <h2></h2> à inline et observez le résultat.
Pourquoi ne se passe-t-il rien si on ne change qu'un des deux éléments à inline
solution
solution
Car un élément de display block commence toujours au bord et prend toute la place. Il ne peux donc rien y avoir avant ni après.
display: inline-block
Les éléments de display inline-block commencent à la suite de l'élément inline ou inline-block précédent.
Les éléments de display inline, se suivent les uns à côté des autres.
Les éléments de display inline-block ont une taille, un padding et une marge.
Voyez les différences de représentation en supprimant ou pas la propriété display: inline-block; du style suivant :
<style>
strong {
padding: 100px;
margin: 100px;
border: 1px solid;
display: inline-block;
}
</style>width et height
Documentation inline et block
Les propriétés min-width, max-width, min-height et max-height permettent de garder de la flexibilité dans la taille des boîtes tout en contrôlant le design.
Attention aux effets de bord, si l'on donne une hauteur trop petite pour contenir l'élément, il va déborder. On peut utiliser la propriété overflow pour le gérer.
Choisissez une hauteur trop petite pour contenir les paragraphes et regardez les déborder.
Utilisez ensuite la propriété overflow: hidden; pour cachez le surplus.
border
Il existe plein de propriétés css qui gèrent le bord. Elles commencent toutes par border-. Elles peuvent être (presque) toutes agrégées dans la propriété border
On peut faire des choses assez jolies en utilisant border-radius
margin
Documentation
Si deux éléments de display block se suivent, la marge entre les deux block sera du maximum des deux marge et non la somme. C'est ce que l'on appelle : fusion des marges.
Les marges hautes et basses des éléments de display inline ne sont pas prises en compte.
Un cas classique d'utilisation des marges est pour les images. L'élément <img></img> sont normalement de display inline. Si l'on veut centrer une image, la solution habituelle est de placer comme style :
<style>
img {
display: block;
margin: auto;
}
</style>Essayez de centrer une image.
Vous pourrez par exemple utiliser cette image : <img src="https://i-mom.unimedias.fr/2020/09/16/dragon-ball-tortue-geniale.jpg"/>
padding
Documentation
Les paddings haut et bas des éléments de display inline ne sont pas prises en compte. Mais ce padding existe. On le voit par exemple lorsque l'on ajoute un bord.
Mettez le style ci-après et voyez comment le bord est influencé par le padding, bien que ce dernier ne soit pas pris en compte dans la représentation de la boite.
<style>
strong {
padding: 100px;
border: 1px solid;
}
</style>