1、常见的单列布局：

 

　　header,content和footer等宽的单列布局

 

　　header与footer等宽,content略窄的单列布局

 

　　2、如何实现

 

　　对于第一种，先通过对header,content,footer统一设置width：1000px;或者max-width：1000px(这两者的区别是当屏幕小于1000px时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。

 

　　<pclass="header"></p>

 

　　<pclass="content"></p>

 

　　<pclass="footer"></p>

 

　　

 

　　.header{

 

　　margin:0auto;

 

　　max-width:960px;

 

　　height:100px;

 

　　background-color:blue;

 

　　}

 

　　.content{

 

　　margin:0auto;

 

　　max-width:960px;

 

　　height:400px;

 

　　background-color:aquamarine;

 

　　}

 

　　.footer{

 

　　margin:0auto;

 

　　max-width:960px;

 

　　height:100px;

 

　　background-color:aqua;

 

　　}

 

　　对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。

 

　　<pclass="header">

 

　　<pclass="nav"></p>

 

　　</p>

 

　　<pclass="content"></p>

 

　　<pclass="footer"></p>

 

　　

 

　　.header{

 

　　margin:0auto;

 

　　max-width:960px;

 

　　height:100px;

 

　　background-color:blue;

 

　　}

 

　　.nav{

 

　　margin:0auto;

 

　　max-width:800px;

 

　　background-color:darkgray;

 

　　height:50px;

 

　　}

 

　　.content{

 

　　margin:0auto;

 

　　max-width:800px;

 

　　height:400px;

 

　　background-color:aquamarine;

 

　　}

 

　　.footer{

 

　　margin:0auto;

 

　　max-width:960px;

 

　　height:100px;

 

　　background-color:aqua;

 

　　}

 

　　二、两列自适应布局

 

　　两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

 

　　1.float+overflow:hidden

 

　　如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。具体代码如下：

 

　　<pclass="parent"style="background-color:lightgrey;">

 

　　<pclass="left"style="background-color:lightblue;">

 

　　<p>left</p>

 

　　</p>

 

　　<pclass="right"style="background-color:lightgreen;">

 

　　<p>right</p>

 

　　<p>right</p>

 

　　</p>

 

　　</p>

 

　　.parent{

 

　　overflow:hidden;

 

　　zoom:1;

 

　　}

 

　　.left{

 

　　float:left;

 

　　margin-right:20px;

 

　　}

 

　　.right{

 

　　overflow:hidden;

 

　　zoom:1;

 

　　}

 

　　注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容

 

　　2.Flex布局

 

　　Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

 

　　//html部分同上

 

　　.parent{

 

　　display:flex;

 

　　}

 

　　.right{

 

　　margin-left:20px;

 

　　flex:1;

 

　　}

 

　　3.grid布局

 

　　Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

 

　　//html部分同上

 

　　.parent{

 

　　display:grid;

 

　　grid-template-columns:auto1fr;

 

　　grid-gap:20px

 

　　}

 

　　三、三栏布局

 

　　特征：中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式（可以猛戳实现三栏布局的几种方法),本文着重介绍圣杯布局和双飞翼布局。

 

　　1.圣杯布局

 

　　①特点

 

　　比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。

 

　　

 

　　.container{

 

　　padding-left:220px;//为左右栏腾出空间

 

　　padding-right:220px;

 

　　}

 

　　.left{

 

　　float:left;

 

　　width:200px;

 

　　height:400px;

 

　　background:red;

 

　　margin-left:-100%;

 

　　position:relative;

 

　　left:-220px;

 

　　}

 

　　.center{

 

　　float:left;

 

　　width:100%;

 

　　height:500px;

 

　　background:yellow;

 

　　}

 

　　.right{

 

　　float:left;

 

　　width:200px;

 

　　height:400px;

 

　　background:blue;

 

　　margin-left:-200px;

 

　　position:relative;

 

　　right:-220px;

 

　　}

 

　　<articleclass="container">

 

　　<pclass="center">

 

　　<p>圣杯布局</p>

 

　　</p>

 

　　<pclass="left"></p>

 

　　<pclass="right"></p>

 

　　</article>




本文转载自中文网