English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le modèle de formatage visuel généralement explique comment traiter les éléments de l'arbre du document pour des médias visuels tels que les écrans d'ordinateur.
Le modèle de formatage visuel CSS est un algorithme utilisé pour traiter les documents de médias visuels. Dans le modèle de formatage visuel, chaque élément de l'arbre du document est traité selonModèle de boîteGénère zéro ou plusieurs cadres.
La mise en page de ces cadres dépend des facteurs suivants :
Taille de la boîte.
Type d'élément (bloc ou en ligne).
Plan de positionnement (flux normal,FlottantetPositionnement absolu)
Les relations entre les éléments dans l'arbre du document.
Informations externes, telles que la taille de la vue, la taille intégrée des images, etc.
Attention :L'arbre du document est la hiérarchie des éléments codés dans le document source. Chaque élément de l'arbre du document a un seul parent, à l'exception de l'élément racine.
Chaque élément affiché sur une page web génère un cadre rectangulaire. La partie suivante décrit les types de cadres que peuvent générer les éléments.
Les éléments en bloc sont ceux qui sont formatés visuellement en blocs (c'est-à-dire qui occupent toute la largeur disponible) et qui ont des retours à la ligne avant et après l'élément. Par exemple, les éléments de paragraphe (<p>etc. des titres (<h1> - <h6>etc. des séparateurs (<div>etc.).
En règle générale, les éléments en bloc peuvent contenir des éléments en ligne et d'autres éléments en bloc.
Les éléments en ligne sont ceux qui ne constituent pas de nouveau bloc de contenu dans le document source ; le contenu est distribué en ligne. Par exemple, les éléments de paragraphe (<em>etc. des espaces (<span>etc. des éléments forts (<strong>etc. du texte en gras.
Les éléments en ligne ne peuvent généralement contenir que du texte et d'autres éléments en ligne.
Attention :Contrairement aux éléments en bloc, les éléments en ligne occupent uniquement la largeur nécessaire et ne forcent pas un retour à la ligne.
Vous pouvez utiliser la propriété display CSS pour modifier la manière dont un élément est affiché sur une page web. Vous allez découvrirDans le prochain chapitreEn savoir plus sur la propriété display.