1.margin
<div style=”margin-left:20px”>aa</div>
<div style=”margin-left:10px”>bb</div>
则aa和bb之间的间距为30px(左右叠加)
<div style=”margin-top:20px”>aa</div>
<div style=”margin-bottom:10px”>bb</div>
则aa和bb之间的上下间距为20px(上下踏陷)
2.float
设置盒子1浮动左边后，浮动内容会脱离原本位置，被后面的盒子2占据位置，
但是后面盒子2里的内容不会顶头写，而是环绕着盒子1显示
clear
如果设置clear:left，则盒子2不对盒子1进行浮动
clear:both，即清除左右两边的浮动
如果div里没有内容，只有三个浮动的div，则高度不会自动伸展，
想让它自动伸展的解决办法是
<div>
<div style=”float:left”>11</div>
<div style=”float:left”>22</div>
<div style=”float:right”>33</div>
<div style=”clear:both”></div> //这里的div没有实际的意义，只是为了控制让外层的div能够自动伸展,因为加了clear:both所以上面三个浮动div会在外层div内
</div>
3.display
<div style=”display:inline”>box1</div>可让div在行内显示，即不换行
<span style=”display:block”>box2</span>可让span换行，即显示成div模式
<div style=”display:none”>box1</div>隐藏div
5. style
font-size:3em //表示字体为平常字体的三倍
text-indent: 2em; //段落字体缩进两个字
line-height:1.5 //成比例的行高
background-repeat:repeat-x //沿着水平方向平铺
像下面这样三句的情况
body{
background-image:url(bg-grad.gif);
background-repeat:repeat-x;
background-color:#3399FF; //这个颜色是图片中的浅颜色
}
是背景图片沿着水平方向平铺，如果图片没有覆盖到的地方，
则用背景颜色来代替，这种方式可让背景从上到下的颜色由深至浅。
6.布局的综合算法总结
>>>1.针对ie6，float:left的情况下margin会加倍(此加倍只针对于一边的情况)
如：<div style=”float:left:margin:20px;width:200px>aa</div>
则宽度为40+200+20=260px
要想去掉ie6里浮动造成margin加倍的问题，则div样式添上display:inline
>>>2.浏览器的解析中
平常直接用记事本编辑时，用<html>开头的情况下，边框是算到宽度内的
如：<div style=”border:10px solid #ff0000;width:200px>aa</div>
则宽度为200px
将<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”>这种格式的情况下，
边框是另处计算的，如上情况下的宽度为10+200+10=220px
——————下面为例—————
<!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”>
<title>定位</title>
<style type=”text/css”>
<!–
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 803px;
}
.mainBox {
border: 1px solid #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
–>
</style>
</head>
<body>
<div class=”mainBox”>
<h3>aa</h3>
<p>如果你想尝试一下aaa</p>
</div>
<div class=”mainBox”>
<h3>bb</h3>
<p>如果你想尝试一下bbb</p>
</div>
<div class=”mainBox”>
<h3>cc</h3>
<p>如果你想尝试一下ccc</p>
</div>
<div class=”mainBox”>
<h3>dd</h3>
<p>如果你想尝试一下ddd</p>
</div>
</body>
</html>
四个mainBox的总宽度为803px;
计算方式是：border+width+margin即(1*8)+(192*4)+(3*8+3)=803px
加上3是因为在ie6中浮动左边margin加倍,
如果要防止这种情况可在div样式中加上display:inline;
在FF浏览器下宽度为800px,不用加上3px
