彈性盒模型（box）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*--box模型須要加瀏覽器前綴須要加前綴--*/
div.box {
width: 300px;
height: 300px;
border: 1px solid gray;
margin: 0 auto;
display: -webkit-box; /*--display: box 讓容器成爲彈盒--*/
display: -moz-box;
display: -o-box;
display: -ms-box;
display: box;
-webkit-box-orient: horizontal; /*--設置彈盒子元素的排列方式(vertical/horizontal)--*/
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-ms-box-orient: horizontal;
-webkit-box-direction: normal; /*--設置彈盒子元素是否倒序排列--(normal/reverse)*/
-moz-box-direction: normal;
-o-box-direction: normal;
-ms-box-direction: normal;
-webkit-box-pack: start; /*--設置彈盒子元素的對齊方式(start/center/end/justify),與box-align反方向,與box-orient同方向--*/
-moz-box-pack: start;
-o-box-pack: start;
-ms-box-pack: start;
-webkit-box-align: baseline; /*--設置彈盒子元素的對齊方式(start/center/end/baseline/stretch),與box-pack反方向,與box-orient反方向--*/
-moz-box-align: start;
-o-box-align: start;
-ms-box-align: start;
-webkit-box-lines: multiple; /*--設置彈盒的元素是否能夠換行顯示(single/multiple),瀏覽器還沒實現該屬性的效果--*/
-moz-box-lines: multiple;
-o-box-lines: multiple;
-ms-box-lines: multiple;
}
div.box-item-1 {
background-color: green;
-webkit-box-flex: 1; --設置或檢索彈性盒模型對象的子元素如何分配其剩餘空間(Integer)--
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex-group: 1; /*--數值較大的組分配的空間爲所佔的實際空間，剩餘空間分配給數值最小的那個組--*/
-moz-box-flex-group: 2;
-o-box-flex-group: 2;
-ms-box-flex-group: 2;
-webkit-box-ordinal-group: 3; --設置彈盒子元素的順序(值越大越靠後排列)--
-moz-box-ordinal-group: 3;
-o-box-ordinal-group: 3;
-ms-box-ordinal-group: 3;
}
div.box-item-2 {
background-color: pink;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex-group: 2;
-moz-box-flex-group: 2;
-o-box-flex-group: 2;
-ms-box-flex-group: 2;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-o-box-ordinal-group: 2;
-ms-box-ordinal-group: 2;
}
div.box-item-3 {
background-color: plum;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex-group: 2;
-moz-box-flex-group: 1;
-o-box-flex-group: 1;
-ms-box-flex-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-o-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="box-item-1" id="box-item-1">box-item-1</div>
<div class="box-item-2" id="box-item-2">box-item-2</div>
<div class="box-item-3" id="box-item-3">box-item-3</div>
</div>
box
<br/>
<br/>
box-orient
<select name="" id="box-orient">
<option value="horizontal" selected="selected">horizontal</option>
<option value="vertical">vertical</option>
</select>
<br/>
<br/>
box-direction
<select name="" id="box-direction">
<option value="normal">normal</option>
<option value="reverse">reverse</option>
</select>
<br/>
<br/>
box-pack(剩餘空間沒分配的狀況下使用，即沒有使用box-flex和box-flex-group)
<select name="" id="box-pack">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="justify">justify</option>
</select>
<br/>
<br/>
box-align
<select name="" id="box-align">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="baseline">baseline</option>
<option value="stretch">stretch</option>
</select>
<br/>
<br/>
box-item
<br/>
<br/>
<select name="" id="box-item">
<option value="box-item-1">box-item-1</option>
<option value="box-item-2">box-item-2</option>
<option value="box-item-3">box-item-3</option>
</select>
<br/>
<br/>
box-flex(>=0) 經測試js動態設置此屬性無效
<input type="text" id="box-flex"/>
<br/>
<br/>
box-flex-group(>=1)
<input type="text" id="box-flex-group"/>
<br/>
<br/>
box-ordinal-group(>=1)
<input type="text" id="box-ordinal-group"/>
<script>
var box = document.getElementById("box");
var orient = document.getElementById("box-orient");
var direction = document.getElementById("box-direction");
var pack = document.getElementById("box-pack");
var align = document.getElementById("box-align");
var flex = document.getElementById("box-flex");
var flexGroup = document.getElementById("box-flex-group");
var ordinalGroup = document.getElementById("box-ordinal-group");
var boxItem = document.getElementById("box-item");
var array = [
{dom: orient, type: "Orient"},
{dom: direction, type: "Direction"},
{dom: pack, type: "Pack"},
{dom: align, type: "Align"}
]
function onchangeBind (dom, type) {
dom.onchange =function () {
box.style["webkitBox" + type] = this.value;
box.style["mozBox" + type] = this.value;
box.style["oBox" + type] = this.value;
box.style["msBox" + type] = this.value;
}
}
for (var i = 0; i < array.length; i++) {
onchangeBind(array[i].dom, array[i].type);
}
flex.onblur = function () {
var itemType = boxItem.value;
var item = document.getElementById(itemType);
var value = this.value ? this.value : 0;
item.style.webkitBoxFlex = value;
item.style.mozBoxFlex = value;
item.style.oBoxFlex = value;
item.style.msBoxFlex = value;
}
flexGroup.onblur = function () {
var itemType = boxItem.value;
var item = document.getElementById(itemType);
var value = this.value ? this.value : 1;
item.style.webkitBoxFlexGroup = value;
item.style.mozBoxFlexGroup = value;
item.style.oBoxFlexGroup = value;
item.style.msBoxFlexGroup = value;
}
ordinalGroup.onblur = function () {
var itemType = boxItem.value;
var item = document.getElementById(itemType);
var value = this.value ? this.value : 1;
item.style.webkitBoxOrdinalGroup = value;
item.style.mozBoxOrdinalGroup = value;
item.style.oBoxOrdinalGroup = value;
item.style.msBoxOrdinalGroup = value;
}
</script>
</body>
</html>
相關文章
- 1. flex-box 彈性盒模型
- 2. 彈性盒模型（flex-box）
- 3. 彈性盒模型 flex box
- 4. CSS：彈性盒模型（Flexible Box）學習
- 5. CSS3彈性盒模型flex box小結
- 6. 盒模型box-sizing屬性
- 7. 彈性盒模型
- 8. display:-webkit-box彈性盒子
- 9. CSS3 ------- Flexible Box（彈性盒子）
- 10. CSS3 彈性盒子(Flex Box)
- 更多相關文章...
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • jQuery Mobile 彈窗 - jQuery Mobile 教程
- • 委託模式
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
