一、CSS中的盒子模型

標(biāo)準(zhǔn)模式和混雜模式（IE）。在標(biāo)準(zhǔn)模式下瀏覽器按照規(guī)范呈現(xiàn)頁(yè)面；在混雜模式下，頁(yè)面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無(wú)法工作。

?html元素一般分為塊級(jí)元素和行內(nèi)元素

塊級(jí)元素：塊級(jí)元素排斥其他元素與其位于同一行，可以設(shè)定寬（width）和高（height）,塊級(jí)元素一般是其他元素的容器，可容納塊級(jí)元素和行內(nèi)元素,

常見(jiàn)的塊級(jí)元素有div, p ,h1~h6,ul,table,form,hr等。

每一個(gè)塊元素都可以分為context、padding、boder和margin幾個(gè)部分，我們常說(shuō)的寬和高，通常指的是context的寬和高(也有可能是context+padding,具體跟瀏覽器有關(guān))，

padding代表內(nèi)容和邊框之間的填充，margin代表邊框之外的空白，如上圖：

行內(nèi)元素：行內(nèi)元素設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效，但可以與其他行內(nèi)元素位于同一行，行內(nèi)元素內(nèi)一般不可以包含塊級(jí)元素。

行內(nèi)元素的高度一般由元素內(nèi)部的字體大小決定，寬度由內(nèi)容的長(zhǎng)度控制。常見(jiàn)的行內(nèi)元素有a, em ,strong,span,i,img,lable,button,select等。

塊級(jí)元素和行內(nèi)元素區(qū)別

可以通過(guò)修改樣式display屬性改變?cè)厥且詨K級(jí)還是行內(nèi)元素呈現(xiàn)，當(dāng)display的值設(shè)為block時(shí)，元素將以塊級(jí)方式呈現(xiàn)；當(dāng)display值設(shè)為inline時(shí)，元素將以行內(nèi)形式呈現(xiàn)。

如果想讓一個(gè)元素可以設(shè)置寬度高度，又讓它以行內(nèi)形式顯示，我們可以設(shè)置display的值為inline-block。

例子：

二、CSS中的文檔流模型

??所有的塊元素在html文檔中是按照它們出現(xiàn)在文檔中的先后順序排列的（當(dāng)然，嵌套不在此列），每一個(gè)塊都會(huì)另起一行。如下圖


他們對(duì)應(yīng)的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;
}?

三、CSS中的相對(duì)定位和絕對(duì)定位模型

???在文檔流中，每個(gè)塊元素都會(huì)被安排到流中的一個(gè)位置，我們可以通過(guò)CSS中的定位屬性來(lái)重新安排它的位置。定位分為相對(duì)定位和絕對(duì)定位， 相對(duì)定位是相對(duì)于該塊元素在文檔流中的位置的，比如，我們可以使用相對(duì)定位把div2放到div1的右側(cè)，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;
}

下面是效果：


??可以看到一個(gè)有趣的現(xiàn)象，那就是雖然我們把div2移走了，但是div1和div3中間還是有一個(gè)空間，說(shuō)明相對(duì)定位的元素是會(huì)占據(jù)文檔流空間的，這里的div2就是典型的“站著茅坑不拉屎”。

使用絕對(duì)定位也是可以把div2擺到div1的右邊的，而且絕對(duì)定位是不會(huì)占據(jù)文檔流空間的，如下圖，div1和div3之間沒(méi)有空白：


div2的CSS代碼：?
#div2 {
??border: 1px solid #000099;
??height: 60px;
??width: 200px;
??margin:2px;
??position: absolute;
??top: 15px;
??left: 214px;
}

絕對(duì)定位是個(gè)好東西，可以把內(nèi)容顯示到頁(yè)面上的任何位置，但是對(duì)于我們程序員來(lái)說(shuō)，卻不能使用太多的絕對(duì)定位，因?yàn)槭褂贸绦騽?dòng)態(tài)向div中添加內(nèi)容，div的大小是不可知的，無(wú)法將每一個(gè)div的位置都定死。

四、CSS中的浮動(dòng)和清除模型
?? 在CSS中，最讓人不好理解的應(yīng)該算是float和clear意義了。float可以達(dá)到這樣一個(gè)效果，就是本來(lái)應(yīng)該一行一個(gè)的塊元素，如果定義了float屬性，則只要行的空間足夠，它會(huì)跑別的float元素的屁股后面，而不再會(huì)單獨(dú)占用一行，如下圖：



這里把div2和div3都定義了為浮動(dòng)，代碼如下：
#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呢？這是因?yàn)閒loat的元素和絕對(duì)定位的元素一樣，也是不占用文檔空間的，因此，如果我們把div2和div3都嵌套在div1中，并且把div2和div3都定義為浮動(dòng)，那么由于它們不占用文檔空間，設(shè)置為浮動(dòng)后div2和div3都不屬于div1的內(nèi)容了，所以作為父元素的div1沒(méi)有內(nèi)容填充，不知道自動(dòng)擴(kuò)展大小，以至于顯示出來(lái)div2和div3會(huì)跑到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;
}


因?yàn)閒loat的元素不占用文檔流空間，有時(shí)候元素還會(huì)重疊到float元素上，這里我就不舉例了。

為了解決上面的問(wèn)題，就需要在float之后的元素上面使用clear，在此例中，我們?cè)赿iv3后面加入一個(gè)空段落，并設(shè)置其為clear，如下：?
<div id="div1">div1
<div id="div2">div2</div>
<div id="div3">div3</div>
<p class="clear"></p>
</div>

clear 屬性定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素。下面是新增加的空段落的CSS代碼：

.clear{
??clear:left;
}
這時(shí)div1有了p這塊內(nèi)容（盡管p里面是空的）,并且clear:為left, 使得p的上外邊框邊界剛好在其上浮動(dòng)元素的下外邊距邊界之下
效果圖；

?