页面布局的总结
众所周知,前端主要由3部分组成,css、js、以及html标签。所以要掌握好前端,这三者是必须相辅相成,缺一不可。
今天主要分享一下在开发过程中遇到的关于页面布局这个问题。
题目是:假设高度已知,请写出三栏布局,其中左,右栏宽度各位200px,中间自适应。
这里有5种方式解决,来解决这个情况。
第一种:通过float方式
html:
<div class="content"> <div class="left fl"></div> <div class="right fr"></div> <div class="main"></div> </div>
css:
.content{ height: 200px; width: 100%; } .content div{ border: 1px solid red; height: 100%; } .content .left,.content .right{ width: 200px; } .fl{ float: left; } .fr{ float: right; }
第二种:通过position定位的方式
html:
<div class="content"> <div class="left position_l">左边</div> <div class="main position_center">中</div> <div class="right position_r">右</div> </div>
css:
.content{ height: 200px; width: 100%; position: relative; } .content div{ border: 1px solid red; height: 100%; position: absolute; top: 0; } .content .left,.content .right{ width: 200px; } .position_l{ left: 0; } .position_center{ left: 200px; right: 200px; } .position_r{ right: 0; }
第三种:通过flex定位的方式
html和第一种写法一样 就只写样式
.content{ height: 200px; width: 100%; display: flex; } .content div{ border: 1px solid red; } .content .left,.content .right{ width: 200px; } .content .main{ flex: 1; }
注意一点,flex是必须写,flex的含义是所占弹性范围,flex是由flex-grow、flex-shrink、flex-basis的缩写。
关于flex的资料可参考http://www.w3.org/html/ig/zh/css-flex-1/这里就不一一赘述了。
第四种:通过表单的方式
css:
.content{ height: 200px; width: 100%; display: table; } .content div{ border: 1px solid red; display: table-cell; } .content .left,.content .right{ width: 200px; }
第五种:通过表格的方式
css:
.content { width: 100%; display: grid; grid-template-columns:300px auto 300px; grid-template-rows: 200px; } .content div{ border: 1px solid red; }
更多网格布局的资料可参考http://www.w3cplus.com/css3/line-base-placement-layout.html