温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中什么是外边距折叠

发布时间:2021-08-26 14:32:31 来源:亿速云 阅读:103 作者:小新 栏目:web开发

这篇文章给大家分享的是有关css中什么是外边距折叠的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

在 CSS 中,所有的元素都被一个个的 “盒子(box)” 包围着,我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。

什么是 CSS 盒模型?

在 CSS 中,盒模型(box model)是在设计和布局时使用。

盒模型的定义可以分成这几部分:

  • Content box: 这个区域是用来显示内容,大小可以通过设置 widthheight.

  • Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。

  • Border box: 包裹内容和内边距。大小通过 border 相关属性设置。

  • Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

css中什么是外边距折叠

块级盒子完整地应用了 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,它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不发生换行,但可以设定宽度和高度,也就是说实现了块级的部分效果:

  • 设置 widthheight 属性会生效。

  • padding, margin, 以及 border 会推开其他元素。

行内元素 / 块级元素

HTML4 中,元素被分成两大类: inline (内联元素) 与 block (块级元素)。

1. 什么是行内元素?

一个行内元素只占据它对应标签的边框所包含的空间。

常见的行内元素有 abspanimgstrongsub supbuttoninputlabelselecttextarea

2. 什么是块级元素?

块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

常见的块级元素有 divulollidldtddh2h3 h4h5 h6h7 p

3. 区别?

  • 格式上(默认情况),行内元素不会换行,而块级元素都会换行。

  • 内容上(默认情况),行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。

  • 在属性上

    • widthheight 属性可以发挥作用,

    • 内边距(padding)、外边距(margin) 和 边框(border) 会将其他元素从当前元素周围“推开”

    • widthheight 设置无效(可以设置 line-height),

    • 内边距(padding)、外边距(margin) 和 边框(border) 在 上下方向 不会对其他元素产生影响。

    • 行内元素

    • 块级元素

css中什么是外边距折叠

外边距(margin)折叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为 边距折叠

什么情况才会出现

2 个或多个毗邻的的普通流中的块元素垂直方向上的 margin 会折叠

  • 毗邻: 是指没有被非空内容、padding、border 或 clear 分隔开

  • 垂直方向: 是指只有垂直方向的 margin 才会

如何解决?

  • 创建了 BFC 的元素 和它的子元素/兄弟元素不会发生折叠

  • 设置 padding / border ,一些具体的场景:

    • 父元素的 margin-top 和子元素的 margin-top 发生重叠。

      发生重叠是因为它们是相邻的,所以我们可以通过这一点来解决这个问题。我们可以为父元素设 border-toppadding-top 值来分隔它们。

    • 高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。

      发生重叠一个是因为它们相 邻,一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottompadding-bottom 来分隔它们,也可以为父元素设置一个高度,max-heightmin-height 也能解决这个问题。

    • 是没有内容的元素,自身的 margin-topmargin-bottom 发生的重叠。

      我们可以通过为其设置 borderpadding 或者高度来解决这个问题。

触发 BFC 的因素

  • float(除了 none)

  • overflow(除了 visible)

  • display(table-cell / table-caption / inline-block)

  • position(除了 static / relative)

感谢各位的阅读!关于“css中什么是外边距折叠”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI