css属性之overflow深入理解

最新推荐文章于 2023-10-22 16:47:19 发布

yingzizizizizizzz

最新推荐文章于 2023-10-22 16:47:19 发布

阅读量553

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/65443739

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.如果overflow-x，overflow-y其中一个被赋值visible，另一个被赋值为其他（auto，hidden，scroll，inherit），那么被赋值visible的会自动重置为auto。

如果overflow-x，overflow-y值相同，等同于overflow。

2.overflow作用的前提
（1）非display:inline水平
（2）对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
（3）对于单元格td等，还需要table为tabke-layout:fixed状态才行。

3.<html><textarea>天生有overflow：auto/overflow：scroll属性
无论什么浏览器，默认滚动条都来自《html》而不是<body>

4.body/html与滚动条-js与滚动高度
Chrome：document.body.scrollTop padding-bottom高度填充正常
其他:document.documentElement.scrollTop padding-bottom高度填充缺失

5.水平居中跳动问题的修复
（1）html{overflow-y:scroll;}
（2）.container{padding-left:calc(100vw-100%);}只有IE9+以上浏览器能行
100vw-浏览器宽度，100%-可用内容宽度

6.overflow与BFC（块级格式化上下文）
(1) 清楚浮动影响
（2）避免margin穿透问题（层叠问题）
（3）两栏自适应布局

7.overflow失效（因为有absolute）
原因：绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候。（包含块指：含有position：relative/absolute/fixed声明的父级元素，没有则body元素）

8.如何避免失效？
（1）overflow元素自身为包含块
（2）overflow元素的子元素（这个子元素为absolute的父元素）为包含块
（3）任意合法transform声明档综艺包含块（新的）

9.resize拉伸
resize可以拉伸元素尺寸
text-overflow：ellipsis 文本溢出省略号表示必须要用overflow：hidden才有效果

10.overflow与锚点
锚点定位--改变容器的滚动高度
1.容器可滚动
2.锚点元素在容器内

锚点定位触发
1.url中锚链与锚点元素
2.可focus锚点元素处于focus状态

锚点定位作用
1.快速定位
2.overflow选项卡

.box{overflow:hidden;}

<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="link">
<a href="#one" class="click">1</a>
<a href="#two" class="click">2</a>
<a href="#three" class="click">3</a>
<a href="#four" class="click">4</a>
</div>