12.1傳統(tǒng)CSS盒模型盒模型是使用Div+CSS對網(wǎng)頁元素進(jìn)行控制時一個非常重要的概念，只有很好的理解和掌握了盒模型以及其中每個元素的用法，才能真正地控制頁面中各元素的位置。什么是CSS盒模型盒模型是由margin（邊界）、border（邊框）、padding（填充）和content（內(nèi)容）幾個部分組成的，此外，在盒模型中，還具備高度和寬度兩個輔助屬性。

CSS盒模型的要點(diǎn)關(guān)于CSS盒模型，有以下幾個要點(diǎn)是在使用過程中需要注意的。1．邊框默認(rèn)的樣式（border-style）可設(shè)置為不顯示（none）。2．填充值（padding）不可為負(fù)。3．邊界值（margin）可以為負(fù)，其顯示效果在各瀏覽器中可能不同。4．內(nèi)聯(lián)元素，例如<a>，定義上下邊界不會影響到行高。5．對于塊級元素，未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮。例如有上下兩個元素，上面元素的下邊界為10px，下面元素的上邊界為5px，則實(shí)際兩個元素的間距為10px（兩個邊界值中較大的值。margin-leftborder-leftpadding-leftmargin-topborder-toppadding-toppadding-bottomborder-bottommargin-bottommargin-rightborder-rightpadding-rightcontent6．浮動元素（無論是左還是右浮動）邊界不壓縮。并且如果浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。7．如果盒中沒有內(nèi)容，則即使定義了寬度和高度都為100%，實(shí)際上只占0%，因此不會被顯示，此處在使用Div+CSS布局的時候需要特別注意。

margin屬性——邊距margin屬性用于設(shè)置頁面中元素和元素之間的距離，即定義元素周圍的空間范圍，是頁面排版中一個比較重要的概念。margin:auto|length;

border屬性——邊框在網(wǎng)頁設(shè)計(jì)中，如果計(jì)算元素的寬和高，則需要把border屬性值計(jì)算在內(nèi)。border:border-style|border-color|border-width;

padding屬性——填充在CSS中，可以通過設(shè)置padding屬性定義內(nèi)容與邊框之間的距離，即內(nèi)邊距。padding:length;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁元素盒模型最終文件：光盤\最終文件\第12章\12-1-5.html視頻：光盤\視頻\第12章\12-1-5.swf

12.2CSS3.0彈性盒模型彈性盒子模型是CSS3.0最新引進(jìn)的盒子模型處理機(jī)制，使用彈性盒模型，可以實(shí)現(xiàn)盒元素內(nèi)部的多種布局，包括排列方向、排列順序、空間分配和對齊方式等，大大增強(qiáng)了布局的靈活性，可以輕松地設(shè)計(jì)出自適應(yīng)瀏覽器窗口的流動布局或者自適應(yīng)大小的彈性布局。開啟彈性盒模型開啟彈性盒模型的方法，就是把display屬性值設(shè)置為box或inline-box。目前還沒有瀏覽器支持box屬性值，為了能兼容webkit內(nèi)核和gecko內(nèi)核的瀏覽器，可以分別使用-webkit-box和-moz-box屬性。開啟彈性盒模型后，文檔就會按照彈性盒模型默認(rèn)的方式來布局子元素。

box-orient屬性——元素布局方向元素布局方向是指彈性盒模型內(nèi)部的元素流動布局方向，包括橫排和豎排兩種。在CSS中，元素布局方向可以通過CSS3.0新增的box-orient屬性進(jìn)行控制。基于webkit內(nèi)核的替代私有屬性是-webkit-box-orient，基于gecko內(nèi)核的替代私有屬性是-moz-box-orient。box-orient屬性的語法格式如下。box-orient:horizontal|vertical|inline-axis|block-axis|inherit;

box-direction屬性——元素布局順序

元素布局順序是用來控制彈性盒模型中子元素的排列順序，也可以說是控制彈性盒模型內(nèi)部元素的流動順序。在CSS樣式中，元素布局順序可以通過CSS3.0新增的box-direction屬性進(jìn)行設(shè)置?；趙ebkit內(nèi)核的替代私有屬性是-webkit-box-direction，基于gecko內(nèi)核的替代私有屬性是-moz-box-direction。box-direction:normal|reverse|inherit;

