第4章靈活的盒布局和

第4章靈活的盒布局和界面設(shè)計(jì)表格布局浮動布局div+css靈活的盒布局多列布局4.1靈活的盒布局

為了解決傳統(tǒng)布局中遇到的不足，CSS3新增了新型的盒布局。 使用盒布局，可以實(shí)現(xiàn)盒元素內(nèi)部的多種布局，包括排列方向排列順序空間分配對齊方式4.1.1開啟盒布局

盒布局是CSS3發(fā)展的新型布局方式，它比傳統(tǒng)的浮動布局方式更加完善、更加靈活，而使用方法卻極為簡單。

/*開啟盒布局*/

display:-webkit-box;/*兼容webkit內(nèi)核*/ display:-moz-box;/*兼容gecko內(nèi)核*/ display:box;/*定義為盒子顯示*/4.1.1開啟盒布局

一個(gè)簡單的網(wǎng)頁，從左至右排列三個(gè)欄目：菜單欄、內(nèi)容欄和工具欄。4.1.2元素的布局方向CSS3新增的box-orient屬性，可用于定義盒元素的內(nèi)部布局方向。參數(shù)說明

box-orient:horizontal|vertical|inline-axis|block-axis|inherithorizontal：表示盒子元素在一條水平線上從左到右編排它的子元素；vertical：表示盒子元素在一條垂直線上從上到下編排它的子元素；inline-axis：默認(rèn)值，表示盒子元素沿著內(nèi)聯(lián)軸編排它的子元素，表現(xiàn)為橫向編排；block-axis：表示元素沿著塊軸編排它的子元素，表現(xiàn)為垂直編排；inherit：表示繼承父元素中box-orient屬性的值。4.1.2元素的布局方向示例介紹

/*布局方向設(shè)置為豎直方向*/

-webkit-box-orient:vertical;

-moz-box-orient:vertical;

box-orient:vertical;

4.1.3元素的布局順序

在盒布局下，box-direction屬性可以設(shè)置盒元素內(nèi)部的順序?yàn)檎蚧蛘叻聪颉?shù)說明

box-direction:normal|reverse|inherit;normal：默認(rèn)值，正常順序。垂直布局的盒元素中，內(nèi)部子元素從左到右排列顯示；水平布局的盒元素中，內(nèi)部子元素從上到下排列顯示。reverse：反向。表示盒元素內(nèi)部的子元素的排列顯示順序與normal相反。inherit：表示繼承父元素中box-direction屬性的值。4.1.3元素的布局順序示例介紹

-webkit-box-direction:reverse; -moz-box-direction:reverse; box-direction:reverse;

4.1.4調(diào)整元素的位置 CSS3新增的box-ordinal-group屬性，用于定義盒元素內(nèi)部的子元素的顯示位置。參數(shù)說明

box-ordinal-group:<integer>; <integer>：一個(gè)自然整數(shù)，從1開始，表示子元素的顯示位置。子元素將根據(jù)這個(gè)值重新排序，值相等的，將取決于源代碼的順序。子元素的默認(rèn)值均為1，按照源代碼的位置順序進(jìn)行排列。4.1.4調(diào)整元素的位置示例說明

-webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2;4.1.5彈性空間分配 CSS3新增的box-flex屬性，用于定義盒元素內(nèi)部的子元素是否具有空間彈性。當(dāng)盒元素的尺寸縮?。ɑ驍U(kuò)大）時(shí)，被定義為有空間彈性的子元素的尺寸也會縮小（或擴(kuò)大）。每當(dāng)盒元素有額外的空間時(shí)，具有空間彈性的子元素，會擴(kuò)大自身大小來填補(bǔ)這一空間。參數(shù)說明

box-flex:<value>; <value>：該屬性值是一個(gè)整數(shù)或者小數(shù)，不可為負(fù)值，默認(rèn)值為0.0。 使用空間彈性屬性設(shè)置，使得盒元素的內(nèi)部元素的總寬度和總高度，始終等于盒元素的寬度與高度。不過只有當(dāng)盒元素具有確定的寬度或高度，才能表現(xiàn)出子元素的空間彈性。4.1.5彈性空間分配子元素的彈性空間

/*設(shè)置菜單欄具有空間彈性*/ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1;4.1.5彈性空間分配多個(gè)子元素的彈性空間

/*設(shè)置菜單欄具有空間彈性*/ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; /*設(shè)置文章列表欄有空間彈性*/ -webkit-box-flex:2; -moz-box-flex:2; box-flex:2;4.1.6元素的對其方式 CSS3新增的box-pack屬性用于定義盒元素內(nèi)部水平對齊方式。參數(shù)說明

box-pack:start|end|center|justify;start：默認(rèn)值，表示所有的子元素都顯示在盒元素的左側(cè)，額外的空間顯示在盒元素右側(cè)。end：表示所有的子元素都顯示在盒元素的右側(cè)，額外的空間顯示在盒元素左側(cè)。center：表示所有的子元素居中顯示，額外的空間平均分配在兩側(cè)；justify：表示所有的子元素散開顯示，額外的空間在子元素之間平均分配，在第一個(gè)子元素之前和最后一個(gè)子元素之后不分配空間。4.1.6元素的對其方式 CSS3新增的box-align屬性，用于定義盒元素內(nèi)部垂直對齊方式。參數(shù)說明

