首页 > 代码库 > [css 实践篇] CSS box-orient

[css 实践篇] CSS box-orient

2024-10-09 18:30:02   210人阅读

定义和用法

box-orient 属性规定框的子元素应该被水平或垂直排列。

提示：水平框中的子元素从左向右进行显示，而垂直框的子元素从上向下进行显示。不过，box-direction 和 box-ordinal-group 能够改变这种顺序。

默认情况下，HTML DOM元素沿着内联轴放置其内容。此CSS属性将仅适用于CSS display值为 box 或的HTML元素 inline-box

语法

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

值描述
horizontal 在水平行中从左向右排列子元素。
vertical 从上向下垂直排列子元素。
inline-axis 沿着行内轴来排列子元素（映射为 horizontal）。
block-axis 沿着块轴来排列子元素（映射为 vertical）。
inherit 应该从父元素继承 box-orient 属性的值。

 

 

 

 

 

实例：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>CSS box-orient example</title>
 5     <style>
 6       div.example {
 7         display: -moz-box;                /* Mozilla */
 8         display: -webkit-box;             /* WebKit */
 9         display: box;                     /* As specified */
10 
11         /* Children should be oriented vertically */
12         -moz-box-orient: horizontal;      /* Mozilla */
13         -webkit-box-orient: horizontal;   /* WebKit */
14         box-orient: horizontal;           /* As specified */
15       }
16     </style>
17   </head>
18   <body>
19     <div class="example">
20       <p>I will be to the left of my sibling.</p>
21       <p>I will be to the right of my sibling.</p>
22     </div>
23   </body>
24 </html>

效果

I will be to the left of my sibling.I will be to the left of my sibling.该box-orient

属性将导致p示例中的上述两个部分显示在同一行中

兼容

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (Yes)-webkit (Yes)-webkit (Yes)-moz[1] No support (Yes)-webkit 1.1-khtml
3.0-webkit		 
[css 实践篇] CSS box-orient






























        

            
                
                  
                
                

                    联系

                    我们