</div>Web页面中的布局,是指在页面中如何对标题、导航栏、主要内容、脚注、表单等各种构成要素进行一个合理的编排。
css3之前,主要使用display+float+position进行页面简单布局,但是它们也存在一些缺点,譬如两栏或者多栏中元素高度不一时,
可能导致底部很难对齐。因此,css3中引入了一些新的布局方式,使用这些布局除了可以修改之前布局遇到的问题之外,还可以进行
更为便捷、更为复杂的页面布局。
1.css3中引入了多栏布局,主要使用-*(浏览器前缀)-column-count来指定列数,但是每列宽度必须是一样的,不能单独指定;
具体实现(两栏布局):
html代码:
<div>
<p>左边</p>
<p>右边</p>
css代码:
div{
-webkit-column-count:2;
-moz-column-count:2;
-o-column-count:2;
}
2.盒布局主要是通过display:-*(浏览器前缀)-box,给最外层盒子添加box属性,可以指定每个指定宽度;
具体实现(三栏布局):
html代码:
<div id="container">
<div class="left">左边</div>
<div class="content">中间</div>
<div class="right">右边</div>
</div>
css代码:
#container{
display:-webkit-box;
display:-moz-box;
display:-o-box;
}
#container .left{
width:300px;
background-color:red;
}
#container .center{
width:400px;
background-color:red;
}
#container .right{
width:300px;
background-color:red;
}
.left,.center,.right{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
3.弹性盒布局:如果实现左右固定宽度,中间自适应布局使用弹性盒布局可以很方便:
根据以上盒布局案例,只需更改.center中width=>-*-box-flex:1就可以实现中间元素自适应;另外
设置显示顺序:-*-box-ordinal-group:要显示的顺序;