第12章-CSS-3-0盒模型和界面設計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12.3增強的CSS3.0盒模型

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

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

overflow-x和overflow-y屬性——元素溢出內容處理在CSS2.0規(guī)范中，就已經有處理溢出的overflow屬性，該屬性定義當盒子的內容超出盒子邊界時的處理方法。CSS3.0新增的overflow-x和overflow-y屬性，是對overflow屬性的補充，分別表示水平方向上額溢出處理和垂直方向上的溢出處理。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)的排版方式。它將頁面首先在整體上進行<div>標簽的分塊，然后對各個塊進行CSS定位，最后再在各個塊中添加相應的內容。通過CSS排版的頁面，更新十分容易，甚至是頁面的拓撲結構，都可以通過修改CSS屬性來重新定位。

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

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

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

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

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

12.5

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

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

outline屬性——輪廓外邊框CSS3.0中新增的outline屬性可以為元素添加外輪廓線，以突出顯示元素。外輪廓線看起來很像元素邊框，而且語法也與邊框非常類似，但是外輪廓線不點用元素的尺寸。outline:[outline-color]||[outline-style]||[outline-width]|inherit;實戰(zhàn)練習——為網(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)頁界面設計帶來極大的靈活性?；趙ebkit內核的替代私有屬性是-webkit-appearance，基于gecko內核的替代私有屬性是-moz-appearance。appearance:normal|icon|window|button|menu|field;實戰(zhàn)練習——將超鏈接文字偽裝成按鈕

content屬性——為元素添加內容content屬性與:before及:after偽元素配合使用，可以將生成的內容放在一個元素內容的前面或后面。content:none|normal|<string>|counter(<counter>)|attr(<attribute>)|url(<url>)|inherit;實戰(zhàn)練習——為網(wǎng)頁元素賦予內容最終文件：光盤\最終文件\第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)頁設計者如果要設計多列布局，有兩種方法，一種是浮動布局，另一種是定位布局。浮動布局比較靈活，但容易發(fā)生錯位，需要添加大量的附加代碼或無用的換行符，增加了不必要的工作量。定位布局可以精確地確定位置，不會發(fā)生錯位，但是無法滿足模塊的適應能力。在CSS3.0中新增了多列布局相關屬性，可以從多個方面去設置：多列的列數(shù)、每列的寬度、列與列之間的距離、列與列之間的分隔線、跨多列設置等，本節(jié)將詳細進行介紹。

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

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

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

column-