CSS使用总结

1. 当div使用了float时,如果父div未指定height,父div的height会为0,当父div使用overflow后,高度会撑起来

测试代码:

代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#wapper 
{ margin:0px auto; padding:5px; width:800px; background-color:#FFFFFF; overflow:hidden;}
#box01 
{width:300px; float:left; background-color:#CCCCCC;}
</style>
</head>

<body style="background-color:#99CC99; ">
<div id="wapper">
<div id="box01">
 
<div class="head">head</div>
 
<div class="content">content</div>
</div>
</div>
</body>
</html>

 

 


2. 当div设置了height时,部分浏览器会自动显示高出的部分,而部分浏览器会隐藏,这时使用 min-height 可以设置最小高度,多出部分自动显示

代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#wapper 
{ margin:0px auto; padding:5px; width:800px; background-color:#FFFFFF; overflow:hidden;}
</style>
</head>

<body style="background-color:#99CC99; ">
<div id="wapper">
<div style="float:left; overflow:hidden; min-height:25px; width:100%; background-color:#FFFFFF; ">asdfsfdfsdfsf<br/>sdfsdfs<Br/>sdf<br></div>
</div>

</body>
</html>

 


 

posted @ 2010-12-13 15:04  蛤蟆  阅读(193)  评论(0编辑  收藏  举报