文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

, 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方 ; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过...: -100px; 11、多个盒子堆叠次序问题 在 网页布局 中 , 如果 多个盒子都设置 绝对定位 , 那么这些盒子会堆叠在一起 ; 设置了定位样式的盒子会压住标准流盒子 , 如果有多个设置定位的盒子..., 后面的盒子会压住前面的盒子 ; 下面的代码中 , 三个盒子都设置了绝对定位 , 先设置了蓝色盒子 , 然后设置了 红色盒子 , 最后设置了 紫色盒子 ; 最终展现出来的样式是 紫色盒子 压住了..., 没有塌陷 ; 示例 2 中 , 为子盒子设置了 上外边距 , 结果将 父盒子也带下来了 ; 使用传统方法解决外边距塌陷问题 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是..., 都显示滚动条 ; auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ; 效果参考 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式

1.6K10

【CSS】464- 5种 CSS 浮动和清除浮动的方法

1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认） 2、浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘...3、浮动的影响：对附近的元素布局造成改变，使得布局混乱 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌...建议：此方法是以前主要使用的一种清除浮动方法。 3、父级div定义height ? 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 优点：简单，代码少，容易掌握。...原理：同1，使用overflow:auto时，浏览器会自动检查浮动区域的高度。 优点：简单，代码少，浏览器支持好。 缺点：内部宽高超过父级div时，会出现滚动条。...建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。 5、父级div定义伪类:after和zoom ?

