1. 外边距合并 不是bug 而是一个特性 （以最大的那个边距为准）
两个盒子是并列关系
两个盒子 父子级关系
1. border
2.overflow:hidden;
3. padding 盒子实体 （特殊情况下也可以使用）
2. float (浮动) left right
标准流：块级自己占一行 行内可以放多个没有高和宽
脱离标准流 盒子叠放次序
清除浮动
浮动本来是一个非常好的属性，我们经常用它来进行网页排版布局，但是，浮动虽然脱离了标准流，还是会影响正常的标准流，这时候，我们需要，用到一个叫 清除浮动的属性 clear .
clear: left right both 三个属性值
其实，我们一般情况下直接 clear:both;
清除浮动 之 额外标签法
w3c组织 提倡 在最后一个标签的后面，添加一个 新的标签 里面写上 clear:both 这个语法 。 我们称之为 额外标签法。
注意： 因为left 和right 这个盒子浮动，影响了 footer ，所以在right 这个盒子后面添加新标签。
优点： 简单
缺点： 额外增加了代码
代码如下：
<!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} .clear{clear:both;} </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
清除浮动 之 overflow:hidden
这种方法是最简单的，一定是给大盒子加上overflow：hidden 这句话，就可以清除浮动。
代码如下：
<!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; overflow:hidden;} .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} </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
优点： 最简单的一种
缺点： 里面的内容有定位 ，就引起麻烦 所以，里面子盒子如果需要定位，不太推荐使用。
清除浮动 之 伪类after
专门写一个类：（网络比较火的写法）
格式如下：
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clearfix{zoom:1;} /*照顾ie6.7*/
解释： visibility:hidden 隐藏
代码如下：
<!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{content:""; display:block; visibility:hidden; height:0; clear:both;} .clearfix{zoom:1;} /*照顾ie6.7*/ </style> </head> <body> <div class="main clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
缺点： 写法稍微麻烦
优点： 调用方便 不会增加标签
将来可能用的比较多的 伪类 after before
代码如下：
.clearfix:after,.clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
这种方法要求： 现在大家了解，如果以后看到这种写法，要知道是清除浮动。
<!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>
overflow:hidden 作用 （溢出隐藏）
可以调整兼容性 （清除浮动）
一个大盒子，里面放着两个小盒子，这是典型的标准流的写法，这个父盒子可以不用指定高度，因为，小盒子可以给大盒子撑开，但是，如果这两个小盒子浮动了，脱离了标准流，浮起来，这时候，两个小盒子就不再是标准流，那么，父盒子就检测不到里面的内容。这个父盒子就会变成一条线。我们可以用overflow:hidden 检测复合内部内容。
overflow：hidden 常用的第一种用法： 检测内部高度。
溢出隐藏（overflow:hidden） 可以切割多余的内容
overflow:visible; 超出的部分显示
overflow:hidden 超出的部分隐藏
overflow:scroll 有事没事显示滚动条（不管超出还是不超出）
overflow:auto 超出就有滚动条，不超出就没有滚动条
隐藏元素
我们在页面中，经常会把一些元素 显示出来，或者隐藏起来。
display 显示元素
display :block inline inline-block none;
display：none 隐藏元素
visibility:hidden 隐藏元素
也可以隐藏元素。
两者的区别
占位
它们两个最本质的区别就是：
visibility:hidden 虽然是隐藏的，但是还是占有自己位置
而 display:none 隐藏的同时，不占位置。
定位(position)
我们网页布局方法：
1. 标准流 （最稳定）
2. 浮动流 （float 其次）
3. 定位流 ( 稳定性最后)
定位是完全脱离标准流的一种布局方式。
定位的分类：
1.绝对定位 absolute
position：absolute；
定位和方位名词一起使用：
left top right bottom
position:absolute; top:20px;
绝对定位是以浏览器左上角为原点（0.0）
绝对定位不占位置
2.相对定位 (relative)
position:relative
1.相对定位是占位置的。
2.相对定位是以自己左上角为原点
3.叠放次序：
z-index: 数值;
数值越大 盒子越靠上 需要注意：数值后面一定不能加单位.
.one{z-index:10;}
注意：
如果父盒子是 绝对定位 ，子盒子也是绝对定位，那么，子盒子会以父盒子的左上角为原点。
<!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>
如果父盒子是 相对定位 ，子盒子也是绝对定位，那么，子盒子会以父盒子的左上角为原点。
平时我们定位网页布局： 父级相对 子级绝对 （父相子绝）
更改鼠标样式：
cursor：pointer;
鼠标样式：
.ani .cur
html{cursor:url(horse.ani);}
注意：更换鼠标样式ie支持的好，火狐之类的不支持。
cursor：pointer; 所有的浏览器都支持 鼠标变成 小手
<!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>
转载请备注。