標籤：vertica key bsp head microsoft 預設 com time class
web前端必須瞭解的CSS3盒子模型1、需要瞭解的屬性以及屬性值display:box或者display:inline-boxbox-orient:horizontal | vertical (水平 垂直) 定義盒模型的布局方向box-direction:normal reverse(正序 反序) 元素排列順序box-ordinal-group:number(數值) 設定元素具體位置2、樣本源碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5盒子模型</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
height: 150px;
border: 1px solid red;
/*display:-moz-box;!*Firefox支援最好*!*/
/*display: -webkit-box;*/
/*display: -moz-inline-box;*/
/*display: -webkit-inline-box;*/
/*box-orient定義盒模型布局方向*/
/*display: -webkit-box;*/
/*-moz-box-orient:vertical; !*horizontal預設*!*/
/*-webkit-box-orient: vertical;*/
/*元素排列順序*/
/*display: -webkit-box;*/
/*-moz-box-direction:reverse ;*/
/*-webkit-box-direction:reverse;*/
display: -webkit-box;
}
#box div:nth-child(1){
/*box-ordinal-group設定元素的具體位置*/
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group: 2;
-ms-box-ordinal-group: 2;
}
#box div:nth-child(2){
/*box-ordinal-group設定元素的具體位置*/
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group: 3;
-ms-box-ordinal-group: 3;
}
#box div:nth-child(3){
/*box-ordinal-group設定元素的具體位置*/
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group: 4;
-ms-box-ordinal-group: 4;
}
#box div:nth-child(4){
/*box-ordinal-group設定元素的具體位置*/
-webkit-box-ordinal-group:5;
-moz-box-ordinal-group: 5;
-ms-box-ordinal-group:5 ;
}
#box div:nth-child(5){
/*box-ordinal-group設定元素的具體位置*/
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
}
section div{
width: 100px;
height: 100px;
color: red;
font-size: 35px;
text-align: center;
line-height: 100px;
border: 1px solid #666;
margin: 5px;
}
</style>
</head>
<body>
<section id="box">
<div class="">1</div>
<div class="">2</div>
<div class="">3</div>
<div class="">4</div>
<div class="">5</div>
</section>
</body>
</html>3、樣本圖2.1 display:box(div水平擺放)
圖2.2 display:inline-box(外部的box盒子自動適應裡面的內容 寬改變)
圖2.3 box-direction(這裡是reverse倒序排列)
圖2.4 box-ordinal-group（這裡可以自由設定元素的位置）
【樣本源碼】您可點擊這裡進行下載：CSS彈性盒模型.zip轉載請註明出處，謝謝合作！
CSS3盒子模型
