<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浮动对标准流的影响</title> <style type="text/css"> body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#3c3c3c;} a:hover{color:#f00; text-decoration:underline;} .main{width:800px;margin:0 auto;} .left{width:300px; height:200px; background-color:#0FF; float:left;} .right{width:499px; height:200px; background-color:#CCC; float:right;} .footer{height:100px; width:800px; background-color:#000; margin:0 auto} .clearfix:after,.clearfix:before{content:"";display:table;} .clearfix:after{clear:both;} .clearfix{zoom:1;} </style> </head> <body> <div class="main clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>overflow检查内容</title> <style type="text/css"> .father{width:600px; border:1px solid #f00; margin:0 auto; overflow:hidden;} .damao,.ermao{width:200px; height:200px; background-color:#00F; margin:0 5px; float:left;} </style> </head> <body> <div class="father"> <div class="damao"></div> <div class="ermao"></div> <div class="damao"></div> <div class="ermao"></div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>overflow隐藏</title> <style type="text/css"> .box{width:200px; height:200px; border:1px solid #f00; overflow:hidden;} </style> </head> <body> <div class="box"> 一个大盒子，里面放着两个小盒子，这是典型的标准流的写法，这个父盒子可以不用指定高度，因为，小盒子可以给大盒子撑开，但是，如果这两个小盒子浮动了，脱离了标准流，浮起来，这时候，两个小盒子就不再是标准流，那么，父盒子就检测不到里面的内容。这个父盒子就会变成一条线。我们可以用overflow:hidden 检测复合内部内容。 </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>display:none</title> <style type="text/css"> .one{width:200px; height:100px; background-color:#F00; /*display:none;*/ visibility:hidden;} .two{width:200px; height:100px; background-color:#00F;} </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绝对定位</title> <style type="text/css"> body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#3c3c3c;} a:hover{color:#f00; text-decoration:underline;} .father{height:200px; width:200px; border:1px solid #00f; position:absolute; right:0; bottom:0;} /*.box{100px; height:100px; background-color:#F00; position:absolute; top:5px; left:5px;}*/ </style> </head> <body> <div class="father"> <div class="box"></div> </div> <p>这里面放的是文字</p> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绝对定位使用</title> <style type="text/css"> .one,.two{width:200px; height:200px; background-color:#F00; position:absolute; top:0; left:0;} .two{background-color:#0F0; top:10px ; left:10px; z-index:101;} .one{z-index:100;} </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>相对定位</title> <style type="text/css"> body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#3c3c3c;} a:hover{color:#f00; text-decoration:underline;} .father{width:200px; height:200px; border:1px solid #0f0; margin:100px;} .son{width:100px; height:100px; background-color:#00f; position:relative; top:10px; left:10px;} .sun{width:50px; height:50px; background-color:#900; position:relative; top:10px;} </style> </head> <body> <div class="father"> <div class="son"></div> <div class="sun"></div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定位</title> <style type="text/css"> .one,.two{width:200px; height:200px; background-color:#F00; position:relative; top:0; left:0;} .two{background-color:#0F0;} </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>父级绝对，子集也绝对</title> <style type="text/css"> .father{width:200px; height:200px; position:absolute; top:20px; left:20px; background-color:#966;} .son{width:100px; height:100px; background-color:#096; position:absolute; top:0; left:0;} </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>父级相对，子集绝对</title> <style type="text/css"> .father{width:200px; height:200px; position:relative; top:20px; left:20px; background-color:#966;} .son{width:100px; height:100px; background-color:#096; position:absolute; top:0; left:0;} </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绝对定位</title> <style type="text/css"> html{cursor:url(horse.ani);} .wenti{width:502px; height:401px; background:url(votebg.jpg) no-repeat; position:absolute; right:0; bottom:0; cursor:url(dinosaur.ani);} .close{width:16px; height:16px; display:block; top:7px; right:8px; position:absolute; cursor:pointer;} .submit{width:64px; height:24px; display:block; bottom:8px; right:8px; position:absolute; cursor:pointer;} </style> </head> <body> <div class="wenti"> <span class="close"><img src="close.jpg" /></span> <span class="submit"><img src="tijiao.jpg" /></span> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定位</title> <style type="text/css"> body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p,dl,dd,dt{margin:0; padding:0;} body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;} a{text-decoration:none; color:#3c3c3c;} a:hover{text-decoration:underline;} ul{list-style:none;} .view{width:998px; height:190px; margin:50px auto; border:1px solid #D2E1F1;border-top:1px solid #458FCE; position:relative;} .view dt{height:30px; background-color:#F6F9FE;} .view dt a{color:#458fce; font-size:14px;padding:7px 0 0 12px;display:block; width:70px;} .view dd {padding:20px 43px 0;} .view dd li{float:left; margin-right:28px; text-align:center;} .view dd li p{padding-top:8px;} .view dd li a{font-size:12px;} .view dd li a:hover{color:#f00;} .view .nomargin{margin-right:0;} .left{width:11px; height:20px; background:url(icon_r1_c1.png) no-repeat; display:block; position:absolute; top:90px; left:18px;} .left:hover{background:url(icon_r1_c5.png) no-repeat;} .right{background:url(icon_r1_c3.png) no-repeat; width:11px; height:20px; display:block; position:absolute; top:90px; right:18px;} </style> </head> <body> <dl class="view"> <dt><h2><a href="#">视觉焦点</a></h2></dt> <dd> <a href="#" class="left"></a> <ul> <li> <img src="01.jpg" /> <p><a href="#">泰国北部发生地震</a></p> </li> <li> <img src="01.jpg" /> <p><a href="#">泰国北部发生地震</a></p> </li> <li> <img src="01.jpg" /> <p><a href="#">泰国北部发生地震</a></p> </li> <li> <img src="01.jpg" /> <p><a href="#">泰国北部发生地震</a></p> </li> <li class="nomargin"> <img src="01.jpg" /> <p><a href="#">泰国北部发生地震</a></p> </li> </ul> <a href="#" class="right"></a> </dd> </dl> </body> </html>
转载请备注。