溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎樣利用CSS3中box-orient屬性來布局方向

發(fā)布時(shí)間：2020-08-31 14:33:09 來源：億速云 閱讀：191 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)怎樣利用CSS3中box-orient屬性來布局方向的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

在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ì)生效。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-orient屬性</title>
    <style type="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>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>
</body>
</html>

怎樣利用CSS3中box-orient屬性來布局方向

分析：

在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)然，我們也可以給“子元素”定義一定的寬度。

感謝各位的閱讀！關(guān)于怎樣利用CSS3中box-orient屬性來布局方向就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手