您好,登錄后才能下訂單哦!
這篇文章主要介紹怎么用CSS3中box-orient屬性來布局方向,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
在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ì)生效。
舉例:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3box-orient屬性</title>
<styletype="text/css">
body
{
display:-webkit-box;/*定義元素為盒子顯示,注意書寫*/
-webkit-box-orient:horizontal;/*定義盒子元素內(nèi)的元素從左到右流動(dòng)顯示*/
}
div{height:100px;}
#box1{background:red;}
#box2{background:blue;}
#box3{background:yellow;}
</style>
</head>
<body>
<divid="box1">盒子1</div>
<divid="box2">盒子2</div>
<divid="box3">盒子3</div>
</body>
</html>
是從VCDV型從常出現(xiàn)png.png
分析:
在CSS2.1中,HTML文檔流的方向?yàn)椤皬纳系较隆?,但是使用彈性盒模型之后,我們可以重新定義文檔流的方向?yàn)椤皬淖蟮接摇?。如果要開啟彈性盒子模型,我們必須要設(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)核瀏覽器,則需要寫成“display:-moz-box;”。注意是“display:-moz-box;”,而不是“-moz-display:box;”。
這個(gè)例子中,彈性盒子內(nèi)部的“子元素”的寬度是由內(nèi)容撐開的。如果沒有內(nèi)容,則“子元素”不會(huì)有寬度。當(dāng)然,我們也可以給“子元素”定義一定的寬度。
以上是“怎么用CSS3中box-orient屬性來布局方向”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。