css3盒子佈局-定義佈局取向（box-orient）和順序（box-direction）
阿新 • • 發佈：2019-02-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3定位佈局-盒子佈局取向和順序</title>
<style>
div{
height:50px;text-align: center;
}
.d1{
background-color: blue;
width:180px;
height:500px;
}
.d2{
background-color: yellow;
width:600px;
height:500px;
}
.d3{
background-color:pink;
width:180px;
height:500px;
}
/*body{
display: box;
display: -moz-box;
display:-webkit-box;
orient:horizontal;
-moz-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
}*/
body{
display: box;
display: -moz-box;
display:-webkit-box;
orient:horizontal;
-moz-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
-moz-box-direction: reverse;
-webkit-box-direction: reverse;
box-direction:reverse;
}
</style>
</head>
<body>
<!--<h1>定義盒子的佈局取向,屬性值有四個,horizontal代表水平線顯示,vertical代表垂直線顯示,inline-axis代表沿著內聯軸顯示它的子元素,block-axis代表遠著快軸顯示它的子元素</h1>
<div class="d1">佈局1</div>
<div class="d2">佈局2</div>
<div class="d3">佈局3</div>-->
<h1>定義盒子的佈局順序,屬性值有三個,normal代表正常,reverse代表反向顯示順序,inheri代表繼承</h1>
<div class="d1">佈局1</div>
<div class="d2">佈局2</div>
<div class="d3">佈局3</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>css3定位佈局-盒子佈局取向和順序</title>
<style>
div{
height:50px;text-align: center;
}
.d1{
background-color: blue;
width:180px;
height:500px;
}
.d2{
background-color: yellow;
width:600px;
height:500px;
}
.d3{
background-color:pink;
width:180px;
height:500px;
}
/*body{
display: box;
display: -moz-box;
display:-webkit-box;
orient:horizontal;
-moz-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
}*/
body{
display: box;
display: -moz-box;
display:-webkit-box;
orient:horizontal;
-moz-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient:horizontal;
-moz-box-direction: reverse;
-webkit-box-direction: reverse;
box-direction:reverse;
}
</style>
</head>
<body>
<!--<h1>定義盒子的佈局取向,屬性值有四個,horizontal代表水平線顯示,vertical代表垂直線顯示,inline-axis代表沿著內聯軸顯示它的子元素,block-axis代表遠著快軸顯示它的子元素</h1>
<div class="d1">佈局1</div>
<div class="d2">佈局2</div>
<div class="d3">佈局3</div>-->
<h1>定義盒子的佈局順序,屬性值有三個,normal代表正常,reverse代表反向顯示順序,inheri代表繼承</h1>
<div class="d1">佈局1</div>
<div class="d2">佈局2</div>
<div class="d3">佈局3</div>
</body>
</html>