box-ordinal-group屬性——元素位置元素位置指的是元素在彈性盒模型中的具體位置。在CSS樣式中，元素位置可以通過CSS3.0新增的box-ordinal-group屬性進(jìn)行設(shè)置。基于webkit內(nèi)核的替代私有屬性是-webkit-box-ordinal-group，基于gecko內(nèi)核的替代私有屬性是-moz-box-ordinal-group。box-ordinal-group:<integer>;

box-flex屬性——元素空間分配CSS3.0中新增的box-flex屬性，用于定義彈性盒模型內(nèi)部子元素是否具有空間彈性。當(dāng)盒元素的尺寸縮?。ɑ驍U(kuò)大）時，被定義為有空間彈性的子元素的尺寸也會縮?。ɑ驍U(kuò)大）。每當(dāng)盒元素有額外的空間時，具有空間彈性的子元素，會擴(kuò)大自身大小來填補(bǔ)這一空間。基于webkit內(nèi)核的替代私有屬性是-webkit-box-flex，基于gecko內(nèi)核的替代私有屬性是-moz-box-flex。box-flex:<value>;

box-pack和box-align屬性——元素對齊方式

CSS3.0中新增的box-pack和box-align屬性，分別用于設(shè)置彈性盒模型內(nèi)部元素的水平對齊方式和垂直對齊方式。這種對齊方式，對盒元素內(nèi)部的文字、圖像及子元素都是有效的?；趙ebkit內(nèi)核的替代私有屬性是-webkit-box-pack和-webkit-box-align，基于gecko內(nèi)核的替代私有屬性是-moz-box-pack和-moz-box-align。box-pack屬性可能設(shè)置子元素在水平方向上的對齊方式，box-pack屬性的語法格式如下。box-pack:start|end|center|justify;box-align屬性可以設(shè)置子元素在垂直方向上的對齊方向，box-align屬性的語法格式如下。box-align:start|end|center|baseline|stretch;實(shí)現(xiàn)元素水平和垂直居中顯示

在CSS3.0中，通過新增的box-pack屬性和box-align屬性，可以輕松的將元素放置在頁面中水平居中和垂直居中的位置。實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)元素水平垂直居中顯示最終文件：光盤\最終文件\第12章\12-2-7.html視頻：光盤\視頻\第12章\12-2-7.swf實(shí)現(xiàn)元素底部對齊在CSS3.0出現(xiàn)之前，很難實(shí)現(xiàn)將元素與頁面的底部對齊，而通過CSS3.0中新增的box-pack屬性和box-align屬性，能夠輕松的實(shí)現(xiàn)元素底部對齊效果。實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)元素底部對齊最終文件：光盤\最終文件\第12章\12-2-8.html視頻：光盤\視頻\第12章\12-2-8.swf盒模型是網(wǎng)頁設(shè)計(jì)中最基本、最重要的模型。CSS3.0新增的與盒模型有關(guān)的屬性如盒子陰影、盒子尺寸和溢出處理等。

12.3增強(qiáng)的CSS3.0盒模型

box-shadow屬性——元素陰影在CSS3.0中新增了為元素添加陰影的新屬性box-shadow，通過該屬性可以輕松的實(shí)現(xiàn)網(wǎng)頁中元素的陰影效果。box-shadow:none|[inset]?[<length>]{2,4}[<color>]?;實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁元素添加陰影效果最終文件：光盤\最終文件\第12章\12-3-1.html視頻：光盤\視頻\第12章\12-3-1.swf

box-sizing屬性——元素尺寸大小CSS3.0對盒模型進(jìn)行了改善，新增的box-sizing屬性可用于定義width和height的計(jì)算方法，可自由定義是否包含border和padding。box-sizing屬性的語法格式如下。box-sizing:content-box|padding-box|border-box|inherit;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁元素尺寸大小

