而网页版面的布局,可以根据内容自适应宽度和高度,页面的布局结构会直接影响页面的用户体验,虽然现在的布局样式多种多样,但是也有一些常用的css布局方式。
css居中布局
<divclass="parent"style="width:300px;height:300px;">
<divclass="child">居中布局</div>
</div>
水平居中（宽度自适应）
1.inline-block+text-align
.child{
display:inline-block;/*变成行内块元素，让元素宽度自适应，不继承父元素宽度；*/
}
.parent{
text-align:center;
}
2.table+margin
.child{
display:table;/*变成table元素，可以让元素宽度自适应，不继承父元素宽度；*/
margin:0auto;
}
css多列布局
<divclass="parent">
<divclass="left">
<p>left</p>
</div>
<divclass="right">
<p>right</p>
<p>right</p>
</div>
</div>
左边定宽，右边自适应
float+margin
.left{
width:100px;
float:left;
}
.right{
margin-left:120px;
}
float+overflow
/*和1方法表现的效果一样*/
.left{
width:100px;
float:left;
}
.right{
margin-left:20px;
overflow:hidden;
}
table
.parent{
display:table;
width:100%;
table-layout:fixed;
}
.left,.right{
display:table-cell;
}
.left{
width:100px;
padding-right:20px;
}
总之，css布局给大家简单的介绍了一些，希望大家多看看。