首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我不明白为什么当div折叠时,div中的内容会被压缩

当div折叠时,div中的内容会被压缩是因为CSS中的盒模型属性导致的。

在CSS中,每个元素都被视为一个矩形的盒子,这个盒子由内容、内边距、边框和外边距组成。盒模型属性定义了这些部分的尺寸和位置。

当一个div元素被折叠时,通常是通过设置其display属性为none或者visibility属性为hidden来实现的。这样做会使div元素不再占据空间,从而导致其内部内容被压缩。

具体来说,当一个div元素被折叠时,其内部内容的尺寸会被压缩到0,但是内边距、边框和外边距仍然存在。这意味着,即使内容被压缩,div元素的边框和外边距仍然会占据一定的空间。

如果你希望在折叠div时同时隐藏其内部内容,可以使用CSS的display属性或者visibility属性来实现。display属性可以将元素完全隐藏,并且不占据空间,而visibility属性可以将元素隐藏,但仍然占据空间。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云CSS(云服务器):提供可扩展的云服务器实例,满足不同规模和业务需求。产品介绍链接
  • 腾讯云CDN(内容分发网络):加速内容分发,提高用户访问速度和稳定性。产品介绍链接
  • 腾讯云COS(对象存储):提供高可靠、低成本的云端存储服务。产品介绍链接
  • 腾讯云SCF(云函数):无服务器的事件驱动计算服务,帮助开发者更轻松地构建和管理应用程序。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

BuildAdmin02:前端架构布局和菜单栏折叠实现

这里明确一下需求: 实现logo和菜单 在点击图标,菜单和logo会进行折叠 封装图标组件 logo logo就是一个div,这个div主要由img、项目名称和图标构成。...菜单折叠功能 菜单折叠功能如下图所演示: 在点击logo旁折叠按钮,可以观察到4种变化: aside变窄,不再是260px 折叠按钮图标变化 logo折叠(消失) 菜单栏折叠,只剩图标 点击折叠按钮...在pinia定义了 menuWidth() 来计算宽度:menuCollapse为true,即菜单折叠,宽度是64;为false不折叠,宽度为menuWidth,即260。...2. logo折叠 使用vuev-if来控制logo展示,menuCollapse为true,则取反为false,即不展示img和div。...并且折叠,Icon使用fa-indent图标,展开使用fa-dedent图标,这样就实现了折叠与站看图片切换。

81141

margin-top失效

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 是属于这种情况 按照网上说法,就是这个现象了 两个层box1和box2,box1...这是网上解决方法(并不适用情况)http://developer.51cto.com/art/201008/222728.htm 本文向大家描述一下margin-top失效解决方法,margin-top...网上能找到两种比较靠谱解释: 1:“在CSS2.1,水平margin不会被折叠;垂直margin可能在一些盒模型中被折叠…” 2:第一个层浮动,而第二个没浮动层margin会被压缩,详见--...> 给box2设置margin-top,在FF下仅作用于父容器。...◆解决办法: 1.给父容器box加overflow:hidden;属性 2.父容器box加border除none以外属性 3.用父容器boxpadding-top代替margin-top 是这样解决

