Explication détaillée du modèle de boîte HTML

Cette fois, je vais vous apporter une explication détaillée du modèle de boîte html. Quelles sont les précautions lors de l'utilisation du modèle de boîte html. Voici un cas pratique, jetons un coup d'œil.

1.1. La taille de la zone de contenu de la boîte - largeur du contenu et hauteur du contenu - dépend de plusieurs facteurs :

--si l'élément qui génère la boîte a une « largeur » ou la propriété définie « hauteur ».
--Si la boîte contient du texte et d'autres boîtes.
--Si la boîte est une table, etc.

1.2. La couleur d'arrière-plan de la boîte

--Le style d'arrière-plan des zones de remplissage et de bordure est spécifié par l'attribut 'background' de l'élément qui génère (la boîte) . L'arrière-plan de la marge est toujours transparent

2 Attributs de marge : 'margin-top', 'margin-right', 'margin-bottom ', 'margin-left' et 'margin'

2.1 L'attribut margin spécifie la largeur de la zone de marge de la boîte

--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果

2.2 . margin-width> Type de valeur, qui peut prendre l'une des valeurs suivantes :

--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于&#39;margin-top&#39;和&#39;margin-bottom&#39;也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制

2.3 'margin-top', 'margin-bottom'

'margin-top', 'margin-bottom'
Value:      <margin-width> | inherit
Initial:    0
Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

. Ces deux attributs ne sont pas valides pour les éléments en ligne non remplacés

2.4 'margin-right', 'margin-left'

'margin-right', 'margin-left'
Value:      <margin-width> | inherit
Initial:    0
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

'margin'

.

'margin'
Value:      <margin-width>{1,4} | inherit
Initial:    见单独的各个属性
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     见单独的各个属性

3. Fusionner les marges

Les marges verticales adjacentes seront fusionnées, sauf :

----Les marges de la boîte de l'élément racine ne seront pas fusionnées

- ---Si la marge supérieure et la marge inférieure d'un élément avec un espace (annotation de dégagement : fait référence à l'espace provoqué par le mouvement de la position de l'élément provoqué par l'attribut clear) sont adjacentes l'une à l'autre, sa marge sera la même comme celui de son frère immédiatement adjacent (élément ) sont fusionnés, mais après la fusion, ils ne seront pas fusionnés avec la marge inférieure du bloc parent

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture connexe :

Comment créer rapidement du code d'en-tête html dans sublime

Quelles sont les unités de longueur en CSS

Collection CSS (Feuilles de style en cascade)

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!