示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。
示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。
頁(yè)面中其它內(nèi)容
使用上面代碼頁(yè)面顯示如下所示：
但是當(dāng)上面示例中div1和div2中任何一個(gè)元素中添加了一點(diǎn)不一樣的東西，比如說(shuō)增加一個(gè)圖片
那么顯示的頁(yè)面效果就會(huì)如下所示，（也就是說(shuō)無(wú)法實(shí)現(xiàn)兩個(gè)元素的詢(xún)問(wèn)對(duì)齊）
那么該怎么樣解決這個(gè)問(wèn)題呢
css3中加入多欄布局，使用多欄布局可以將一個(gè)元素中的內(nèi)容分成多欄顯示，并且確保各欄中內(nèi)容底部對(duì)齊。主要可以使用如下屬性
column-count：要顯示的列數(shù)
column-width：當(dāng)前列顯示的寬度
column-gap:多欄之間的間隔距離
column-rule:在欄與欄之間增加一條間隔線(xiàn)，并設(shè)置該間隔線(xiàn)的寬度顏色等
一般性頁(yè)面布局都是分成左中右，像如下的例子一樣的
左側(cè)邊欄
示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。 示例文字。相對(duì)來(lái)說(shuō)比較長(zhǎng)的示例文字。
代碼運(yùn)行后的界面效果如下所示：
可以看到使用float屬性或position屬性，左右兩側(cè)或多欄中div元素的底部并沒(méi)有對(duì)齊
下面使用盒布局的方式來(lái)使得底部對(duì)齊，將上面的css改為如下所示：
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }其實(shí)也就是在最外層的div上使用了display:box,并去除了里面三個(gè)div的float:left的屬性，界面運(yùn)行效果圖如下所示：
這里順便說(shuō)一下，使用盒而已和多欄布局的區(qū)別：1、多欄布局每欄寬度必須相等2、使用多欄布局不可能具體指定什么欄顯示什么內(nèi)容，也就是說(shuō)多欄布局適合在使用顯示文章內(nèi)容的時(shí)候而不適合用于安排整個(gè)網(wǎng)頁(yè)的各個(gè)元素的結(jié)構(gòu)
對(duì)于上面的例子，如果我們想讓這三個(gè)div的總寬度等于瀏覽器窗口的寬度，也就是說(shuō)隨著瀏覽器窗口寬度的改變而改變，應(yīng)該怎么做呢
事實(shí)上很簡(jiǎn)單，只要在中間的div上增加-webkit-box-flex:1;-moz-box-flex:1; 這個(gè)屬性就可以了,css代碼如下所示：
#container { display:-moz-box; display:-webkit-box; } #left-sidebar { width: 200px; padding: 20px; background-color: orange; } #contents { -webkit-box-flex:1; -moz-box-flex:1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }界面運(yùn)行效果如所示所示：
那么我們?cè)鯓痈淖冊(cè)氐娘@示順序呢，比如說(shuō)我想讓左側(cè)欄在最右，內(nèi)容欄在最左顯示，怎么辦？
css3提供了一個(gè)屬性box-ordinal-group屬性來(lái)改變各元素的顯示順序，大家看看我的css只是在里面的每個(gè)div增加了box-ordinal-group，就輕而易舉的改變了它們的顯示順序
#container { display: -moz-box; display: -webkit-box; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }界面效果圖如下所示（是不是挺神奇的）：
那如果要改變?cè)氐呐帕蟹较蚰?，在css3中可以使用box-orient來(lái)指定多個(gè)元素的排列方向。只需要在最外層的div上增加box-orient屬性就可以了。css代碼如下所示：
#container { display: -moz-box; display: -webkit-box; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #left-sidebar { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; width: 200px; padding: 20px; background-color: orange; } #contents { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-flex: 1; -moz-box-flex: 1; width: 300px; padding: 20px; background-color: yellow; } #right-sidebar { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; width: 200px; padding: 20px; background-color: limegreen; } #left-sidebar, #contents, #right-sidebar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }界面立馬就完全變了
在使用盒布局時(shí)，元素的寬度與高度具有自適應(yīng)性，也就是說(shuō)元素的寬度與高度可以根據(jù)排列方向的改變而改變
看下面的例子，整個(gè)html界面代碼如下所示：
示例文字A 示例文字B 示例文字C
界面效果如下所示：
當(dāng)我們改變上述代碼container里面的css如下所示（也就是改變排列方式為垂直方向）：
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; }則界面效果圖如下所示：
看了上面的效果圖，大家一定在想，容器中總還是留出一大片空白的區(qū)域，應(yīng)該要怎樣來(lái)消除呢？其實(shí)可以使用css3中的彈性盒布局來(lái)解決，也就是使得多個(gè)參與排列的元素的總寬度與總高度始終等于容器的寬度與高度
下面我們來(lái)修改一下上述代碼（將排列方向設(shè)置為水平，在中間一個(gè)子div上加入box-flex屬性）
css樣式如下所示：
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; width: 500px; height: 300px; } #text-a { background-color: orange; } #text-b { background-color: yellow; -moz-box-flex:1; -webkit-box-flex:1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }界面顯示效果便如下所示了
當(dāng)然你也可以設(shè)置排列方向?yàn)榇怪?，那么界面自然?huì)顯示成如下這樣了
現(xiàn)在我們不只對(duì)中間的子div加上box-flex，也對(duì)第一個(gè)子div加上box-flex，那么結(jié)果會(huì)怎么樣呢
#container { display: -moz-box; display: -webkit-box; border: 5px solid blue; -moz-box-orient: vertical; -webkit-box-orient: vertical; width: 500px; height: 300px; } #text-a { background-color: orange; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-b { background-color: yellow; -moz-box-flex: 1; -webkit-box-flex: 1; } #text-c { background-color: limegreen; } #text-a, #text-b, #text-c { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }如果三個(gè)子div都加上box-flex屬性，那么每個(gè)div高度等于容器的高度除以3，也就是效果圖所示所示：
其實(shí)box-flex:1就是讓其占據(jù)剛剛好的寬度，也就是說(shuō)除去其它的部分，它剛好占滿(mǎn)全部
你動(dòng)手去嘗試一下用box-flex:2，會(huì)發(fā)現(xiàn)box-flex:2并非box-flex:1的兩倍就是這個(gè)道理，1只是代表單位像素，也就是剛剛好的寬高，并非代表數(shù)值
在css2中，如果想方案水平居中就只能用text-align:center，但是卻不能讓文字垂直居中，在css3中，只要讓div元素使用box-align屬性就行了。
示例代碼
div { display: -moz-box; display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; width: 200px; height: 100px; background-color: pink; }如果在div容器中放入“示例文字”這幾個(gè)字，界面運(yùn)行效果就會(huì)如下所示：（同樣，如果我們?cè)赿iv里面放入圖像也是可以實(shí)現(xiàn)水平和垂直方向居中的）
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
