简单的overflow

最新推荐文章于 2024-03-17 10:22:51 发布

許校长

最新推荐文章于 2024-03-17 10:22:51 发布

阅读量457

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/u014610535/article/details/39374537

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.前言

overflow属性的介绍

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2.问题

>#info溢出（#wrap盖不住#info）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	#wrap{
		width:1190px;
		height: 0;
		margin: 0 auto;
	}
	#info{
		height: 300px;
		background: #ff0;
	}
</style>
<body>
	<div id="wrap">
		<div id="info">
			
		</div>
	</div>
</body>
</html>

3.解决

>在#wrap上加上overflow:hidden；

4.用途

>顶部广告上，根据时间更换广告的高低。

>知识点：overflow，javascript的setTimeout

<关于setTimeout的方法，http://www.jb51.net/article/35535.htm有着详细介绍，这里就做简单说明。

1.　请用浏览器开启示范磁碟中的timeout1.htm, 这档桉有以下内容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范网页 </font> </h1> <p> </br>
<p> 请等三秒!

<script>
setTimeout("alert('对不起, 要你久候')", 3000 )
</script>

</body> </html>

>顶部广告的实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body,*{
		padding: 0;margin: 0;list-style:none;
	}
	.hide{
		display: none;
	}
	.show{
		display: block;
	}
	#topAd{
		margin:0 auto;
		width:1190px;
		height:0px;
		overflow: hidden;	//without this,this id will be of no use.
		}
	</style>
</head>
<body>    	
	<div id="topAd">
        <img  src='fix-rightbottom.gif' id="topAd-img" width="1190" height="300"/>
    </div>
	<div style="margin:0 auto;width:1190px;height:900px;background:#ff0;">

<script type="text/javascript">
	function adDownUp(){
		var topimg = document.getElementById('topAd-img');
		var topAd = document.getElementById('topAd');
		var He = 0 ;
		var step = 5;
		var maxH = topimg.height;
		function downAd(){
		//alert(maxH);
		if(He<maxH){
			He+=step;
			topAd.style.height = He + 'px';
			setTimeout(downAd,1);
			}else{
				setTimeout(upAd,3000);	
			}
		}
		function upAd(){
		if(He>=0){
			He-=step;
			topAd.style.height = He + 'px';
			setTimeout(upAd,1);
			}		
		}
		setTimeout(downAd,1000);
	}	function aa(){
		alert("xxxx");
	}
window.load = adDownUp();

</script>
</body>
</html>