overflow-x和overflow-y屬性——元素溢出內(nèi)容處理在CSS2.0規(guī)范中，就已經(jīng)有處理溢出的overflow屬性，該屬性定義當(dāng)盒子的內(nèi)容超出盒子邊界時的處理方法。CSS3.0新增的overflow-x和overflow-y屬性，是對overflow屬性的補(bǔ)充，分別表示水平方向上額溢出處理和垂直方向上的溢出處理。overflow-x和overflow-y屬性的語法格式如下。overflow-x:visible|auto|hidden|scroll|no-display|no-content;overflow-y:visible|auto|hidden|scroll|no-display|no-content;最終文件：光盤\最終文件\第12章\12-3-2.html視頻：光盤\視頻\第12章\12-3-2.swf

12.4定位網(wǎng)頁元素CSS的排版是一種比較新的排版理念，完全有別于傳統(tǒng)的排版方式。它將頁面首先在整體上進(jìn)行<div>標(biāo)簽的分塊，然后對各個塊進(jìn)行CSS定位，最后再在各個塊中添加相應(yīng)的內(nèi)容。通過CSS排版的頁面，更新十分容易，甚至是頁面的拓?fù)浣Y(jié)構(gòu)，都可以通過修改CSS屬性來重新定位。

position屬性——元素定位position屬性是最主要的定位屬性，position屬性既可以定義元素的絕對位置，又可以定義元素的相對位置。position:static|absolute|fixed|relative;

relative——相對定位設(shè)置position屬性為relative，即可將元素的定位方式設(shè)置為相對定位。對一個元素進(jìn)行相對定位，首先它將出現(xiàn)在它所在的位置上。然后通過設(shè)置垂直或水平位置，讓這個元素相對于它的原始起點(diǎn)進(jìn)行移動。另外，相對定位時，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其他元素。實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)網(wǎng)頁元素的疊加顯示最終文件：光盤\最終文件\第12章\12-4-2.html視頻：光盤\視頻\第12章\12-4-2.swf

absolute——絕對定位設(shè)置position屬性為absolute，即可將元素的定位方式設(shè)置為絕對定位。絕對定位是參照瀏覽器的左上角，配合top、right、bottom和left進(jìn)行定位的，如果沒有設(shè)置上述的4個值，則默認(rèn)的依據(jù)父級元素的坐標(biāo)原點(diǎn)為原始點(diǎn)。在父級元素的position屬性為默認(rèn)值時，top、right、bottom和left的坐標(biāo)原點(diǎn)以body的坐標(biāo)原點(diǎn)為起始位置。實(shí)戰(zhàn)練習(xí)——網(wǎng)頁元素固定在右側(cè)顯示

fixed——固定定位設(shè)置position屬性為fixed，即可將元素的定位方式設(shè)置為固定定位。固定定位和絕對定位比較相似，它是絕對定位的一種特殊形式，固定定位的容器不會隨著滾動條的拖動而變化位置。在視線中，固定定位的容器位置是不會改變的。固定定位可以把一些特殊效果固定在瀏覽器的視線位置。實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)固定位置的導(dǎo)航菜單最終文件：光盤\最終文件\第12章\12-4-3.html視頻：光盤\視頻\第12章\12-4-3.swf最終文件：光盤\最終文件\第12章\12-4-4.html視頻：光盤\視頻\第12章\12-4-4.swf

float屬性——浮動定位除了使用position屬性進(jìn)行定位外，還可以使用float屬性定位。float定位只能在水平方向上定位，而不能在垂直方向上定位。浮動定位是CSS排版中非常重要的手段。浮動的框可以左右移動，直到它外邊緣碰到包含框或另一個浮動框的邊緣。float:none|left|right;實(shí)戰(zhàn)練習(xí)——制作順序排列的圖像列表最終文件：光盤\最終文件\第12章\12-4-5.html視頻：光盤\視頻\第12章\12-4-5.swf

12.5

CSS3.0新增用戶界面設(shè)計(jì)屬性在界面設(shè)計(jì)方面，為了增強(qiáng)用戶體驗(yàn)，設(shè)計(jì)師會想盡辦法來實(shí)現(xiàn)理想的頁面效果，也因此增加了許多工作量。CSS3.0在用戶界面設(shè)計(jì)方面有很大的改進(jìn)，可以允許改變元素尺寸、設(shè)置元素外輪廓線、改變焦點(diǎn)導(dǎo)航順序、讓元素變身，以及給元素添加內(nèi)容等。

