主要是针对格式布局的一些内容:
1:position:fix
锁定位置（相对于浏览器的位置），例如网上弹出的一些广告
<style type="text/css"> #a { border:2px solid blue; height:100px; width:100px; background-color:#0F6; right:60px; bottom:70px; position:fixed;} </head> <body> <div id="a">今天是个好日子，后面打上n个回车可以明显看出</div>
2.position :absolute
1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，
2.外层有position：absolute（或relative）；那么div相对于外层边框定位，
.b { border:2px solid blue; height:100px; 100px; background-color:#0F6; right:0px; bottom:0px; position:absolute;} .c { border:2px solid red; 400px; height:200px;} .d { border:2px solid red; 400px; height:200px; position:absolute;} </style> </head> <body> <div class="b">.b的器相对于整个页面的bc和下面效果相仿</div> <div class="c">.c的相对于这么多空格结束后的</div> <div class="c">ccc<div class="b">bbb</div></div> <div class="d">dddd又来一个</div> <div class="d">d<div class="b">b</div></div>
3.position: relative
相对位置
相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。
#aaa { border:2px solid yellow; background-color:#9F3; height:100px; 100px; left:30px; top:30px; position:fixed;} #bbb { border:2px solid yellow; background-color:#9F3; height:100px; 100px; left:30px; top:30px; position:relative;} </style> </head> <body> <div id="aaa">aaaaaa</div> <div id="bbb">bbbbbb</div> <div id="aaa">aiyou<div id="bbb">ganha是b相对a</div></div>
两种情况都试了看一下不同
（二）分层（Z-index）
在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？
只需要把添写上z-index:2就可以了
（三）float：left、right
Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
#cc { border:#0C0 solid 2px; height:300px; 100px; float:right;} #dd { border:#0C0 solid 2px; height:300px; 100px; float:right;} #ee { border:#0C0 solid 2px; height:300px; 100px; float:left;} #ff { border:#0C0 solid 2px; height:300px; 100px; float:left;} </style> </head> <body> <div id="cc">没吃饭 相对游览器</div> <div id="dd">吃饭了吗</div> <div id="ee">你好</div> <div id="ff">我很好</div> </body> </html>
overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；
<div style="clear:both"></div> //截断流