box-align:start|end|center|baseline|stretch;start：表示所有的子元素都顯示在盒元素的頂部，額外的空間顯示在盒元素底部。end：表示所有的子元素都顯示在盒元素的底部，額外的空間顯示在盒元素頂部。center：表示所有的子元素垂直居中顯示，額外的空間平均分配在盒元素的上下兩側(cè)；baseline：表示所有的子元素沿著基線顯示。stretch：默認(rèn)值，表示每個(gè)子元素的高度被拉伸到適合的盒元素高度。4.1.6元素的對其方式自適應(yīng)居中

/*水平居中*/ -webkit-box-pack:center; -moz-box-pack:center; box-pack:center; /*垂直居中*/ -webkit-box-align:center; -moz-box-align:center; box-align:center;4.1.6元素的對其方式底部對齊

/*左邊對齊*/ -webkit-box-pack:start; -moz-box-pack:start; box-pack:start; /*底部對齊*/ -webkit-box-align:end; -moz-box-align:end; box-align:end;4.1.7使用新型盒布局設(shè)計(jì)網(wǎng)頁案例簡介一個(gè)典型的小型網(wǎng)頁，從上至下包括頁頭、主體區(qū)域和頁腳三個(gè)部分。主體部分從左至右分為三欄，分別是導(dǎo)航欄、文章欄、側(cè)邊欄。文章內(nèi)容欄又可以從上至下分為：標(biāo)題、內(nèi)容、日期三欄。4.2增強(qiáng)的盒模型盒模型是網(wǎng)頁設(shè)計(jì)中最基本、最重要的模型。CSS3新增的與盒模型有關(guān)的屬性:盒子陰影盒子尺寸溢出處理 為前端設(shè)計(jì)師帶來更多的便利及人性化設(shè)計(jì)。4.2.1盒子陰影 CSS3新增的box-shadow屬性，可以定義元素的陰影效果。關(guān)于該屬性，設(shè)計(jì)師們尤其喜歡。到目前為止，已經(jīng)獲得更多瀏覽器的支持和更加廣泛的使用。1.參數(shù)說明

box-shadow:none|[inset]?[<length>]{2,4}[<color>]?none：默認(rèn)值，表示沒有陰影。inset：可選值，表示設(shè)置陰影的類型為內(nèi)陰影，默認(rèn)為外陰影。<length>：是由浮點(diǎn)數(shù)字和單位標(biāo)識符組成的長度值，可取負(fù)值。四個(gè)length分別表示陰影的水平偏移、垂直偏移、模糊距離和陰影大小，其中水平偏移和垂直偏移是必需的值，模糊半徑和陰影大小可選。<color>：可選，表示陰影的顏色。4.2.1盒子陰影2.盒子的陰影效果

-webkit-box-shadow:5px5px5px#333; -moz-box-shadow:5px5px5px#333; box-shadow:5px5px5px#333;

4.2.1盒子陰影2.盒子的陰影效果

-webkit-box-shadow:-5px-5px5px#00f; -moz-box-shadow:-5px-5px5px#00f; box-shadow:-5px-5px5px#00f;

4.2.1盒子陰影2.盒子的陰影效果

-webkit-box-shadow:-5px-5px5px0#00f, 5px5px5px0#333; -moz-box-shadow:-5px-5px5px0#00f, 5px5px5px0#333; box-shadow:-5px-5px5px0#00f, 5px5px5px0#333;4.2.1盒子陰影3.盒子的描邊效果

-webkit-box-shadow:005px5px#333; -moz-box-shadow:005px5px#333; box-shadow:005px5px#333; -webkit-box-shadow:0005px#333; -moz-box-shadow:0005px#333; box-shadow:0005px#333;4.2.1盒子陰影4.盒子的內(nèi)陰影

-webkit-box-shadow:inset5px5px5px#333; -moz-box-shadow:inset5px5px5px#333; box-shadow:inset5px5px5px#333;4.2.2盒子尺寸的計(jì)算方法對于前端工程師和設(shè)計(jì)人員來說，應(yīng)該都有過這樣的經(jīng)歷：當(dāng)為一個(gè)盒元素同時(shí)設(shè)置border、padding和width或height屬性時(shí)，在不同的瀏覽器下，會有不同的尺寸。特別在IE瀏覽器中，width和height是包含border和padding的，標(biāo)準(zhǔn)的width和height是不包含border和padding的。為此，要寫大量的hack，以滿足不同瀏覽器的需要。CSS3對盒模型進(jìn)行了改善，新增的box-sizing屬性，可用于定義width和height的計(jì)算方法，可自由定義是否包含border和padding。4.2.2盒子尺寸的計(jì)算方法1.參數(shù)說明