69560
  • 前端入门24-响应式布局(BootStrap)声明正文-响应式布局(BootStrap)

    对于这个 效果,主要想理清楚两点: 展开和折叠是怎么实现? 展开那些列表是如何实现?...所以,页面渲染后,其实有个 被 collapse 折叠起来了,此时页面上只呈现第二个 内容而已,这个 高度等样式由 navbar、navbar-dark、bg-dark...那么,点击完按钮后,第一个 为什么会被展开了呢?...显示区域逐渐变小时,布局从一行变成了两行,这就是响应式布局,来解释下为什么会有这个行为: 看看这两个区域代码: ......但显示区域逐渐缩小,进入 sm 范围,即 >= 576px ,此时,第一个 col-sm-8 生效,所以它占据 8 列,而第二个 仍旧是 offset-md-1 和 col-sm

    3.6K20

    由position属性引申关于css进阶讨论(包含块、BFC、margin collapse)

    div1和div2垂直距离由大margin决定,也就是div240px而不是二者之和60px。 其次,行内元素是会被折断宽度受到限制时候,它会自动移动到下一行。...在一个BFC,两个相邻块级盒子垂直外边距会产生折叠。即是在BFC相邻块级元素垂直边距会折叠(collapse)。...在BFC,每一个盒子左外边缘(margin-left)会触碰到容器左边缘(border-left)(对于从右到左格式来说,则触碰到右边缘), 即使存在浮动也是如此(尽管一个子元素内容区域会由于浮动而压缩...折叠结果: 两个相邻外边距都是正数折叠结果是它们两者之间较大值。 两个相邻外边距都是负数折叠结果是两者绝对值较大值。 两个外边距一正一负折叠结果是两者相加和。...同样BFC内部有浮动,为了不影响外部元素布局,BFC计算高度时会包括浮动高度。避免margin重叠也是这样一个道理。

    1.1K50

    BFC(块级格式化上下文)与常见布局方案

    普通流 (normal flow) 在普通流,元素按照其在 HTML 先后位置至上而下布局,在这个过程,行内元素水平排列,直到行被占满然后换行,块级元素则会被渲染为完整一个新行,除非另外指定...”块级盒子,都会为他们内容创建新BFC(块级格式化上下文)。...折叠结果按照如下规则计算: 1、两个相邻外边距都是正数折叠结果是它们两者之间较大值。 2、两个相邻外边距都是负数折叠结果是两者绝对值较大值。...3、两个外边距一正一负折叠结果是两者相加和。...BFC能包含浮动,也能解决容器高度不会被撑开问题。

    55730

    【CSS】410- 关于CSS盒子模型、BFC及其应用

    可以这样理解: IE盒模型盒子总大小就是 content 大小, padding 和 border 会被并进 content 内一起计算, content 将会被压缩. ?...Box垂直方向距离由margin决定,在一个BFC,两个相邻块级盒子垂直外边距会产生折叠。...BFC主要作用: 清除浮动 防止同一BFC容器相邻元素垂直方向外边距重叠问题 举例 1. 同一个 BFC 下两个块级元素之间外边距会发生折叠. ?...但它们之间距离却只有 100px, 并不是想象 (100 + 100)px. 这是因为它们之间外边距折叠了. 你可以这样理解, 只有一个外边距起作用了....会造成上图原因是因为灰色 div 被蓝色 div 所覆盖, 但文本不会被覆盖, 所以被强行压缩换行. 如果想要避免这种情况, 可以触发灰色 div BFC 特性. ?

    64520

    python测试开发django-188.Bootstrap折叠(Collapse)插件

    可以直接引用 bootstrap.js 或压缩 bootstrap.min.js 折叠(Collapse) 以使用带有属性链接href或带有属性按钮data-target。...(options) 将您内容激活为可折叠元素。...在可折叠元素实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.collapse Bootstrap 折叠类公开了一些用于挂钩折叠功能事件。...事件类型 描述 show.bs.collapse show调用实例方法立即触发此事件。 shown.bs.collapse 折叠元素对用户可见触发此事件(将等待 CSS 转换完成)。...hide.bs.collapse hide调用该方法立即触发此事件。 hidden.bs.collapse 对用户隐藏折叠元素时会触发此事件(将等待 CSS 转换完成)。

    3K50

    css面试点二:BFC(块级格式化上下文)+常见布局方案

    三种常见布局方案方案: 普通流 (normal flow) 在普通流,元素按照其在 HTML 先后位置至上而下布局,在这个过程,行内元素水平排列,直到行被占满然后换行,块级元素则会被渲染为完整一个新行...属于同一个BFC两个相邻Boxmargin会发生重叠(正常不设置浮动,两个块元素 margin重叠,仅仅是垂直方向,左右不是这个样子),会发生外边距合并,指的是两个垂直外边距相遇,它们将形成一个外边距...外边距折叠(外边距合并)计算方式 1、两个相邻外边距都是正数折叠结果是它们两者之间较大值。 2、两个相邻外边距都是负数折叠结果是两者绝对值较大值。...3、两个外边距一正一负折叠结果是两者相加和。...BFC能包含浮动,也能解决容器高度不会被撑开问题。

    50320

    复盘1

    1、为什么利用多个域名来存储网站资源会更有效?...sessionStorage用于本地存储一个会话(session)数据,这些数据只有在同一个会话页面才能访问并且会话结束后数据也随之销毁。...Cookie大小是受限,并且每次你请求一个新页面的时候Cookie都会被发送过去,这样无形浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。...这种合并外边距方式被称为折叠,并且因而所结合成外边距称为折叠外边距。 折叠结果遵循下列计算规则: 两个相邻外边距都是正数折叠结果是它们两者之间较大值。...两个相邻外边距都是负数折叠结果是两者绝对值较大值。 两个外边距一正一负折叠结果是两者相加和。 ? 示例 6.rgba()和opacity透明效果有什么不同?

    45120

    VueJS + Webpack 代码分割三种方式

    查看浏览器“网络”标签,发现下面这些文件被加载了: ?...关键一点是,build_1.js 并不会阻塞初始页面的加载。 2. 折叠之下 “折叠” 之下,是指页面初次加载,视图不可见部分。...用户通常会花费 1~2 秒来浏览可视区域,特别是第一次访问网站时候(可能更久),之后才开始向下滑动页面。这个时候,你可以异步加载剩余内容。 ? 在下面这个应用示例当中,考虑将折叠线放到报头下方。...只因为,这是一个很少内容演示应用;在真实应用里,大多数页面都需要折叠;因此,任意子组件 CSS 和 JS 文件,都可能会包含大量代码。 3....页面加载时候,它值为 false,模态框代码只有当它显示时候才会被加载。 最酷是,如果用户永远不打开这个模态框,他就永远不必下载这部分代码!

    2.5K10

    理解 Css 布局和 BFC

    在本文中,通过熟悉示例来解释什么是 BFC。然后说明 display 一个新值,只有当你理解了什么是 BFC 以及为什么需要它,它才有意义。...块格式化上下文(BFC)行为通过一个简单float示例很容易理解。在下面的示例有一个框,其中包含向左浮动图像和一些文本。...float示例 如果删除了一些文本,那么就没有足够内容来包围图像,而且由于浮动被从文档流脱离,所以边框会上升,并在图像下方,直到文本高度。 ?...这种合并外边距方式被称为折叠,并且因而所结合成外边距称为折叠外边距。折叠结果按照如下规则计算: 两个相邻外边距都是正数折叠结果是它们两者之间较大值。...两个相邻外边距都是负数折叠结果是两者绝对值较大值。 两个外边距一正一负折叠结果是两者相加和。 产生折叠必备条件:margin必须是邻接!

    1.4K00

    CSS进阶04-块格式化上下文BFC

    这里只讨论CSS2.2所列条件,当然CSS2.2root默认也会生成BFC(不过一直没找到文档出处,如果有找到同学还请不吝赐教),但是body默认是不生成BFC。 3....不过值得注意是此时内容为float-left块盒由于浮动脱离了标准流,此时不再与div2margin发生折叠,所以对于3.1折叠发生条件,应该至少还要加一个前提,就是相邻块级盒需要在标准流内。...就是说对于标准流块级非替换元素,如果其overflow最终计算结果为visible,那么高度只会考虑其在标准流子元素(比如,移动和绝对定位盒子是会被忽略,相对定位盒子只会考虑其未被定位前位置...此外,如果该元素有下外边距边缘低于该元素下内容边缘浮动子元素,那么高度将增大来包含那些边缘。只有参与本块格式化上下文浮动才考虑在内,比如,在绝对定位后代或者其他浮动浮动就不考虑。...[译]:BFC与IFC css3BFC,IFC,GFC和FFC 深入理解BFC和Margin Collapse 对BFC理解 深入理解BFC css3之BFC、IFC、GFC和FFC

    60030

    理解 CSS 布局和 BFC

    在本文中,通过熟悉示例来解释什么是 BFC。然后说明 display 一个新值,只有当你理解了什么是 BFC 以及为什么需要它,它才有意义。...如果删除了一些文本,那么就没有足够内容来包围图像,而且由于浮动被从文档流脱离,所以边框会上升,并在图像下方,直到文本高度。 ?...这种合并外边距方式被称为折叠,并且因而所结合成外边距称为折叠外边距。折叠结果按照如下规则计算: 两个相邻外边距都是正数折叠结果是它们两者之间较大值。...两个相邻外边距都是负数折叠结果是两者绝对值较大值。 两个外边距一正一负折叠结果是两者相加和。 产生折叠必备条件:margin必须是邻接!...一个笨笨码农,世界只能终身学习! 更多内容请关注公众号《大迁世界》!

    1.2K00

    小智在这3年开发遇到 CSS 问题及解决方案,有大佬帮他总结好了 !

    跟踪所有这些差异很困难,因此,整理了一些常见问题及其解决方案方便大家查看。 1.重置button和input元素背景 添加一个按钮,重置它背景,否则它会在不同浏览器中看起来不同。...: auto; } 事例源码:https://codepen.io/shadeed/pe... 3.添加 flex-wrap 对包含多个子元素使用 display: flex,如果元素过多,所有子元素会被压缩...使用伪元素 经常使用伪元素,它们为我们提供了一种创建伪造元素方法,主要用于装饰目的,而无需将其添加到HTML。...压缩或拉伸图像 在CSS调整图像大小时,如果宽高比与图像宽度和高度不一致,则可能会对其进行压缩或拉伸。...总结 里提到所有问题都是在前端开发工作遇到最常见问题,希望能对你们有些帮助。

    3.7K10

    知识整理之CSS篇

    区别在于: display: none;,会让元素完全从渲染树消失,渲染不占据任何空间。visibility: hidden;,元素仍存在渲染树,渲染仍占据空间,只是内容不可见。...可能原因: 使用import方法导入样式表 将样式表放在页面底部 有几个样式表,放在html结构不同位置 原理:样式表晚于结构性html加载,加载到此样式表,页面将停止之前渲染。...以上例子,A 和 B 之间 margin 折叠产生 margin,是6个相邻 margin 折叠结果。...一个元素在不同浏览器中有不同默认值,normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。...这个文件拥有详细代码说明并在Github Wiki中有进一步说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间差异,并且你可以更容易进行自己测试。

    1.6K20

    【前端】CSS : float

    注:一个元素浮动之后,从普通文档流脱离,然后向左或者向右平移,一直平移直到碰到了所处容器边框,或者碰到另外一个浮动元素。...疑问:box2和box3为什么不在一条水平线上?(为什浮动后有间隙?)...浮动元素和绝对定位元素外边距不会折叠。...对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素没有内容可以撑开其高度,这样父级元素height就会被忽略,这就是所谓高度塌陷。...然而,看似简单背后,往往“暗藏杀机” 为了方便看效果,为元素添加背景色 ? 遇到问题 文字内容很多时候,很健康。如果文字内容少点? 你以为结果是这样: ?

    2K20

    盒模型

    CSS 过程没有考虑到使用者会修改盒模型。...内容在限定区域放不下,渲染到父元素外面,就会发生这种现象。...负外边距并不常用,但是在某些场景下很实用,尤其是创建列布局时候。不过应当避免频繁使用,不然网页样式就会失控。 # 外边距折叠 顶部和/或底部外边距相邻,就会重叠,产生单个外边距。...这是用户代理样式表添加,但当前后叠放两个段落,它们外边距不会相加产生一个 2em 间距,而会折叠,只产生 1em 间隔。 折叠外边距大小等于相邻外边距最大值。...,防止它们折叠 使用 overflow:auto 防止内部元素外边距跟容器外部外边距折叠,这种方式副作用最小 如果容器为浮动元素、内联块、绝对定位或固定定位,外边距不会在它外面折叠 元素显示为

    1.9K20

    可视化格式模型-浮动

    浮动元素会缩短行框 由于浮动框并不在常规流,在该浮动框之前或之后创建非定位框垂直排列,就好象浮动框并不存在一样。然而,浮动框之后创建行框 会被缩短,比便为浮动元素 margin 框提供空间。...就是说,同一行左浮动元素和有浮动元素不能够有互相折叠现象。 <!...一个浮动框发生在两个margin折叠中间,浮动元素定位好像它有另一个空块级父框位于常规流。 第一句好理解,说是顶边不能超出包含块,跟左边右边不能超出一个道理。...后面的规则是说,浮动框处于两个发生margin折叠地方会被当作被包含在一个空块框,它上面和下面的margin会穿过它发生margin折叠它不存在。 <!...以上代码,3个 div 包含块是初始包含块。O 处于 A 和 B 中间,A和B在理论上应当发生margin 折叠。那么,发生了么? 6.

    1.2K100
    领券