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

容易被误解的overflow:hidden

overflow:hidden并不隐藏所有溢出的子元素 对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁...div> div> div> 我简单截几个图给懒得打开demo的童鞋看一下： image.png image.png 在demo中，你可以看到绝对定位的元素被定位到了...而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。 理论依据 那么，这个原理到底是什么呢？...这就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军，他们不受日本的法律约束而受美国军法约束。...回到我的demo，overflow的元素位于相对定位的元素与绝对定位元素之间，因此根据规定它不能剪裁绝对定位的子元素。也就是说爷爷相对定位，老爸规定溢出隐藏，可是儿子是绝对定位元素。

3.9K110

css(2)

使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素的特点 display的none和visibility的hidden的区别：两者都可以隐藏元素，但是display将元素隐藏之后...1.10定位（position） 1.10.1static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。...注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。 1.10.3absolute（绝对定位，重要） 定义：相对于已经定位过得父标签再做定位。..."c3">回到顶部div> 脱离文档流： 浮动的元素、绝对定位、固定定位 不脱离文档流： 　　相对定位 1.10.5z-index #i2 { z-index: 999; }...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

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

    第141天：前端开发中浏览器兼容性问题总结（二）

    IE6 width为奇数，右边多出1px的问题 问题： 父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素 解决： 将宽度的奇数值改成偶数 12....IE6 子元素绝对定位的问题 问题：        父级元素使用padding后，子元素使用绝对定位，不能精确定位 解决：        在子元素中设置  _left:-20px; _top:-1px;...IE6-7 line-height失效的问题 问题：       在ie中img与文字放一起时， line-height不起作用  解决： 都设置成float 16. td自动换行的问题 问题： Table...除去滚动条的问题 问题：        隐藏滚动条 解决： 1、只有ie6-7支持 2、除ie6-7不支持 body{overflow:hidden} 3、所有浏览器...IE6 绝对定位的问题 问题： div style="position:relative;border:1px solid orange;text-align:center;"> div style

    2.5K21

    css属性及定位操作

    overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 定位(position) static(默认) static 默认值，无定位，不能当作绝对定位的参照物...，并且设置标签对象的left、top等值是不起作用的的。...注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

    3.2K50

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

    margin也可以定位 二、margin的百分比单位 margin: 10%; 普通元素的百分比margin都是相对于容器的宽度计算的 绝对定位元素的百分比margin是相对于第一个定位祖先元素的宽度计算的...3. margin重叠的计算规则 正正取大值 正负值相加：有正有负时，正负值相加得到的结果就是重叠的值 负负最负值: 重叠时，取绝对值最大的负值。...绝对定位元素非定位方位的margin值"无效" 　　比如某元素绝对定位，设置top，left方位值，但是再设置margin-right和margin-bottom，设置多大多小都是没用的。...示例 - 绝对定位元素非定位方位的margin值"无效" ? 代码： 不起作用，其实是对于元素的位移不起作用，但实际上对于元素占据的空间是起作用的。

    2.9K20

    对html与body的一些研究与理解

    ；其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。...前段时间看到百度的一道面试题，说什么透明层无论滚动与否都满屏显示，其实就是对和标签做一番手脚，两者高度100%显示，同时溢出隐藏（overflow:hidden），然后用一个div...而这个透明层就使用绝对定位且与这个div>平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。...关于body overflow隐藏 （新增与2019-03-01） 单纯如下body overflow是无法隐藏高度不足一屏的元素的，例如： body { height: 30px; overflow...，如果想要隐藏，需要设置html的overflow:hidden。

    2.5K30

    清除过的浮动

    要解答这个问题，我们得先说说CSS中的定位机制：普通流，浮动，绝对定位 （其中"position:fixed" 是 "position:absolute" 的一个子类）。...在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 绝对定位就不多说了，不在本文讨论范围之内，下回分解。...缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。...由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。 ...所以为了闭合浮动去改变全局特性，这是不明智的，带来的风险就是一系列的bug，比如firefox 早期版本产生 focus，截断绝对定位的层等等。

    1.1K20

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

    隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 ) 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置...摆放布局 , 没有任何 边偏移 的效果 ; 在 使用 定位 时 , 几乎不适用 静态定位 ; 6、相对定位 相对定位 是 盒子模型 相对于 其在 标准流中的位置 设置的 ; 如 : 盒子模型 在标准流..., 可以解决 外边距 塌陷问题 ; 15、元素显示与隐藏 控制 元素的 显示 与 隐藏 的样式有如下三种 : display visibility overflow 16、display 隐藏对象 为标签元素设置...; 18、overflow 隐藏对象 overflow 只能对超出部分隐藏代码 ; overflow 可设置的值 : visible : 子元素超出父容器的部分仍然显示 ; hidden : 子元素超出父容器的部分隐藏...样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客 ;

    2K10

    CSS笔记(15)

    display隐藏元素后,不再占有原来的位置(和绝对定位一样的特征). 后面应用及其广泛,搭配JS可以做很多的网页特效....visibility隐藏元素后,继续占有原来的位置(和相对定位一样的特征) 如果隐藏元素想要原来位置,就用visibility : hidden....如果隐藏元素不想要原来的位置,就用display : none 原图 隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么....但是如果有定位的盒子,请慎用overflow:hidden.因为它会隐藏多余的部分....下面做一个土豆网的案例 当鼠标经过时,显示遮罩层和播放图标 这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display

    1.4K10

    CSS第五天-定位

    天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示） visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置...宽度和margin：0 auto 定位元素 === left: 50% translateX(-50%) 溢出隐藏：overflow 默认值 overflow: visible 溢出部分溢出 overflow...，不能换行） text-overflow: ellipsis;（规定当文本溢出时，显示省略号来代表被修剪的文本） ---- 边框圆角：border-radius 让盒子四个角变圆润 数字+px 、百分比...input和img无法对齐 div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 使用line-height和vertical-align: middle

    3.5K40

    前端之CSS内容

    inherit 规定应该从父元素继承overflow属性的值 overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 6、定位（position...）  6.1 static 　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。...注意：position:relative  的一个主要用法：方便绝对定位元素找到参照物。...6.3 absolute（绝对定位） 　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...6.4 fixed（固定） 　　fixed：对象脱离正常文档流，使用top、right、bottom、left 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

    5.9K100

    wxss学习系列《一》定位（position），布局(Layout)

    今天就先来说说定位。 一.定位：position属性允许你对元素进行定位。 二.定位机制：有三种：普通流，浮动流，绝对定位。...六.clip：剪裁绝对元素定位。定义一个剪裁矩形，内容多出来的东西将根据overflow的值来处理。注意点：必须将position设置为absolute或者fixed的时候此属性才会生效 1.取值。...3.clear：指出了不允许有浮动对象的边。 4.visibility：是否隐藏，与display隐藏不同，visibility隐藏的时候保留元素占据的位置。...2.float 在绝对定位中不起作用。大多数企业网站布局都是以float来定位。 四.clear：该属性指出不允许有浮动对象的边。 1.取值：left，right，both，none. ?...hidden：设置隐藏（隐藏了也占位置）。collapse：隐藏表格的行或者列。 六.overflow：处理溢出内容的方式。 1.取值：visible，hidden，scroll，auto。 ?

    2.9K100

    前端知识点总结（html+css）（上）

    属性和alt属性的区别 alt属性为了给不能看到图片的人提供文字说明，图片加载失败时 title属性可以实现鼠标悬停时提示的内容 css篇 学习css重点就是清楚的了解布局，给你一个页面，你能一眼知道这个页面如何布局...visibilty:hidden //隐藏对应元素，在文档中仍保留位置 opacity：0 //隐藏元素，占位置，可添加事件 9. css中的overflow属性 scroll //必会出现滚动条...溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记...绝对定位(子绝父相) div class="father"> 这里是父容器 div class="child"> 这里是子容器 div> div> .father {...绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中) div class="center">这里是divdiv> .center {

    1.3K11

    【CSS3】css开篇基础（4）

    .parent { overflow: hidden; /* 或者 overflow: auto; */ } 这有个缺点，就是溢出的部分还会隐藏起来。...绝对定位 绝对定位不会保留原来的位置（脱离文档流），那后面盒子就会往上占了它的位置； 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位； 如果祖先元素有定位（可以是相对、绝对或者固定定位...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。...visibility:visible;元素可视 visibility:hidden; 元素隐藏 visibility隐藏元素后，继续占有原来的位置，该空间不变 overflow 属性的取值：...overflow: hidden; 内容溢出时将被隐藏，不会显示在元素框外部。还能消除内部浮动 overflow: scroll; 无论内容是否溢出，始终显示滚动条。

    73110

    一种离谱到极致的页面侧边栏效果探究

    其实效果大概是这样的： ? 而标题，也许是我当时看到这种效果时的真实感受。因为第一反应是：“还可以把page整体移出页面？” 发现：display动画的应用 整件事的起因是什么呢？...当然，这有很多种做法，比如：利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏...导致这个过程被触发的原因有很多：元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来，所以在我们看来是“突兀”的。...后来还是觉得这种方式需要涉及js对页面结构的改变，于是乎… 实现：如何实现文首展示的效果 这基于position定位是会“重合”的：在两个行内元素都设置了定位属性（但没有加top/left/bottom...，藏在内容白色背景后面 */ .z_two_page { width: 12rem; position: fixed; right: 0; top: 0; } 大概就是：什么也不干的情况下只展示box

    85120

    脱离文档流分析（转）

    这里我们可以这样理解：overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。...分别分析一下position的几个值 （1）static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 （2）relative 相对定位。...注意，即使不设置值同样起到了相对定位作用，其子孙级别标签使用position:absolute;时同样会起到定位效果，position：relative的另一个主要用法：方便绝对定位元素找到参照物。...（3）绝对定位 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层

    1.7K20

    十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）

    的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式 纯CSS绘制三角形 虚线框绘制技巧 卡券效果制作...隐藏文本的常用两种方法 表格边框合并 「1-1....）*/ -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/ line-clamp: 3; word-break: break-all; overflow:...负边距使用技巧」 ❝规律: 左为负时，是左移，右为负时，是左拉。...定位同时设置方位情况」 ❝规律: 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度 ❞ span{ border:1px solid red; position:

    81720

    浮动清楚浮动及position的用法

    > 定位（position） static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。...注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

    2.6K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券