zoukankan      html  css  js  c++  java
  • [css 实践篇] CSS box-orient

    定义和用法

    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
    
    
  • 相关阅读:
    Java代码检测工具
    java编程工具
    100-days: The one day
    前端书籍整理
    vue 学习笔记(二)
    从零开始写一个npm包及上传
    Vue Baidu Map 插件的使用
    对数组对象进行过滤
    使用css方法使footer保持在页面的最底部
    判断是第一次打开界面?还是刷新
  • 原文地址:https://www.cnblogs.com/ifannie/p/7060908.html
Copyright © 2011-2022 走看看