您的位置：首页 > Web前端 > CSS

CSS-overflow特性及总结

2015-12-27 19:41 671 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS overflow 去浮动

相关文章推荐

新的分享

章节导航