css弹性盒模型.docx
- 文档编号:27456348
- 上传时间:2023-07-01
- 格式:DOCX
- 页数:35
- 大小:22.74KB
css弹性盒模型.docx
《css弹性盒模型.docx》由会员分享,可在线阅读,更多相关《css弹性盒模型.docx(35页珍藏版)》请在冰豆网上搜索。
css弹性盒模型
1弹性盒模型对齐
DOCTYPEhtml>
--
描述:
设置或检索弹性盒模型对象的子元素的对齐方式。
查看其兄弟属性box-pack,两者的效果正好(相反)互补
box-align的对齐方式受box-orient影响;
默认情况下(即box-orient设置为horizontal)start和end所呈现的效果等同于顶部对齐和底部对齐;
当box-orient设置为vertical时,start和end所呈现的效果等同于左对齐和右对齐;
对应的脚本特性为boxAlign。
语法:
box-align:
start|end|center|baseline|stretch
默认值:
stretch
取值:
start:
设置弹性盒模型对象的子元素从开始位置对齐
center:
设置弹性盒模型对象的子元素居中对齐
end:
设置弹性盒模型对象的子元素从结束位置对齐
baseline:
设置弹性盒模型对象的子元素基线对齐
stretch:
设置弹性盒模型对象的子元素自适应父元素尺寸
-->
body{
background-color:
deepskyblue;
}
h1{
font:
bold20px/1.5georgia,simsun,sans-serif;
}
.box,
.box2{
display:
-webkit-box;
display:
-moz-box;
display:
-o-box;
display:
-ms-box;
display:
box;
margin:
0;
padding:
10px;
background:
#000;
list-style:
none;
}
.box{
-webkit-box-orient:
horizontal;
-moz-box-orient:
horizontal;
-o-box-orient:
horizontal;
-ms-box-orient:
horizontal;
box-orient:
horizontal;
width:
260px;
height:
100px;
}
.box2{
-webkit-box-orient:
vertical;
-moz-box-orient:
vertical;
-o-box-orient:
vertical;
-ms-box-orient:
vertical;
box-orient:
vertical;
width:
100px;
height:
260px;
}
#box,
#box6{
-webkit-box-align:
start;
-moz-box-align:
start;
-o-box-align:
start;
-ms-box-align:
start;
box-align:
start;
}
#box2,
#box7{
-webkit-box-align:
center;
-moz-box-align:
center;
-o-box-align:
center;
-ms-box-align:
center;
box-align:
center;
}
#box3,
#box8{
-webkit-box-align:
end;
-moz-box-align:
end;
-o-box-align:
end;
-ms-box-align:
end;
box-align:
end;
}
#box4,
#box9{
-webkit-box-align:
baseline;
-moz-box-align:
baseline;
-o-box-align:
baseline;
-ms-box-align:
baseline;
box-align:
baseline;
}
#box5,
#box10{
-webkit-box-align:
stretch;
-moz-box-align:
stretch;
-o-box-align:
stretch;
-ms-box-align:
stretch;
box-align:
stretch;
}
.boxli,
.box2li{
padding:
10px;
}
.boxli:
nth-child
(1),
.box2li:
nth-child
(1){
background:
#666;
}
.boxli:
nth-child
(2),
.box2li:
nth-child
(2){
background:
#999;
}
.boxli:
nth-child(3),
.box2li:
nth-child(3){
background:
#ccc;
}
横向排列时子元素从起始位置对齐box-align:
start;
横向排列时子元素居中对齐box-align:
center;
横向排列时子元素从结束位置对齐box-align:
end;
横向排列时子元素基线对齐box-align:
baseline;
横向排列时子元素自适应父元素box-align:
stretch;
纵向排列时子元素从起始位置对齐box-align:
start;
纵向排列时子元素居中对齐box-align:
center;
纵向排列时子元素从结束位置对齐box-align:
end;
纵向排列时子元素基线对齐box-align:
baseline;
纵向排列时子元素自适应父元素box-align:
stretch;