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>
"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>
"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>