Gérer le modèle de boîte CSS

Modèle de la boîte CSS: La clé pour comprendre la disposition du Web

La chose la plus importante dans la compréhension du CSS est: Tout est une boîte . Plus précisément, chaque élément du document génère une boîte. Cette boîte peut être une boîte au niveau des blocs ou une boîte au niveau en ligne. Le type de boîte détermine comment les éléments affectent la disposition de la page. Le modèle de boîte CSS est un concept utilisé pour décrire la disposition et la taille des éléments HTML. Chaque élément contient une boîte pour son contenu, son remplissage, sa bordure et ses marges. Ces boîtes sont combinées pour déterminer la disposition du contenu de l'élément et comment les éléments adjacents apparaissent côte à côte avec eux:

si l'élément crée une boîte et quel type de boîte est créé dépendra de la langue de balisage. CSS a évolué en un moyen de styliser des documents HTML, de sorte que de nombreux modèles de rendu visuel CSS proviennent de la distinction HTML entre les éléments au niveau du bloc et en ligne. Par défaut, des éléments tels que <code><p></p> et <section></section> créent des boîtes de niveau bloc, mais <a></a>, <span></span> et <em></em> Créer des boîtes en ligne. D'un autre côté, SVG n'utilise pas de modèles de boîtes, donc la plupart des propriétés CSS liées à la disposition ne peuvent pas être utilisées avec SVG.

La boîte au niveau du bloc crée de nouveaux blocs de contenu, comme le montre la figure 4.1. Le rendu de la boîte au niveau du bloc est vertical, disposé dans l'ordre de sa source, et (à l'exception du tableau) se développe pour remplir la largeur disponible de ses éléments contenus. C'est ce qu'on appelle un flux normal. La valeur display de la boîte au niveau de bloc est block, list-item, table, ou toute valeur table-* (par exemple, table-cell).

Figure 4.1.

En revanche, les boîtes au niveau en ligne ne forment pas de nouveaux blocs de contenu. Au lieu de cela, ces cases forment des lignes dans des boîtes au niveau des blocs. Ils affichent et remplissent la largeur de la boîte horizontalement et s'enroulent si nécessaire, comme le montre la figure 4.2. La valeur

de la boîte de niveau en ligne est

, display, inline ou inline-block. inline-table ruby

Figure 4.2. Mais comment la taille de la boîte est-elle calculée? C'est là que les choses deviennent plus compliquées. Comme le montre la figure 4.3, la taille de la boîte est la somme de la zone de contenu de la boîte, de la largeur de remplissage et de la largeur de la bordure. La largeur de la marge crée une boîte de marge pour un élément et affecte d'autres éléments du document; cependant, la largeur de marge n'a aucun effet sur la taille de la boîte elle-même.

Figure 4.3.

Par exemple, un élément <code>width: 300px avec padding: 20px, border: 10px et <code><p></p> a une largeur calculée de 360 ​​pixels. Il s'agit de la somme de sa largeur, de son remplissage gauche et droit, et des propriétés de largeur de bordure gauche et droite. Pour créer un élément avec une largeur de 300 pixels, un remplissage de 20 pixels et une bordure de 10 pixels, la largeur doit être réglée à 240px. C'est ainsi que la plupart des navigateurs traditionnels calculent les largeurs. Pour résoudre certains des problèmes avec le modèle de compétition parmi les navigateurs, le groupe de travail CSS a introduit l'attribut box-sizing. Il nous permet de choisir notre implémentation de modèle de boîte préférée et de simplifier considérablement les calculs lorsqu'il s'agit d'une conception réactive.

en utilisant box-sizing Sélectionner le modèle de boîte

Les propriétés

box-sizing sont définies dans la spécification de niveau 3 du module d'interface utilisateur de base CSS. Il a deux valeurs possibles: content-box et border-box. Initialement, la valeur de box-sizing est content-box. Lorsque vous utilisez cette valeur, la définition des propriétés width et height d'un élément affecte la taille de sa zone de contenu. Cela correspond au comportement défini dans la spécification CSS 2.1 et est le comportement par défaut dans les navigateurs modernes (comme le montre la figure 4.4). La définition de la valeur de box-sizing sur border-box produira quelques effets magiques. Les valeurs de width et height sont maintenant appliquées au bord de la bordure externe au lieu de la zone de contenu. La bordure et le remplissage sont dessinés à l'intérieur de la zone d'élément, correspondant à l'ancien comportement Internet Explorer 5.5. Regardons un exemple de mélange de remplissage et de bordures en utilisant des unités de largeur et de PX:

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Nos éléments

et <article> appliquent tous deux le CSS suivant, qui nous donne la disposition illustrée à la figure 4.5, où le premier élément a une largeur de 60% et le deuxième élément a une largeur de 60% 40%: <aside>

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Figure 4.5.

Par défaut, les valeurs

et

de

sont les deux <aside>. Les valeurs <article> et box-sizing augmentent la largeur de chaque élément de 40 pixels, ce qui affecte considérablement la segmentation de 60% / 40%. Ajoutons maintenant content-box aux éléments border-width et padding: box-sizing: border-box <article> <aside> Vous pouvez voir le changement de la figure 4.6: L'élément a la même largeur, mais

signifie que la largeur comprend les bordures et le rembourrage. Étant donné que l'attribut

article, aside {
  box-sizing: border-box;
}

est appliqué aux bords de bordure plutôt qu'aux zones de contenu, nos éléments sont désormais disposés côte à côte.

box-sizing: border-box width

Figure 4.6.

Je vous recommande d'utiliser box-sizing: border-box dans votre projet. Cela facilite la vie car il n'est pas nécessaire de calculer les valeurs de largeur pour considérer les valeurs de remplissage et les frontières, et le comportement de la boîte est plus prévisible. La meilleure façon d'appliquer box-sizing: border-box est d'utiliser des règles de réinitialisation. L'exemple suivant vient de l'article CSS-Tricks de Chris Coyier "Héritage de la taille de la boîte peut être légèrement meilleure - les meilleures pratiques":

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Cela applique la taille border-box à chaque élément par défaut sans affecter le comportement box-sizing des parties existantes du projet. Si vous savez qu'il n'y aura pas de composants tiers ou hérités qui reposent sur le comportement content-box, vous pouvez simplifier ces règles:

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Le modèle de boîte de gestion n'est qu'un élément pour comprendre comment créer des dispositions complexes.

FAQ sur les modèles de boîtes CSS (FAQ)

(La partie FAQ est omise ici car l'article est trop long et ne correspond pas à l'objectif pseudo-original. La partie FAQ peut être ajoutée ou modifiée selon les besoins.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!