浮动什么的都是渣渣~
最近也是很久没做前端了(当然体力活不计入此内),最近开始刷微博了,在微博上看到了一篇文章写的是css3里面的box布局
事实上对于CSS3和HTML5我学过的内容并不多,因为在我学前端的巅峰(巅峰个P啊)时期,也就是三年前,这些新技术仍然在萌芽阶段.然而现在老本早就已经吃完了,必须得开始补充一些新技术了
首先贴一个链接
(人家10年就在搞的东西我到现在才开始搞,落后了整整5年啊啊啊)
首先是最基本的东西,利用display:box就可以达成最简单的横排布局
<div class="outer"> <div class="inner in1">啊啊啊</div> <div class="inner in2">不不不</div> <div class="inner in3">擦擦擦</div> </div>CSS部分:
.outer{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
(由于用chrome测试,所以只含有webkit部分)
结果如上
接下来是box-flex属性
简单的说,就是内部元素的宽度,比如说在上面的东西后加上
.in1{
background:blue;
-webkit-box-flex:2;
}
.in2{
background:yellow;
-webkit-box-flex:3;
}
.in3{
background:red;
-webkit-box-flex:4;
}
就会这样
可以看出蓝色的in1宽度是in3的一半
如果其中部分元素没有设定box-flex,则这个元素会变成自身宽度,由其余元素均分剩余
比如说我们把in1的box-flex去掉
然后还可以给子元素设定box-ordinal-group
.in1{
background:blue;
-webkit-box-flex:2;
-webkit-box-ordinal-group:2;
}
.in2{
background:yellow;
-webkit-box-flex:3;
-webkit-box-ordinal-group:1;
}
.in3{
background:red;
-webkit-box-flex:4;
-webkit-box-ordinal-group:3;
}
结果是这样
意思就是box-ordinal-group越小的元素会显示在越前面
而不设定box-ordinal-group的话,默认值测试下来似乎是1,也不知道对不对
(不过这不是重点啊)
接下来是box-pack
比如我们把外层元素设定为justify
.outer{
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:justify;
}
然后注意要把内层的box-flex去除
就会这样
总体而言display:box还是一个很好的新属性,可以很方便的用于制作横排布局,而之前的float什么的相比而言都是渣渣,而更古老的table就更加是渣渣了
至于box-orient还可以设定为vertical,这一点再慢慢研究~