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

原创 国哥笔记  2019-01-10 11:37  阅读 399 views 次

box-orient属性定义及用法

box-orient属性是css3中新增属性,是使用来指定一个box子元素是否应按水平或垂直排列,目前主流浏览器都还不支持该属性,但是一些浏览器都有自己的私有属性代替该属性。Firefox内核的浏览器可以通过私有属性- moz-box-orient实现box-orient属性的效果;Safari,、Opera和Chrome内核的浏览器可以通过私有属性-webkit-box-orient实现box-orient属性的效果;

box-orient属性语法格式

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

属性值说明

  • horizontal:指定子元素在一个水平线上从左至右排列;
  • vertical:从顶部向底部垂直布置子元素;
  • inline-axis:子元素沿着内联坐标轴(映射到横向);
  • block-axis :子元素沿着块坐标轴(映射到垂直);
  • inherit:从父元素继承box-orient属性的属性值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-orient属性规定box子元素应该被水平或垂直排列</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 100px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-orient:horizontal;/* W3C */
-moz-box-orient:horizontal;/* Firefox */
-webkit-box-orient:horizontal;/* Safari, Opera, and Chrome */
}
.box2{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-orient:vertical;/* W3C */
-moz-box-orient:vertical;/* Firefox */
-webkit-box-orient:vertical;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1"><p>1</p><p>2</p></div>
<div class="box2"><p>1</p><p>2</p></div>
</body>
</html>

运行结果:

box-orient属性

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-box-orient.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情