前言

box-orient属性经常与display:box属性结合使用

div
{
width:350px;
height:100px;
border:1px solid black; /* Firefox */
display:-moz-box;
-moz-box-orient:horizontal; /* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal; /* W3C */
display:box;
box-orient:horizontal;
}

定义和用法

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

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

默认值: inline-axis
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxOrient="vertical"

语法

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

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

浏览器支持

目前没有浏览器支持 box-orient 属性。

Firefox 支持替代的 -moz-box-orient 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

css3新属性box-orient的更多相关文章

  1. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  4. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  5. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  6. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

  7. CSS3新属性注释及实例

    这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

  8. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  9. css3新属性运用

    1.css3新单位vh.vw,这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px.同理,如果显示窗口宽度为750px ...

  10. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

随机推荐

  1. python3编写网络爬虫17-验证码识别

    一.验证码识别 1.图形验证码的识别 识别图形验证码需要 tesserocr 库 OCR技术识别(光学字符识别,是指通过扫描字符,然后通过其形状将其翻译成电子文本的过程.)例如 中国知网注册页面 ht ...

  2. 使用selenium时,使用从系统启动浏览器与通过自动化驱动方式启动浏览器控件ID不一样解决方法

    最近遇到一个怪事,通过正常打开浏览器,按照正常的web登录然后点击进入系统流程,将各控件的ID识别成功,然后使用 python3+selenium写好脚本,高高兴兴的用脚本跑时老是提示找不到控件,然后 ...

  3. 部署与管理ZooKeeper(版本有点老,3.4.3)

    本文以ZooKeeper3.4.3版本的官方指南为基础:http://zookeeper.apache.org/doc/r3.4.3/zookeeperAdmin.html,补充一些作者运维实践中的要 ...

  4. IO的详细解释:It's all about buffers: zero-copy, mmap and Java NIO

    There are use cases where data need to be read from source to a sink without modification. In code t ...

  5. centos7 mongodb安装

    参考文档 http://www.runoob.com/mongodb/mongodb-connections.html https://www.cnblogs.com/layezi/p/7290082 ...

  6. Python学习笔记(3)-字符串

    创建字符串 一对单引号或双引号 >>> 'hello world' 'hello world' >>> "hello world" 'hello ...

  7. Emacs 自动补全插件 ycmd

    Emacs 自动补全,最好的插件当属 ycmd.以下记录我的安装过程. 1. 安装 ycmd server github 官方地址: https://github.com/Valloric/ycmd ...

  8. javascript之传输加密

    为什么要使用javascript加密呢?服务端加密远远不够,客户端或者浏览器端也需要加密,以此保证传输信息过程的安全. 今天就我工作中说说这么几种加密算法及其对应的应用场景,如下所示: base64 ...

  9. 洛谷题解 P1031 【均分纸牌】

    这道题很简单 原理是从左到右一个一个排,把差值m加起来加到后面一堆牌里 具体ac代码如下: #include<cstdio> #include<iostream> #inclu ...

  10. CF617E XOR and Favorite Number

    CF617E XOR and Favorite Number 已知一个序列 \(a_1,\ a_2,\ \cdots,\ a_n\) 和 \(k\) ,\(m\) 次询问给出 \(l,\ r\) ,求 ...