div稱為層，更多的是因為它的z軸屬性，可以實現層疊效果，例如：
<div style=”position:absolute;z-index:1;left:50px;top:50px;background-color:red;”></div>
<div style=”position:absolute;z-index:2;left:60px;top:60px;background-color:blue;”></div>
注意：佈局還是浮動+外邊距！！！
一、CSS定位：
Position:
Static（靜態） 默認，無法定位和指定Z軸
Absolute（絕對） 相對於最近的一個具有定位容器絕對定位，容器沒有定位距離最近一級容器元素位置絕對定位 ，
比如外部DIV嵌套內部DIV，外部DIV設置外邊距內部DIV不會移動。相對就會。
示例源碼：
<div style="border:1px solid black; width:200px; height:200px; margin-top:250px; margin-left:250px;">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; left:50px; top:50px;"></div>
</div>
Relative（相對） 相對於父級容器相對定位
Fixed 固定，拖動滾動條始終處於視野，但是IE6不支持。
z-index Z軸 ，默認為0，正方向全是正整數；負方向為負整數，值範圍-9999~9999。
示例源碼：
<body style="height:600px; background-color:gray;">
<div style="border:1px solid black; width:200px; height:200px; margin-top:150px; margin-left:150px; position:fixed; z-index:1;">
</div>
</body>
二、列表樣式：
無序列表：
List-style-type:
Disc 默認，實心圓
Circle 空心圓
Square 實心方塊
None 不實用項目符號
有序列表：
List-style-type:
Decimal 默認，阿拉伯數字
Lower-roman 小寫羅馬數字
Upper-roman 大寫羅馬數字
Lower-alpha 小寫英文字母
Upper-alpha 大寫英文字母
共有：
List-style-image:url(圖片地址) 列表項圖標（xxx.ico）
示例源碼：
<style>
ul li{
float:left;
margin-right:10px;
}
li{
list-style-image:url("1.jpg");
}
</style>
<ul style="list-style-type:none; ">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<div style="clear:left;"></div>
<ol style="list-style-type:upper-roman;">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
List-style-position: outside（標記在文本外） inside（標記在文本內） 效果如下
源碼：
<ul style="list-style-position:inside;">
<li style="background-color:blue;">11111</li>
<li>11111</li>
<li>11111</li>
</ul>
三、CSS溢出：內容超出容器寬高度設置
Overflow:
Hidden 溢出部分隱藏
Scroll 出現滾動條
Auto 自動
Visible 顯示（默認）
Overflow-x: 橫向溢出設置
Overflow-y: 縱向溢出設置
示例源碼：
<div style="width:300px; height:300px; overflow-x:scroll; overflow-y:hidden;">
<img src="1.jpg" width="400px" height="400px" />
</div>
相關推薦