resize屬性——改變元素尺寸在CSS3.0中新增了區(qū)域縮放調(diào)節(jié)的功能設(shè)置，通過新增的resize屬性，就可以實(shí)現(xiàn)頁面中元素的區(qū)域縮放操作，調(diào)節(jié)元素的尺寸大小。resize:none|both|horizontal|vertical|inherit;實(shí)戰(zhàn)練習(xí)——實(shí)現(xiàn)網(wǎng)頁元素尺寸任意縮放

outline屬性——輪廓外邊框CSS3.0中新增的outline屬性可以為元素添加外輪廓線，以突出顯示元素。外輪廓線看起來很像元素邊框，而且語法也與邊框非常類似，但是外輪廓線不點(diǎn)用元素的尺寸。outline:[outline-color]||[outline-style]||[outline-width]|inherit;實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁元素添加輪廓外邊框最終文件：光盤\最終文件\第12章\12-5-1.html視頻：光盤\視頻\第12章\12-5-1.swf最終文件：光盤\最終文件\第12章\12-5-2.html視頻：光盤\視頻\第12章\12-5-2.swf

appearance屬性——偽裝的元素CSS3.0中新增appearance屬性，通過該屬性可以方便地把元素偽裝成其他類型的元素，給網(wǎng)頁界面設(shè)計(jì)帶來極大的靈活性。基于webkit內(nèi)核的替代私有屬性是-webkit-appearance，基于gecko內(nèi)核的替代私有屬性是-moz-appearance。appearance:normal|icon|window|button|menu|field;實(shí)戰(zhàn)練習(xí)——將超鏈接文字偽裝成按鈕

content屬性——為元素添加內(nèi)容content屬性與:before及:after偽元素配合使用，可以將生成的內(nèi)容放在一個元素內(nèi)容的前面或后面。content:none|normal|<string>|counter(<counter>)|attr(<attribute>)|url(<url>)|inherit;實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁元素賦予內(nèi)容最終文件：光盤\最終文件\第12章\12-5-3.html視頻：光盤\視頻\第12章\12-5-3.swf最終文件：光盤\最終文件\第12章\12-5-4.html視頻：光盤\視頻\第12章\12-5-4.swf

12.6

CSS3.0新增多列布局屬性網(wǎng)頁設(shè)計(jì)者如果要設(shè)計(jì)多列布局，有兩種方法，一種是浮動布局，另一種是定位布局。浮動布局比較靈活，但容易發(fā)生錯位，需要添加大量的附加代碼或無用的換行符，增加了不必要的工作量。定位布局可以精確地確定位置，不會發(fā)生錯位，但是無法滿足模塊的適應(yīng)能力。在CSS3.0中新增了多列布局相關(guān)屬性，可以從多個方面去設(shè)置：多列的列數(shù)、每列的寬度、列與列之間的距離、列與列之間的分隔線、跨多列設(shè)置等，本節(jié)將詳細(xì)進(jìn)行介紹。

columns屬性——多列布局CSS3.0新增了columns屬性，該屬性用于快速定義多列布局的列數(shù)目和每列的寬度。基于webkit內(nèi)核的替代私有屬性是-webkit-columns，gecko內(nèi)核的瀏覽器暫不支持。columns:<column-width>||<column-count>;實(shí)戰(zhàn)練習(xí)——快速將網(wǎng)頁內(nèi)容分為多列最終文件：光盤\最終文件\第12章\12-6-1.html視頻：光盤\視頻\第12章\12-6-1.swf

column-width屬性——列寬度CSS3.0新增column-width屬性，該屬性可以定義多列布局中每列的寬度，可以單獨(dú)使用，也可以和其他多列布局屬性組合使用。基于webkit內(nèi)核的替代私有屬性是-webkit-column-width，基于gecko內(nèi)核的替代私有屬性是-moz-column-width。column-width:auto|<length>;

column-count屬性——列數(shù)CSS3.0新增column-count屬性，該屬性可以設(shè)置多列布局的列數(shù)，而不需要通過列寬度自動調(diào)整列數(shù)?；趙ebkit內(nèi)核的替代私有屬性是-webkit-column-count，基于gecko內(nèi)核的替代私有屬性是-moz-column-count。column-count:auto|<number>;

column-