发现

父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小。

代码：

默认效果：

给父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; ：

（三者效果除了scroll包含上下滑块，在这里使用表达意思一致，选其一使用overlay）

效果

总结

可以看出，父元素设置 overflow: overlay; 属性后，子元素超出的部分以滑块的形式包裹住了，但是父元素却被撑开了，使用F12开发者模式观察下，显示父元素的宽高还是200px * 200px，没有变化，再对比上动图滑动的效果发现：父元素只是被撑开了，但是实际的大小还是原来的大小，只是样子上被撑大成了子元素同样的尺寸，通过父元素里面的文本排列也可以看出，虽然宽看着变长了，但是文本内容排列还是按照原来 200px 来的。

只能说，这算是一个特性吧，目前在实际使用中还没有看到此特性带来的负面影响

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小相关推荐

深入理解CSS之如何使子元素撑宽设置了 block 的父元素
深入理解CSS之如何使子元素撑宽设置了display: block; 的父元素先写一个模板,晚点再吐槽吐槽实现原理与更多支持的属性不想使父级的块属性消失怎么办这种属性规则有什么作 ...
解决vue项目中@mousemove 事件子元素触发了父元素事件
在Vue项目中使用@mousemove事件从$event中获取x与y轴时 , 如果绑定此事件的元素内还有别的子元素那么同样会触发mousemove事件 , 但是$event.target会是这个子元素 ...
子元素设置fixed层级zindex对比
两个设置有定位属性的父元素,其子元素都是使用fixed,虽然fixed定位是根据浏览器窗口定位的,但是两个子元素之间的层级关系zindex的对比是根据父元素进行对比的,即使某一个子元素的zindex设 ...
html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...
ios滚动条影响父页面 vue_父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案...
在使用 vu围幸业很例站闪以近着好务多如宽动为近着好edraggable 做拖拽效果时,因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我 ...
父元素浮动子元素会浮动吗_为什么quot;overflow:hiddenquot;能清除浮动的影响
来源 | https://www.jianshu.com/p/7e04ed3f4bea 我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高 ...
兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素...
IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...
当子元素用position:relative;时，父元素的overflow:hidden;在ie中失效的解决办法
当子元素用position:relative;时,父元素的overflow:hidden;在ie中失效的解决办法: 给父元素也加上position:relative; 到现在也不知道为什么会出现这样的 ...

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小

发现

效果

总结

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小相关推荐

最新文章

热门文章

父元素设置overflow: overlay； 或 overflow: scroll； 或 overflow: auto； 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小

发现

效果

总结

父元素设置overflow: overlay； 或 overflow: scroll； 或 overflow: auto； 如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小相关推荐

最新文章

热门文章

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小

父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小相关推荐