溫馨提示×

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

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

css中box-orient屬性有什么用

發(fā)布時(shí)間：2022-02-25 11:44:11 來源：億速云 閱讀：167 作者：小新 欄目：web開發(fā)

小編給大家分享一下css中box-orient屬性有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　cssbox-orient屬性怎么用？

　　box-orient屬性規(guī)定框的子元素是否應(yīng)水平或垂直排列。

　　語法：

　　box-orient:horizontal|vertical|inline-axis|block-axis|inherit;

　　屬性值：

　　horizontal：在水平行中從左向右排列子元素。

　　vertical：從上向下垂直排列子元素。

　　inline-axis：沿著行內(nèi)軸來排列子元素（映射為horizontal）。

　　block-axis：沿著塊軸來排列子元素（映射為vertical）。

　　inherit：應(yīng)該從父元素繼承box-orient屬性的值。

　　說明：水平框中的子元素從左向右進(jìn)行顯示，而垂直框的子元素從上向下進(jìn)行顯示。不過，box-direction和box-ordinal-group能夠改變這種順序。

　　注：目前所有主流瀏覽器都不支持box-orient屬性。Firefox通過私有屬性-MOZ-box-orient支持。Safari,Opera,和Chrome通過私有屬性-webkit-box-orient支持。

　　cssbox-orient屬性示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　div{

　　width:350px;

　　height:150px;

　　border:1pxsolidblack;

　　/*Firefox*/

　　display:-moz-box;

　　-moz-box-orient:horizontal;

　　/*Safari,Opera,andChrome*/

　　display:-webkit-box;

　　-webkit-box-orient:horizontal;

　　/*W3C*/

　　display:box;

　　box-orient:horizontal;

　　}

　　</style>

　　</head>

　　<body>

　　<div>

　　<p>段落1。</p>

　　<p>段落2。</p>

　　<p>段落3。</p>

　　</div>

　　<p><b>注釋：</b>IE不支持box-orient屬性。</p>

　　</body>

　　</html>

css中box-orient屬性有什么用

以上是“css中box-orient屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

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

AI
助
手