目前没有浏览器支持 box-orient 属性。
Firefox 支持替代的 -moz-box-orient 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性
语法:
box-orient:horizontal|vertical|inline-axis|block-axis|inherit;
值 | 描述 | 测试 |
---|---|---|
horizontal | 在水平行中从左向右排列子元素。 | 测试 |
vertical | 从上向下垂直排列子元素。 | 测试 |
inline-axis | 沿着行内轴来排列子元素(映射为 horizontal)。 | 测试 |
block-axis | 沿着块轴来排列子元素(映射为 vertical)。 | 测试 |
inherit | 应该从父元素继承 box-orient 属性的值。 |
案例:
css设置字体,css 精美表格,discuz 修改模板css,css设置轮播图个数,css简单图片轮播代码,css 有内容选择器,css3 跳动的圆圈
<!DOCTYPEhtml> <html> <head> <style> div { width:350px; height:150px; border:1pxsolidblack; /*Firefox*/ display:-moz-box; -moz-box-orient:horizontal; /*Safari,Opera,andChrome*/ display:-webkit-box; -webkit-box-orient:horizontal; /*W3C*/ display:box; box-orient:horizontal; } </style> </head> <body> <div> <p>段落1。</p> <p>段落2。</p> <p>段落3。</p> </div> <p><b>注释:</b>IE不支持box-orient属性。</p> </body> </html>
其中使用box-orient子元素p进行了横排显示,有点像float:left的意思吧?!