CSS-overflow特性及总结

来源：互联网发布：手机性能测试软件编辑：程序博客网时间：2024/05/19 10:08

1. overflow-x与overflow-y

如果两值不同，其中一值为visible，另一值为 hidden、scroll、auto，则visible被重置为auto，自动重置。所以给一个宽高都大于容器的内容div设置overflow-x:hidden; 会使得其x方向隐藏，y方向出现滚动条。

2. 滚动条一般17px。

3. 如果设置内容器宽度为100%，可能出现滚动条，如果想自适应，最好不要加width属性。

4. 默认滚动条来自HTML元素。

5. 获取滚动高度

var st=document.documentElement.scrollTop||document.body.scrollTop;

6. overflow会有padding-bottom缺失现象，会导致滚动高度不同。

7. 滚动条宽度

占用容器宽度，容器宽度- 子元素.clientWidth=滚动条宽度

8. 如果使用overflow:auto ，可能出现水平居中container因为滚动条的出现而跳动。解决方案如下：

（1） html{

overflow-y:scroll;

}

(2) .container{

padding-left: calc(100vw-100%);

}

其中 100vw 指浏览器宽度，100%指可用内容宽度

9. 可以触发BFC（块级格式化上下文）的overflow值：auto、hidden、scroll。

10. 特性

（1）内部浮动无影响（除visible）

(2)避免margin穿透问题（除visible）

（3）实现两栏自适应布局

这样实现两栏自适应布局好处：浮动元素的兄弟元素clear:both;不受影响

上图中，给蓝色div设置clear:both 狗狗图片不会向下移动，因为蓝色div overflow

:hidden 以后BFC化，不受外部浮动元素影响。这样实现的两栏自适应布局更加健壮。

都不好，推荐在浮动元素上写两元素间距

11. overflow失效

当overflow元素在绝对定位元素与其有定位的父元素或者body之间时，overflow属性失效。

如何避免overflow元素失效：（1）overflow元素自己作为有定位的那个父级元素；（2）overflow的子元素作为有定位的父级元素（3）任意合法transform声明作为有定位的父级元素。

12. overflow与其他属性配合使用

13. overflow选项卡技术

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test absolute 流体布局</title><style> .rightphoto{      float:left;    }   .leftdiv{      background-color: #DDD;      /*padding-left: 200px;*/      overflow: hidden;    }   .leftphoto{      line-height: 22px;       padding-bottom: 6px;       font-size: 14px;          }    .leftp{      clear:both;    }</style></head><body>    <a href="#" class="rightphoto"><img src="P_00.jpg" alt="hello"/></a>  <div class="leftdiv">    <p class="leftp">12月25日为本月最后一个周五，按照惯例，图书馆将进行内部学习。12月25日（周五）下午闭馆，晚上5点照常开放，望广大师生读者周知。</p>    <img src="P_01.jpg" class="leftphoto" alt="hi"/>  </div></body></html>

0 0