box-sizing:content-box|padding-box|border-box|inherit;content-box：默認(rèn)值，計(jì)算方法為width/height=content，表示指定的寬度和高度僅限內(nèi)容區(qū)域，邊框和內(nèi)邊距的寬度不包含在內(nèi)。padding-box：計(jì)算方法為width/height=content+padding，表示指定的寬度和高度包含內(nèi)邊距和內(nèi)容區(qū)域，邊框?qū)挾炔话趦?nèi)。border-box：計(jì)算方法為width/height=content+padding+border，表示指定的寬度和高度包含邊框、內(nèi)邊距和內(nèi)容區(qū)域。inherit：表示繼承父元素中box-sizing屬性的值。4.2.2盒子尺寸的計(jì)算方法2.示例介紹

box-sizing:border-box; box-sizing:padding

-box; box-sizing:content

-box;4.2.3盒子溢出內(nèi)容處理在CSS2.1規(guī)范中，就已經(jīng)有處理溢出的overflow屬性，該屬性定義當(dāng)盒子的內(nèi)容超出盒子邊界時(shí)的處理方法。CSS3新增的overflow-x和overflow-y屬性，是對overflow屬性的補(bǔ)充，分別表示水平方向上的溢出處理和垂直方向上的溢出處理。1.參數(shù)說明

overflow-x:visible|auto|hidden|scroll|no-display|no-content; overflow-y:visible|auto|hidden|scroll|no-display|no-content;visible：默認(rèn)值，盒子溢出時(shí)，不裁剪溢出的內(nèi)容，超出盒子邊界的部分將顯示在盒元素之外。auto：盒子溢出時(shí)，顯示滾動條。hidden：盒子溢出時(shí)，溢出的內(nèi)容將被裁剪，并且不提供滾動條。scroll：始終顯示滾動條。no-display：當(dāng)盒子溢出時(shí)，不顯示元素。該屬性值是新增的。no-conten：當(dāng)盒子溢出時(shí)，不顯示內(nèi)容。該屬性值是新增的。4.2.3盒子溢出內(nèi)容處理2.示例介紹4.2.4設(shè)計(jì)網(wǎng)站服務(wù)條款頁面案例簡介一個(gè)主體區(qū)域，將把該主體區(qū)域設(shè)計(jì)成凸起的效果，然后在這個(gè)凸起的區(qū)域里放置內(nèi)容；由于條款內(nèi)容較長，還需要處理內(nèi)容的溢出，

4.3增強(qiáng)的用戶界面設(shè)計(jì)CSS3在用戶界面的設(shè)計(jì)方面有很大的改進(jìn)，主要有以下幾個(gè)方面：改變元素尺寸定義外輪廓線讓元素變身給元素添加內(nèi)容等。4.3.1允許用戶改變尺寸

如果你在使用Firefox或Chrome，那么你肯定注意到了textarea標(biāo)簽元素的右下角默認(rèn)有個(gè)小的手柄，它可以讓你調(diào)整它們的大小。CSS3新增的resize屬性，可以把其他元素也應(yīng)用同樣的效果。1.參數(shù)說明

resize:none|both|horizontal|vertical|inherit;none：默認(rèn)值，表示用戶不能調(diào)整元素。both：表示用戶可以調(diào)整元素的寬度和高度。horizontal：表示用戶可以調(diào)整元素的寬度，但不能調(diào)整元素的高度。vertical：表示用戶可以調(diào)整元素的高度，但不能調(diào)整元素的寬度。inherit：表示繼承父元素。4.3.1允許用戶改變尺寸2.示例介紹

resize:both; overflow:auto;

提示：resize屬性需要和溢出處理屬性overflow或overflow-x或overflow-y一起使用，才能把元素定義成可以調(diào)整大小的，且溢出屬性值不能為visible。4.3.2定義外輪廓線

outline屬性可以定義一個(gè)元素的外輪廓線，以突出顯示該元素。1.參數(shù)說明

outline:[outline-width]||[outline-style]||[outline-color]|inherit;<outline-width>：定義元素輪廓的寬度；<outline-style>：定義元素輪廓的樣式風(fēng)格；<outline-color>：定義元素輪廓的顏色；inherit：表示繼承父元素的輪廓樣式。4.3.2定義外輪廓線2.示例介紹

outline:2pxsolid#fc6;

4.3.3偽裝的元素 CSS新增的appearance屬性，可以方便的把元素偽裝成其他類型的元素，給界面設(shè)計(jì)帶來極大的靈活性。1.參數(shù)說明

appearance:normal|icon|window|button|menu|field;normal：正常的修飾元素；icon：把元素修飾的像一個(gè)圖標(biāo)；window：把元素修飾的像一個(gè)視窗；button：把元素修飾的像一個(gè)按鈕；menu：把元素修飾的像菜單；field：把元素修飾的像一個(gè)輸入框。4.3.3偽裝的元素2.示例介紹

div,a,input{

-webkit-appearance:button; -moz-appearance:button; appearance:button;}div、a和input均修飾為按鈕風(fēng)格4.3.4為元素添加內(nèi)容

如果給元素插入內(nèi)容，很少有人會想到使用CSS樣式表來實(shí)現(xiàn)。在CSS中，可以使用content屬性為元素添加內(nèi)容，這已然替代了部分Javascript的功能。1.參數(shù)說明

content:none|normal|<string>|counter(<counter>)