CSS 3 灵活的 Box Model
www.jz123.cn 2009-08-28 来源: 中国建站 责任编辑(袁袁) 我要投递新闻
Alex Russell之前有许多很有意思的讨论-当前网络上的哪些东西是错误的!他最近的一篇帖子提到了CSS 3 progress和一个特别灵活的box model：
David Baron(Mozilla公司)编写了一个灵活的Box Layout Module，又名“hbox and vbox”(横向盒和纵向盒)。使用Gecko和WebKit的浏览器都能支持hbox 和 vbox。你应该忽略IE浏览器，这样你创建box布局将会更容易。
|
以下为引用的内容：
/* hbox and vbox classes */
.hbox {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
display: box;
box-orient: horizontal;
box-align: stretch;
}
.hbox> * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
display: block;
}
.vbox {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;
display: box;
box-orient: vertical;
box-align: stretch;
}
.vbox> * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
display: block;
}
.spacer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
.reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
}
.boxFlex0 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
.boxFlex1, .boxFlex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
.boxFlex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
}
.boxGroup1 {
-webkit-box-flex-group: 1;
-moz-box-flex-group: 1;
box-flex-group: 1;
}
.boxGroup2 {
-webkit-box-flex-group: 2;
-moz-box-flex-group: 2;
box-flex-group: 2;
}
.start {
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
}
.end {
-webkit-box-pack: end;
-moz-box-pack: end;
box-pack: end;
}
.center {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
|
有了这个核心的CSS，你就可以轻松的做到垂直对齐
|
以下为引用的内容：
<div class="hbox center">
<div class="vbox center">
<div>...</div>
<div>...</div>
</div>
</div>
|
分组：
|
以下为引用的内容：
<form action="handler.cgi" method="POST" class="hbox">
<div class="vbox">
<label>First Name (required):</label>
<label>Last Name:</label>
</div>
<div class="vbox">
<input type="text" name="first"/>
<input type="text" name="last"/>
<input type="submit"/>
</div>
</form>
|
点击查看文章详情：http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
原文地址：http://www.javaeye.com/news/10046-css-box-model
上一篇：哪些情况下需要CSS隐藏文字？ 下一篇：HTML5中会被丢弃的元素和尚待解决的问题
会员投稿
投稿指南 
RSS订阅