css3新属性box-orient
前言
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的更多相关文章
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
- css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...
- CSS3新属性注释及实例
这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...
- css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...
- css3新属性运用
1.css3新单位vh.vw,这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px.同理,如果显示窗口宽度为750px ...
- CSS3新属性之---flex box布局实例
flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...
随机推荐
- MySQL知识总结(一)安装与配置(Linux CentOS)
1 安装 环境 CentOS yum install -y mysql-server mysql mysql-deve service启动 1.1 启动 service mysqld start 1. ...
- Windows Live Writer 2012在Blogjava管理和发布博客
下载Windows Live Writer 2012的完整版本(wlsetup-all.exe),安装的时候减少网络下载消耗的时间.注:有些平台可能还需要下载DotNet3.5(dotnetfx35. ...
- n阶方阵的最值问题和对角线的和问题
如题! package 矩阵2; public class JuZheng { public static void main(String args[]) { int array[][] = { { ...
- MySQL高级知识(三)——索引
前言:索引在sql调优部分占据着重要的位置,了解并深入索引对我们来说也是非常重要的.本篇主要介绍MySQL中索引的相关知识点. 1.索引是什么 MySQL官方对索引的定义:索引(Index)是帮助My ...
- WPF调用zxing生成二维码
1.登录http://zxingnet.codeplex.com/,下载对应.net版本的zxing库 2.引入zxing.dll 3.新建界面控件 using System; using Syste ...
- 动态记忆网络(DMN)
论文:Ask Me Anything: Dynamic Memory Networks for Natural Language Processing 1.概述 Question answering( ...
- 【移动端】icon中ng-cordova使用
cordova介绍 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova支持如下7种移动操作系统:iOS ...
- ③---Java项目管理工具MAVEN安装与配置
Java项目管理工具MAVEN安装配置以下将为大家介绍Java项目管理工具MAVEN安装及其配置. 一.下载MAVEN安装文件 maven下载地址:https://maven.apache.org/d ...
- 在Windows .NET平台下使用Memcached (Enyim使用)
1. 启动并配置Memcached的服务端 1. 下载Memcached http://download.csdn.net/download/ful1021/7969231 2. 解压到任意目录下, ...
- 【转】从零开始玩转logback
概述 LogBack是一个日志框架,它与Log4j可以说是同出一源,都出自Ceki Gülcü之手.(log4j的原型是早前由Ceki Gülcü贡献给Apache基金会的)下载地址:http://l ...