Maison > Article > interface Web > Qu’est-ce que l’effondrement des marges ? Dans quelles circonstances apparaît-il ? Comment le résoudre ?
Cet article vous amènera à comprendre le modèle de boîte CSS et à vous présenter ce qu'est l'effondrement des marges ? Dans quelles circonstances un effondrement des marges se produit-il ? Et parlons de solutions.
En CSS, tous les éléments sont entourés de « boîtes » une par une. Nous utilisons largement deux types de « boîtes » : les boîtes au niveau du bloc (block box
) et les boîtes en ligne (block box
). code>boîte en ligne). block box
) 和 内联盒子 (inline box
)。
在 CSS 中,盒模型(box model)是在设计和布局时使用。
盒模型的定义可以分成这几部分:
width
和 height
.padding
相关属性设置。border
相关属性设置。margin
相关属性设置。块级盒子完整地应用了 CSS 盒模型,内联盒子只使用盒模型中定义的部分内容。
box-sizing
box-sizing
属性定义了浏览器应该如何计算一个元素的总宽度和总高度。
content-box
(默认值),即标准盒模型,width: 100px
指的是内容区会有 100px 宽。content(100px)
+ padding
+ border
border-box
,即替代(IE)盒模型,width: 100px
指的是 内容区 + 边框 + 内边距
的总和是 100px 宽。content
+ padding
+ border
= 100px
不论那种模型,margin 都是不计入实际大小 —— 当然,它会影响盒子在页面所占空间,但是影响的是盒子外部空间。
display
这里可以补充一个概念 -- 内部和外部显示类型。
display
属性的设置,比如 inline
或者 block
,来控制盒子的是内联还是块级。如果设置 display: flex
,在一个元素上,外部显示类型是 block
,但是内部显示类型修改为 flex
。 该盒子的所有直接子元素都会成为 flex
元素,会根据 弹性盒子(Flexbox
)规则进行布局。
还有一个特殊的值 -- display: inline-block
,它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不发生换行,但可以设定宽度和高度,也就是说实现了块级的部分效果:
width
和 height
属性会生效。padding
, margin
, 以及 border
会推开其他元素。HTML4 中,元素被分成两大类: inline
(内联元素) 与 block
(块级元素)。
一个行内元素只占据它对应标签的边框所包含的空间。
常见的行内元素有 a
、 b
、 span
、 img
、 strong
、 sub
sup
、 button
、 input
、 label
、 select
、 textarea
块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
常见的块级元素有 div
、ul
、ol
、 li
、 dl
、 dt
、 dd
、 h1
、 h2
、 h3
、h4
、 h5
、h6
、p
. width
et height
. ; propriétés liées au remplissage
. border
. marge
. box-sizing
box-sizing
définit le navigateur Comment faut-il calculer la largeur totale et la hauteur totale d'un élément. 🎜content-box
(valeur par défaut), qui est le modèle de boîte standard, width : 100px
fait référence au contenu zone Il fait 100px de large. content(100px)
+ padding
+ border
border-box
, qui est le modèle de boîte alternatif (IE), width : 100px
fait référence à la zone de contenu + border La somme de + padding
fait 100px de large. content
+ padding
+ border
= 100px
🎜Quel que soit le modèle, la marge n'est pas prise en compte dans la taille réelle - bien sûr, cela affectera l'espace occupé par la case sur la page , mais ce qui affecte, c'est l'espace extérieur de la boîte. 🎜
affichage
display
de la boîte, tel que inline
ou block pour contrôler si la boîte est en ligne ou au niveau du bloc. display: flex
, sur un élément, le type d'affichage externe est block
, mais le type d'affichage interne Le type est changé en flex
. Tous les éléments enfants directs de la boîte deviendront des éléments flex
et seront disposés selon les règles de la boîte flexible (Flexbox
). 🎜🎜Il existe également une valeur spéciale -- display: inline-block
, qui fournit un état intermédiaire entre inline et block. Ceci est très utile dans les situations suivantes : aucun retour à la ligne ne se produit, mais la largeur et la hauteur peuvent être définies, ce qui signifie que certains effets au niveau du bloc sont obtenus : 🎜largeur
et l'attribut height
prendra effet. padding
, margin
et border
repoussent les autres éléments. block
(éléments au niveau du bloc). 🎜a
, b
, span
, img
, strong
>, sub
sup
, bouton
, entrée
, étiquette
, select
, textarea
🎜div
, ul
, ol
, li
, dl code>, <code>dt
, dd
, h1
, h2
, h3
, h4
, h5
, h6
, p
🎜Format (par défaut), les éléments en ligne ne seront pas renvoyés à la ligne, mais les éléments au niveau du bloc le seront.
Sur le contenu (par défaut), les éléments en ligne ne peuvent contenir que des données et d'autres éléments en ligne. Les éléments de niveau bloc peuvent contenir des éléments en ligne et d'autres éléments de niveau bloc.
Sur les attributs :
largeur
et hauteur
ne sont pas valides (la hauteur de ligne peut être définie), width
和 height
设置无效(可以设置 line-height),padding
)、外边距(margin
) 和 边框(border
) 在 上下方向 不会对其他元素产生影响。width
和 height
属性可以发挥作用,padding
)、外边距(margin
) 和 边框(border
) 会将其他元素从当前元素周围“推开”块的上外边距(margin-top
)和下外边距(margin-bottom
)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为 边距折叠。
2 个或多个毗邻的的普通流中的块元素垂直方向上的 margin 会折叠
创建了 BFC
的元素 和它的子元素/兄弟元素不会发生折叠
设置 padding
/ border
,一些具体的场景:
父元素的 margin-top
和子元素的 margin-top
发生重叠。
发生重叠是因为它们是相邻的,所以我们可以通过这一点来解决这个问题。我们可以为父元素设 border-top
、padding-top
值来分隔它们。
高度为 auto
的父元素的 margin-bottom
和子元素的 margin-bottom
发生重叠。
发生重叠一个是因为它们相 邻,一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottom
、 padding-bottom
来分隔它们,也可以为父元素设置一个高度,max-height
和 min-height
也能解决这个问题。
是没有内容的元素,自身的 margin-top
和 margin-bottom
发生的重叠。
我们可以通过为其设置 border
、padding
或者高度来解决这个问题。
BFC
的因素float
(除了 none)overflow
(除了 visible)display
(table-cell / table-caption / inline-block)position
padding
), des marges (margin
) et des bordures (border
) n'affecteront pas les autres éléments dans les directions width
et height
peuvent jouer un rôle, 🎜🎜Padding (padding
), extérieur margin Spacing (margin
) et border (border
) "pousseront" les autres éléments loin de l'élément actuel 🎜🎜🎜🎜🎜🎜🎜🎜margin-top
) et la marge inférieure (margin-bottom
) du bloc sont parfois fusionnées (réduit ) ) est une marge unique dont la taille est le maximum de la marge unique (ou d'une seule d'entre elles si elles sont égales), un comportement appelé 🎜effondrement de la marge🎜. 🎜BFC
🎜 et ses éléments enfants/éléments frères ne seront pas pliés🎜🎜🎜🎜Définir padding
/ border
, quelques scénarios spécifiques : 🎜🎜🎜🎜La margin-top
de l'élément parent chevauche la margin-top
de l'élément enfant . 🎜🎜Le chevauchement se produit parce qu'ils sont adjacents, nous pouvons donc résoudre le problème en utilisant cela. Nous pouvons définir les valeurs border-top
et padding-top
pour l'élément parent afin de les séparer. 🎜🎜🎜🎜Le margin-bottom
de l'élément parent avec une hauteur auto
chevauche le margin-bottom
de l'élément enfant. 🎜🎜Un chevauchement se produit parce qu'ils sont adjacents, et l'autre parce que la hauteur de l'élément parent n'est pas fixe. Par conséquent, nous pouvons définir border-bottom
et padding-bottom
pour que l'élément parent les sépare, ou nous pouvons définir une hauteur pour l'élément parent, max- height
et min-height
peuvent également résoudre ce problème. 🎜🎜🎜🎜 est un élément sans contenu, où ses propres margin-top
et margin-bottom
se chevauchent. 🎜🎜Nous pouvons résoudre ce problème en définissant border
, padding
ou sa hauteur. 🎜🎜🎜🎜🎜BFC
🎜🎜🎜🎜float
(sauf aucun)🎜🎜 overflow
(sauf visible) 🎜🎜display
(table-cell / table-caption / inline-block) 🎜🎜position
(sauf statique / relatif) 🎜🎜 🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜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!