1.6K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    duilib里面隐含的一个可能递归的bug

    duilib的容器的滚动条是根据子控件来判断是否展示的。如果父控件可以根据情况在SetPos里面动态调整子控件的大小，在这个条件下，存在这样一种情况： 1.滚动条一开始不展示。...2.容器控件SetPos里面自动计算出子控件需要展示滚动条，ProcessScrollBar里面展示了滚动条并重新调用SetPos来重新计算子控件位置。...3.滚动条展示后，SetPos里面重新调整了子控件的大小，计算了滚动范围等，ProcessScrollBar里面发现新的子控件大小算出来的范围又不需要滚动条了，于是不展示滚动条，并再次调用SetPos来重新计算子控件位置...最终导致程序崩溃。...第二种需要自行修改duilib库源码，或者派生新的控件来处理，应该是没有什么问题的。这两种办法我都没有严格测试。请谨慎。

    72310

    css笔记 - 张鑫旭css课程笔记之 overflow 篇

    内容尺寸超出了容器尺寸的额限制 滚动条的宽度机制 滚动条会占用容器的可用宽度或高度 IE7/Chrome/FireFox(Win7)下都是17像素 滚动条与body/html关系 无论什么浏览器，默认滚动条均来自...所以，如果在单页应用中想要去掉页面的默认滚动条效果，只需要： html{overflow: hidden;} 没有必要设置body。因为页面滚动条不是作用在body上的。...、所以形成BFC的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了bfc的初衷，所以要清除浮动带来的影响。...position: absolute;元素脱离文档流。但是属于单个元素的自娱自乐。 display:inline-block；包裹性，无法自适应。...（形成bfc结界，与外界隔绝） 仅支持ie7+及现代浏览器 避免margin穿透/重叠问题（形成bfc结界，与外界隔绝） 两栏自适应布局 overflow与absolute 隐藏失效 即overflow

    3.3K10

    CSS 布局技巧 | 移动端 H5 滚动条深度解析，从触发逻辑到多端兼容

    改造进展相对顺利，因为项目用的antd组件，大部分内容在手机横屏模式下，可以正常展示。部分错位或超出的展示，调整也相对简单。唯独滚动功能，出现了兼容性问题。...在前端开发中，滚动条处理是一个常见但又复杂的问题。伴随着手机系统的多样化，不同手机系统的滚动行为上的差异成为开发者需要跨越的技术鸿沟。...本文将深入探讨移动端H5滚动条的触发逻辑、不同CSS属性的区别、兼容性问题及其解决方案，并提供一个完整的实现方案。希望通过本文，能够帮助开发者更好地理解和处理移动端H5滚动条的相关问题。...布局影响：滚动条占用固定空间，导致容器实际内容区域被压缩（例如水平滚动条占据高度，垂直滚动条占据宽度）。典型问题：在未溢出时，禁用状态的滚动条造成视觉干扰，且浪费屏幕空间。....scroller { scrollbar-width: none; }}3.5 100vh高度问题问题描述：在iOS设备上，使用height: 100vh;可能会导致滚动条显示不正确。

    29620

    CSS深入理解学习笔记之overflow

    兼容性： 　　　　①滚动条外观不同； 　　　　②宽度设定机制不同。 ? 　　　　因为IE7下width宽度计算为整400px，然而垂直滚动条占用了部分宽度，所以出现了水平滚动条。...想要去掉这个水平滚动条，只需要删除width:100%就可以了。 　　作用前提： 　　　　①非display:inline水平； 　　　　②对应方位的尺寸限制。...滚动条的宽度机制： 　　　　滚动条会占用容器的可用宽度或高度。 ?...水平居中跳动问题修复： 　　　　①html{overflow:scroll;}; 　　　　②.container{padding-left:calc((100vw - width) * .5);}——100vw...（2）锚点定位的本质 　　　　在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。 　　　　前提：①容器可滚动；②锚点元素在容器内。

    4.7K50

    【前端攻略--HTMLCSS】html 文档流的理解

    不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清楚掉了。 那么，这几种脱离文档的的定位机制包括哪些呢？...当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。 relative：相对定位。...结果，01脱离了文档流，完全不占空间，所以02顺势顶替了01原来的位置，结果02被01盖住了。 同理，absolute定位跟FLOAT一样，脱离了文档流，不再占原来文档流的空间了。...再举一个大家在日常经常遇到的问题来印证—高度自适应 反复想一想，高度自适应的原理其实就是这个： 　　这是b 　　了。既然没有空间可占，那就等于容器里没有东西，所以不撑开。解决办法是在黄色DIV的后面加个DIV，然后清除浮动。让他有空间可占，自然就撑开了。试试！

    2.6K20

    【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流 浮动 定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

    , 从上到下排列 ; 行内元素 多个公占一行 , 从有到右排列 ; 浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示...简介 在开发页面时 , 遇到下面的情况 , 父容器 没有设置 内容高度 样式 , 容器中的 子元素 设置了 浮动样式 , 脱离了标准流 , 高度会默认设置为 0 像素 , 这样就会导致各种显示混乱情况...; 为了应对上述情况 , 可以 使用 " 清除浮动 " 操作 ; 清除浮动 主要作用 : 解决 父容器盒子模型 因为 子元素 被设置为 浮动元素 导致 高度默认为 0 像素 的问题 ; 清除浮动 效果..., 在该父容器的 class 类型上 , 添加 clearfix 类型即可 , 如 : 使用上述方法 , 不会改变标签的结构 , 也不会出现隐藏移除元素的问题 ; 6、清除浮动 语法 - 使用双伪元素清除浮动 为 .

    49310

    【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

    一、固定定位概念语法 ---- 固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;...固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的 本质是一种 特殊的绝对定位 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;

    2.1K20

    对定位的深入理解与应用

    特点 不会像浮动一样脱离文档流，只是视觉上的效果，不会对其他元素产生影响 定位元素层级比层级元素高，所有定位层级相同： 定位的元素会覆盖在普通元素上。...**原因：**绝对定位的元素（即设置了 position: absolute; 的元素）相对于其最近的一个已定位的祖先元素进行定位。...overflow: scroll;：内容被剪裁，显示滚动条。 overflow: auto;：根据内容是否超出自动显示滚动条。...滚动属性（特别是 overflow: auto;）可以在元素内容超出容器时提供滚动条，使用户能够滚动查看全部内容，与粘性定位结合使用时，可以在固定位置时仍然允许内容的查看和操作。...视觉效果的实现： 元素的宽高决定了它在包含块中的占据空间，设置了宽高后，可以确保元素在包含块中的位置是确定的，从而实现精确的居中效果。

    32210

    【CSS3】css开篇基础（4）

    转换 浮动的盒子中间是没有缝隙的，是紧挨着一起的 浮动带来的问题 后续标准流元素的正常布局 一个元素浮动了，理论上其余的兄弟元素也要浮动。...一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。 这是因为浮动会脱标，导致不和标准流在一起排序了，这样就可能导致浮动和标准流发生重叠。...清除浮动 通常使用以下几种方法来清除浮动： 使用clearfix ：在父元素上应用一个clearfix类，这个类定义了伪元素清除浮动。...只不过视觉上发生了变化。...只有设置了定位的元素才能通过 z-index 控制其堆叠顺序，因为只有这些元素才能脱离正常文档流并具有层叠上下文。

    53110

    理解CSS布局和块格式化上下文

    [image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，并且容器元素不会影响兄弟元素的布局。...[image] 但事实上，float中的文字已经脱离文档，如果文档流文字过少，浮动元素就会溢出父元素边缘。...div上的边距之间没有内容，因此两者将会合并，因此段落最终与框的顶部和底部齐平。...overflow属性，但某些情况下我们不需要滚动条，此时滚动条就变成了这种方式的副作用，因此display有个新的属性flow-root可以在任何需要创建BFC场景下使用，它并且不会带来任何副作用。

    2.3K30

    有意思的水平横向溢出滚动

    ，就变成了水平的容器，图中鼠标没有在滚动条上容器的运动就是通过滚轮实现的。...当然，这样还有个非常严重的问题，如果容器内存在内容，那么就变成了这样： Oh，由于容器整体旋转了 90°，里面的内容当然也一起发生了旋转。我们需要解决这个问题。...内容反向旋转 90°，修复视角 这个也好解决，我们只需要重新构造下 DOM，将原本的内容再反向旋转 90° 一次。 当然，需要同时处理好旋转中心。...并且，通过设定以左下角为旋转中心 transform-origin: 0 0，再经过一次旋转，将滚动容器，和内容叠加在一起： 好，经过这一系列较为复杂的操作，我们就实现了内容适配旋转，给容器加上 overflow...完整的代码，你可以戳：CodePen Demo -- CSS-Only Horizontal Parallax Gallery 隐藏滚动条 当然，有个问题，这样滚动条就穿帮了。

    3K10

    【Qt】未添加scrollArea造成界面过大

    更深层的原因在于渲染机制的缺陷：未被滚动区域包裹的内容树，其尺寸计算会脱离视口约束。...这种 “无边界” 的渲染特性，本质上是对用户设备显示能力的误判。 二、用户体验的连锁反应：从功能障碍到认知负担 界面过大带来的直接后果是操作可用性的丧失。...例如金融类 APP 的交易记录页面，将 TableView 嵌入 UIScrollView 后，即使加载上千条记录，界面也能保持固定高度，通过滚动条实现内容导航。...四、设计流程的优化：从被动修复到主动预防 预防界面过大的最佳实践应融入开发流程的早期阶段。在原型设计阶段，Axure 的动态面板功能可模拟 scrollArea 效果，帮助设计师提前发现内容溢出风险。...未添加 scrollArea 引发的界面过大问题，本质上是技术实现与用户需求脱节的表现。从移动应用到桌面软件，滚动机制始终是界面可用性的基石。

    12600

    Linux Mint 19.2 “Tina”稳定版发布

    Linux Mint 团队已正式发布 Linux Mint 19.x 系列的更新 —— 代号为 “Tina” 的 19.2 稳定版本。...除此之外，还提供了 UI 方面的改进，例如现在支持对滚动条的配置进行设置，并且在应用程序菜单中对具有相同名称的程序显示添加的描述，以便用户可以在 GNOME 程序的 X-Apps 和 Deb 软件包的...Linux Mint 19 针对 Xfce, MATE 和 Cinnamon 这三个桌面环境版本都提供了一些独有的新特性，但大多数新特性对于所有的版本都是通用的，下面来看看有哪些变化。...改进了升级管理器中的内核管理 软件管理器可以获取“丢失”的 GPG 密钥 软件管理器可以扫描/删除重复的源 优化了 Muffin 窗口管理器，使用起来感觉“更平滑” Mint Menu 现在能够区分重复的应用程序...（例如，flatpak、snap） 新的滚动条设置 ISO 中包含新的“引导修复”工具 默认情况下启用“最近的文档” Blueberry 小程序可让用户更快地断开/连接配对设备 新壁纸 Mint GTK

    10.4K10

    接口测试平台代码实现45: 接口调试层异常处理

    仍然出在这个第三方的表格插件上，bug复现的情况是先切换到调试层的form-data或x-www...上，然后点击取消按钮，再打开就会出现显示错乱等状况。...这个问题会引起很多bug，考虑到我们去修复第三方的插件代价比较大，所以采用最简单粗暴的方式全部绕过去。 就是点击取消按钮后，进行一次页面的刷新，让所有控件都处于一个初始化的状态。...通过console可以看到，这个接口的数据中的请求方式为null： 而我们的目的是想让其定位到none 所以我们这里既可以在后端修复也可以在前端修复。...这里介绍一个简单的后端修复，就是在新建接口的函数中，给接口初始的请求方式设置称字符串的none，而不是不写。 删掉这个旧接口，再新创建的接口则可以正常显示了。...问题4: 当参数过多时，屏幕放不下，却又没滚动条： 这个问题是因我们这个调试弹层的显示位置脱离了文档流，所以自己很长，浏览器也不知道。

    45030

    Web - CSS3浮动定位与背景样式

    概述这篇文章主要介绍了 CSS3 中的浮动定位、背景样式、变形效果等内容。...BFC规范与浏览器差异BFC,(Box Formatting Content 块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。...定位脱离标准文档流的方法：浮动、绝对定位、固定定位。相对定位是不会脱离文档流的。固定定位固定定位只能以页面为参考点，没有子固父相这个性质，固定定位脱离标准文档流。...绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖。...值意义fixed自己滚动条不动，外部滚动条不动 local自己滚动条动，外部滚动条动scroll自己滚动条不动，外部滚动条动(默认值) 背景重复background-repeat属性用来设置背景的重复模式值意义

    29710

    TDesign 更新周报（2022年6月第3周）

    ，支持带有 offsetBottom 和 offsetTop 特性的位置定位Select:修复 t-option 异步加载问题修复分组为空未展示分组名称的问题优化虚拟滚动示例、修复 pagination... 分页数量宽度问题Dialog:修复普通对话框不脱离文档流的问题修复点击对话框后对话框会隐藏问题修复 modeless 模式下背景样式点击透传的问题修复 attach 挂载 showInAttachedElement...，选择之后直接关闭Bug FixesDialog: 修复取消按钮传递 Object 显示不正确的问题Checkbox: 修复外部样式类无法使用的问题详情见：https://github.com/Tencent.../tdesign-miniprogram/releases/tag/0.13.2Miniprogram for QQ 发布 0.0.2适配 QQ 小程序版本的组件库发布 0.0.2 版本已上线官网，目前处于...Bug Fixes修复退出登录之后重新登陆新增了空Tab的缺陷修复切换多标签Tab页时的告警问题详情见：https://github.com/Tencent/tdesign-vue-next-starter

    3.6K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券