| 這幾個部分都是能夠經過CSS進行指定的，固然，CSS還能夠控制背景，所以，咱們能夠經過CSS來靈活控制咱們頁面的外觀。程序員 2、CSS中的文檔流模型瀏覽器 全部的塊元素在html文檔中是按照它們出如今文檔中的前後順序排列的（固然，嵌套不在此列），每個塊都會另起一行。以下圖
他們對應的html以下：
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
爲了定義他們的寬度、高度還有邊框，咱們定義以下的CSS：
#div1 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
3、CSS中的相對定位和絕對定位模型spa 在文檔流中，每一個塊元素都會被安排到流中的一個位置，咱們能夠經過CSS中的定位屬性來從新安排它的位置。定位分爲相對定位和絕對定位， 相對定位是相對於該塊元素在文檔流中的位置的，好比，咱們可使用相對定位把div2放到div1的右側，CSS代碼以下：
#div1 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
position: relative;
top: -64px;
left: 204px;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
}
下面是效果：
能夠看到一個有趣的現象，那就是雖然咱們把div2移走了，可是div1和div3中間仍是有一個空間，說明相對定位的元素是會佔據文檔流空間的，這裏的div2就是典型的「站着茅坑不拉屎」。htm 使用絕對定位也是能夠把div2擺到div1的右邊的，並且絕對定位是不會佔據文檔流空間的，以下圖，div1和div3之間沒有空白：
div2的CSS代碼：
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
position: absolute;
top: 15px;
left: 214px;
}ci 絕對定位是個好東西，能夠把內容顯示到頁面上的任何位置，可是對於咱們程序員來講，卻不能使用太多的絕對定位，由於使用程序動態向div中添加內容，div的大小是不可知的，沒法將每個div的位置都定死。文檔 4、CSS中的浮動和清除模型
在CSS中，最讓人很差理解的應該算是float和clear意義了。float能夠達到這樣一個效果，就是原本應該一行一個的塊元素，若是定義了float屬性，則只要行的空間足夠，它會跑別的float元素的屁股後面，而再也不會單獨佔用一行，以下圖：
這裏把div2和div3都定義了爲浮動，代碼以下：
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
那什麼狀況下須要clear呢？這是由於float的元素和絕對定位的元素同樣，也是不佔用文檔空間的，所以，若是咱們把div2和div3都嵌套在div1中，而且把div2和div3都定義爲浮動，那麼因爲它們不佔用文檔空間，設置爲浮動後div2和div3都不屬於div1的內容了，因此做爲父元素的div1沒有內容填充，不知道自動擴展大小，以致於顯示出來div2和div3會跑到div1的外面，以下圖
下面是它們的html代碼：
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
下面是它們的css代碼：
#div1 {
border: 1px solid #000099;
height: 60px;
width: 450px;
margin:2px;
}
#div2 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#div3 {
border: 1px solid #000099;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
由於float的元素不佔用文檔流空間，有時候元素還會重疊到float元素上，這裏我就不舉例了。it 爲了解決上面的問題，就須要在float以後的元素上面使用clear，在此例中，咱們在div3後面加入一個空段落，並設置其爲clear，以下：
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
<p class="clear"></p>
</div>
clear 屬性定義了元素的哪邊上不容許出現浮動元素。下面是新增長的空段落的CSS代碼：io .clear{
clear:left;
}
這時div1有了p這塊內容（儘管p裏面是空的）,而且clear:爲left, 使得p的上外邊框邊界恰好在其上浮動元素的下外邊距邊界之下
效果圖；
|