本篇文章為大家展示了如何在css中使用display:box 屬性，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司一直通過(guò)網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷(xiāo)幫助企業(yè)獲得更多客戶(hù)資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、營(yíng)銷(xiāo)型網(wǎng)站服務(wù)為核心業(yè)務(wù)。10余年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開(kāi)發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

一、display:box;

在元素上設(shè)置該屬性，可使其子代排列在同一水平上，類(lèi)似display:inline-block;。

二、可在其子代設(shè)置如下屬性

前提：使用如下屬性，必須在父代設(shè)置display:box;

1.box-flex:number;

　　1）占父級(jí)元素寬度的number份

　　2）若子元素設(shè)置固定寬度，則該子元素應(yīng)用固定寬度，其他未設(shè)置固定寬度的字元素將余下的父級(jí)寬度（父級(jí)-已設(shè)置固定寬度的子代元素的總寬度按　number占份數(shù)

　　3）若子元素有margin值，則按余下（父級(jí)寬度-子代固定總寬度-總margin值）寬度占number份

2.box-orient:horizontal/vertical

　　在父級(jí)上設(shè)置該屬性，則子代按水平排列或豎直排列。

　　注：所有主流瀏覽器不支持該屬性，必須加上前綴。

　　1）horizontal  水平排列，子代總width=父級(jí)width。若父級(jí)固定寬度，則子代設(shè)置的width無(wú)效，子代會(huì)撐滿父級(jí)寬度。

　　2）vertical  垂直排列，子代總height=父級(jí)height。若父級(jí)固定高度，則子代設(shè)置的height無(wú)效，子代會(huì)撐滿父級(jí)高度。

3.box-direction:normal/reverse

　　在父級(jí)上設(shè)置該屬性，確認(rèn)子代的排列順序。

　　1）normal  默認(rèn)值，子代按html順序排列

　　2）reverse  反序

4.box-align:start/end/center/stretch

　　在父級(jí)設(shè)置，子代的垂直對(duì)齊方式。

　　1）start  垂直頂部對(duì)齊

　　2）end 垂直底部對(duì)齊

　　3）center 垂直居中對(duì)齊

　　4）stretch 拉伸子代的高度，與父級(jí)設(shè)置的高度一致。子代height無(wú)效。

5.box-pack:start/end/center

　　在父級(jí)設(shè)置，子代的水平對(duì)齊方式。

　　1）start  水平左對(duì)齊

　　2）end  水平右對(duì)齊

　　3）center  水平居中對(duì)齊

上述內(nèi)容就是如何在css中使用display:box 屬性，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：如何在css中使用display:box屬性-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://weahome.cn/article/gcsdd.html