怎樣利用CSS3中box-orient屬性來(lái)布局方向
這篇文章給大家分享的是有關(guān)怎樣利用CSS3中box-orient屬性來(lái)布局方向的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，先為米林等服務(wù)建站，米林等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為米林企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
在CSS3彈性盒子模型中，我們可以使用box-orient屬性定義彈性盒子內(nèi)部中“子元素”的排列方向。也就是盒子內(nèi)部的子元素是橫著排，還是豎著走。
box-orient屬性取值如下：
horizontal 彈性盒子“從左到右”在一條水平線上顯示它的“子元素”
vertical 彈性盒子“從上到下”在一條垂直線上顯示它的“子元素”
inline-axis 彈性盒子“沿著內(nèi)聯(lián)軸”顯示它的“子元素”（默認(rèn)值）
block-axis 彈性盒子“沿著塊軸”顯示它的“子元素”
注意：在使用之前，用戶必須先把父元素的display屬性設(shè)置為box或者inline-box，彈性盒子模型才會(huì)生效。
舉例：
CSS3 box-orient屬性
盒子1
盒子2
盒子3
分析：
在CSS2.1中，HTML文檔流的方向?yàn)椤皬纳系较隆?，但是使用彈性盒模型之后，我們可以重新定義文檔流的方向?yàn)椤皬淖蟮接摇薄Ｈ绻_(kāi)啟彈性盒子模型，我們必須要設(shè)置父元素的display屬性值為box（或inline-box）才行。
在傳統(tǒng)布局方式下，如果定義并列顯示的三個(gè)欄目塊顯示為行內(nèi)塊狀（display:inline-block;）或者內(nèi)聯(lián)元素（display:inline;），則也可以實(shí)現(xiàn)相同的設(shè)計(jì)效果，但是顯示技術(shù)卻完全不同。
“display:-webkit-box;”兼容webkit內(nèi)核瀏覽器，如果是moz內(nèi)核瀏覽器，則需要寫(xiě)成“display:-moz-box;”。注意是“display: -moz-box;”，而不是“-moz-display: box;”。
這個(gè)例子中，彈性盒子內(nèi)部的“子元素”的寬度是由內(nèi)容撐開(kāi)的。如果沒(méi)有內(nèi)容，則“子元素”不會(huì)有寬度。當(dāng)然，我們也可以給“子元素”定義一定的寬度。
感謝各位的閱讀！關(guān)于怎樣利用CSS3中box-orient屬性來(lái)布局方向就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
新聞名稱：怎樣利用CSS3中box-orient屬性來(lái)布局方向
文章分享：http://m.jiaotiyi.com/article/jdhjoj.html