- 综合排序
- 最热优先
- 最新优先
- 来自专栏李蔚蓬的专栏
文档流code案例小汇【处理高度塌陷】
clear mdn文档 clear只是清除浮动，不能缓解【高度塌陷】 https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear 值 none none left right both 解决塌陷 https://codesandbox.io/s/funny-water-4oh3p7?file=/index.html <! IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>高度塌陷
65030编辑于 2023-01-12 - 来自专栏Coxhuang
CSS Margin塌陷（重叠）
CSS Margin塌陷（重叠） #1 说明 #1.1 什么是Margin塌陷 在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的 margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。 注意: 两个盒子的垂直外边距完全接触才会触发 #1.2 塌陷情况有几种? ---- 子标签设置 margin-top: 10px
<div class="box" style="height: 300px;width: 300px;background-color 子盒子和父盒子之间并没出现期望的<em>10</em>px间隙而是父盒子与子盒子一起与页面顶端产生了<em>10</em>px间隙（即父级盒子往下<em>塌陷</em>了<em>10</em>px）。2.1K30发布于 2020-11-09来自专栏WflynnWebcss面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用
浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局 当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 为什么要清除浮动？ 高度塌陷 如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。 #000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px #000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用
<div class1.6K20编辑于 2022-10-28来自专栏前端二次元巧用浮动布局、解决高度塌陷实例分享|技术创作特训营第一期
浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。浮动元素的特性包括：浮动元素会脱离标准流(脱标)。浮动的元素会一行内显示并且元素顶部对齐。 高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。 当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。 【创作提纲】1、浮动的特征和绝妙的应用场景2、overflow: hidden样式的清除浮动，解决高度塌陷3、flex布局4、代码更加优雅！
58511编辑于 2023-08-13</body> </html> 此时运行结果 可以看到子元素并没有离父元素上边距10px 而是使整个父盒子塌陷了10px 这里的解决办法有 给父元素设置border-top 给父元素定义内边距 父元素加overflow:hidden 需要注意的是浮动的盒子不会存在外边距合并塌陷的问题来自专栏生如夏花绚烂外边距合并嵌套块元素塌陷问题
f">
1.1K20编辑于 2022-09-08来自专栏林德熙的博客win10 uwp 如何修改 Flyout 的宽度或高度
可以通过两个方法修改 Flyout 的宽度或高度 第一个方法是通过修改 Flyout 的里元素宽度和高度的方式，如下面代码 <AppBarButton Margin="<em>10</em>,<em>10</em>,<em>10</em>,<em>10</em>"> ListView 设置一个宽度，这样默认就会使用这个元素的宽度作为 Flyout 的宽度，我将代码放在 github 欢迎小伙伴访问 如果此时的窗口的大小变小了，那么 Flyout 也会自动修改自己的宽度和高度 ，可以使用FlyoutPresenterStyle属性修改 <AppBarButton Margin="<em>10</em>,<em>10</em>,<em>10</em>,<em>10</em>"> <AppBarButton.Flyout> </Flyout> </AppBarButton.Flyout> </AppBarButton> 上面代码通过 MinWidth 设置了最小需要的宽度，如果想要设置高度相信小伙伴也知道如何修改
2.2K00发布于 2020-03-25来自专栏前端Q理解 margin 塌陷和 margin 合并及其解决方案
今天我们来总结两个不起眼的小问题：margin塌陷和margin合并 margin塌陷 什么是margin塌陷 我们先来看个例子，然后引出什么是margin塌陷 需求：在父子元素中，通过marigin让父元素相对左边及顶部各距离 这种现象被称之为margin塌陷。但很多人可能都不太理解，为什么叫它塌陷？ 其实你可以这样理解，如上述例子，原本子元素要距离父元素顶部50px，现在没有了，也就是父元素的顶棚对子元素来说没有作用，相当于没有，相当于塌陷下来了。所以叫margin塌陷。 但是有的时候我们不希望有这样的问题，那我们如何解决margin塌陷的问题呢？ 答案是，我们可以通过触发BFC来解决！那是什么是BFC呢？ 因为margin合并和margin塌陷不一样，margin塌陷只添加了CSS，margin合并除了添加CSS，还修改了HTML结构。
1.2K40发布于 2021-07-27来自专栏刷题笔记4-12 求二叉树高度 (10 分)
本文链接：https://blog.csdn.net/shiliang97/article/details/102699174 4-12 求二叉树高度 (10 分) 本题要求给定二叉树的高度。 BinTree; struct TNode{ ElementType Data; BinTree Left; BinTree Right; }; 要求函数返回给定二叉树BT的高度值
68710发布于 2019-11-07来自专栏前端面试秘籍编程篇(010)-如何解决数组塌陷问题
什么叫数组塌陷？ 一个数组在进行删除数据单元操作的时候，删除掉这个单元之后，后面的数据单元会自动的补充的这个位置上来，造成数组长度的减少，这种情况被称之为数组塌陷。 如何解决数组塌陷问题呢？
52810编辑于 2022-05-12来自专栏pangguomingdiv 自适应高度 自动填充剩余高度
方案1： Html：
CSS： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: re头部DIV下部DIV6.5K40发布于 2018-03-07来自专栏全栈程序员必看overflow:hidden作用能治住塌陷_html溢出隐藏代码
，高度由随内容增加自适应高度。 当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 ，下面的元素会顶上去，造成页面的塌陷。 因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。 父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下： /*css样式*/ <style type="text/css"> .box{
2.7K30编辑于 2022-11-15来自专栏燧机科技-视频AI智能分析桥梁塌陷边坡落石识别系统
一、引言 我国山区公路桥梁占比超55%，边坡落石、塌陷、泥石流等地质灾害年均发生超1800起（《2024年全国交通基础设施安全蓝皮书》）。 不规则岩石）、背景复杂（植被/阴影干扰）、远距离小目标（＞50米落石）”挑战优化模型：数据集构建：采集70000张边坡实景图像（含晴天/暴雨/夜间场景），标注“落石（直径5-50cm）、桥梁裂缝（宽度0.1-10cm （三）低延迟联动预警逻辑 系统采用“边缘优先”策略，所有分析指令本地执行：YOLOv11检测到灾害目标（置信度＞0.85）→ 提取ROI区域并缓存连续10帧； CNN模型判定风险等级（概率＞0.9）→ 边缘节点0.6秒内触发现场情报板+喇叭告警； 同步将灾害记录（含10秒短视频+传感器数据）通过MQTT上传云端，实测平均端到端延迟1.0秒。 、中型落石）：LED屏显示风险等级+记录异常日志； 应急响应：值班人员通过APP查看实时画面与处置建议（如“启动交通管制”），处置后标记“已闭环”，形成“监测-研判-预警-处置-复核”闭环（处置时长≤10
34810编辑于 2025-12-31来自专栏全栈程序员必看关于ViewPager高度自适应（随着pager页的高度改变Viewpager的高度）
viewpager的高度。 解决了冲突问题，但你会遇到这样一个棘手的问题：所有viewpager中的fragment都是那个最大的高度，如果你的fragment中view的高度很小的话，或者view的高度过大的话，会导致自身或者其他 ，从代码中可以看出在调用resetHeight（）方法中传入实参current后，viewpager的高度会变成你传入实参对应下标的fragment的高度，那么在哪里调用这个方法呢？ （ 这是因为高版本中viewpager有改动，并不知道有什么改动，觉得是预加载的改动）对的，高度不对应，就是你viewpager中的fragment不是自己本身的高度，可能是其他fragment的高度 fragment的高度，（因为预加载到第三个）第一你们第二个fragment的高度是你 第一个fragment的高度（预加载到第一个），以此类推。
6.1K30编辑于 2022-09-15来自专栏全栈程序员必看iframe的高度自适应_div自适应高度
如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。 而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。 方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。 如果层展开，则会撑高页面高度。 可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。
9.3K40编辑于 2022-11-04来自专栏乐行僧的博客推导B树的最大高度和最小高度得出B树的高度范围
前提条件：n>=1，则对于任意一棵包含n个关键字、高度为h、阶数为m的B树。 一、最小高度： 对于任意树类型的数据结构，如果其每层节点能够分布的足够满，其高度也会随之变得足够的低。 代表向上取整)： //根节点 儿子节点个数[2, m] 关键字个数[1, m-1] //非根节点 儿子节点个数[ceil(m/2), m] 关键字个数[ceil(m/2)-1, m-1] 为了使得B树高度最低 ，也就是每层的节点数达到最大，看如下的计算过程： 二、最大高度： 要使得B树的高度达到最大，也就意味着在每个节点中，关键字的个数达到最小，这样在容纳相同个数的关键字的B树中，其高度可以达到最大。 有了上边我们对最小关键字大小把控，下面来推到B树的最大高度： 总结： 由一和二可知，通过寻找B树的两种极限的存在，推出B树的高度范围为：logm(n+1)<= h <=log(ceil(m/2
5K10编辑于 2022-02-24来自专栏Devops专栏盒模型使用margin相关技巧及解决margin-top塌陷问题
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 margin-top 塌陷 在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置 这就是传说之中的margin-top塌陷现象。 那么怎么解决呢？
1.9K20发布于 2019-05-31来自专栏全栈程序员必看页面的高度设置_word页面高度在哪设置
100%}；另外，其他的容器也需要设置height:100%才能达到预期的目的 问题2： ie6下table在table-layout: fixed下，行高不能自动充满 解决：将需要自动充满的行高的高度设置为 100%，即height=100% 问题3：设置doctype后table内部的div高度100%不好使 解决：在这种模式下，需要用具体的高度值进行设置，目前未找到其他方法 发布者：全栈程序员栈长，转载请注明出处
3.6K20编辑于 2022-09-19来自专栏前端资源根据获取内部元素的高度，设置iframe的高度
iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。 下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById
12.7K20发布于 2019-11-13来自专栏腾讯高校合作10小时训练数据打造多语种语音识别新高度
condition）和非受限条件（Unconstrained condition）两个赛道，前者只能使用组委会提供的10小时标注语音识别数据，后者可以使用组委会提供10小时受限数据之外的数据。 受限系统 由于受限系统只提供10小时训练数据，我们采取的主要方案还是语音领域使用较多的Hybrid HMM架构。 但不幸的是，在10小时这个量级上，10种语言总共只有100小时。和之前我们在NIST OPENKWS评测中得到的结论不同，在这个规模和量级下，多语言瓶颈特征对于系统提升不大。 在此次比赛的10个小语种里，除了索马里语我们采用LDC-2018T1作为语言模型训练外部语料外，其他9种语言均可以在对应的IARPA Babel包中获得对应数据。 初步实验来看，这种口音迁移方法对于10h 下的Halh Mongolian有显著提升，WER相对基线下降相对15%左右。 ?
2.1K10发布于 2021-01-07来自专栏从零开始学 Web 前端textarea内容自动撑开高度，实现高度自适应
但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出丑陋的滚动条。 然后有些时候，为了用户体验，我们需要让它的高度随着文本内容的高度而动态变化。 发微博的输入框会检测输入内容的高度，如果超出的预设的高度，会随着文本的高度的增加而增加，当文本高度减少的时候，文本框的高度也会随着减少。 今天，就来尝试自己实现这个功能。 实现思路 方法一 首先想到的方法就是通过js检测文本的高度，然后动态设置文本框的高度。 这是我的第一想法，也是最容易实现的想法。 具体思路：当出现滚动条的时候，文本的实际高度就是**scrollHeight**，我们只需要设置文本框的高度为内容的**scrollHeight**即可。 代码实现： <! ，那么 textarea 的高度自然就是其中文字内容的高度了。
31.1K50发布于 2021-07-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号