css：overflow | 易学教程

注意点：

1.overflow-x,overflow-y, 当两者不同时，一方被设置为visible，另一个被赋值为hidden、scroll、auto，那么这个visible会被重置为auto

2.overflow前提：

（1）非display ：line

（2）对应方位的尺寸限制

（3）对于单元格td等，还需要设置table的table-layout:fixed才行

3.IE7，button按钮，文字越多，按钮的padding越大，添加css样式overflow:visible就正常了。

4.无论什么浏览器，默认滚动条都来自于html，而非body。表现为：body默认margin0.5em，而有垂直滚动条的时候，滚动条是紧靠右边的，没有0.5em的间距

5.IE7-,默认滚动条一直出现，效果类似overflow-y:scroll,(overflow-y在IE8+才支持)，IE8+则是默认overflow-y:auto。故去除页面默认滚动条的时候，html{overflow:hidden}就行。

6.JS获取滚动条的高度

Chrome：document.body.scrollTop

其它：document.documentElement.scrollTop

而这两者在很多版本的浏览器不一定是同时支持的

所以：滚动条高度=document.body.scrollTop||document.documentElement.scrollTop

7. overflow的padding-bottom缺失现象

html：<div class="box"><img src="1.jpg" class="imgContent"></div>

css：.box{width:400px;height:100px;overflow:auto;}

Chrome下：pdding-bottom为100px，且容器的scrollHeight为587

IE8+下pdding-bottom不起作用，且scrollHeight为489

8.滚动条占用容器的宽度和高度

html：<div id="box1"><div id="in">xxx</div></div>

css： #box1{width:400px;height:300px;overflow:scroll;}

JS:

var box1=document.getElementById("box1");
console.log(box1.offsetWidth+","+box1.scrollWidth+","+box1.clientWidth)
console.log(box1.offsetHeight+","+box1.scrollHeight+","+box1.clientHeight)

Chrome和IE8+一样

IE7下

9.overflow:auto存在隐患，原本和谐的布局，随着滚动条的出现可能会崩溃。

10.设置滚动条(IE忽略)

::-webkit-scrollbar{/*宽度槽*/
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb{/*拖动条*/
background-color: rgba(0,0,0,.3);
border-radius: 6px;
}
::-webkit-scrollbar-track{/*背景槽*/
background-color: #ddd;
border-radius: 6px;
}

11.BFC:块级格式化上下文，与外界隔离，内部无论怎样都不影响别人。

12.除overflow:visible外，都快触发BFC。用途：清除浮动影响、避免margin穿透、两栏自适应：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#main{
		background-color: #5CADAD;
		border: solid 10px #ddd;
		overflow: visible;
	}
	#in{
		float: left;
		margin: 10px 10px;
	}
	</style>
</head>
<body>
	<div id="main">
		<div id="in"><img src="panada.jpg"></div>
	</div>
</body>
</html>

如果overflow换成auto等，则效果如下，浮动不受影响，即上面说的BFC生成了。

但是IE6不支持

所以广为流传的清除浮动的css为

.clearfix{*zoom:1;}
.clearfix:after{content: '';display:table;clear: both;}

13.两栏自适应布局：

.cell{
    display:table-cell;width:2000px;
    *display:inline-block;*width:auto; 
}

来源：https://www.cnblogs.com/fushida/p/4622470.html

标签

overflow

css

css滚动条

auto

scrolltop

css样式