一、单列布局
常见单列布局分为：
- header、content和footer等宽的单列布局；
- header、footer等宽，content略窄的单列布局。
实现方式
- 先将
header、content、footer统一设置width: 960px;或者max-width: 960px。然后设置margin: auto;实现居中
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: purple;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: pink;
}
-
header、footer的内容宽度不设置，块级元素充满整个屏幕，header、content和footer的内容区域设置同一个width，通过margin: auto;居中。
<div class="header">
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.nav{
margin: 0 auto;
max-width: 800px;
background-color: darkgray;
height: 50px;
}
.content{
margin: 0 auto;
max-width: 800px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
二、两列自适应布局
实现方式
- float+margin
普通的两列布局可采用左侧左浮动，右侧设置margin-left
<div class="left"></div>
<div class="main"></div>
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
}
.main{
height:100px;
background:#777;
margin-left:200px;
}
利用浮动和负外边距进行固定右边自适应布局
<div class="left"></div>
<div class="wrap">
<div class="main"></div>
</div>
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
margin-right:- 200px; /*如果不设置负右外边距，.warp会被挤到下一行；设置多大呢？绝对值大于等于左边栏目宽度即可*/
}
.wrap{
width:100%;
height:100px;
background:#777;
}
.main{
margin-left:200px; /*等于左边栏的宽度*/
background:orange;
height:100px;
}
- float+overflow:hiddle
自适应的两列布局可采用此种方式，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
左中右布局
- 浮动+margin
左栏左浮动，右栏右浮动，主体放在最后。
注意：主体main标签放在最后，左右随意
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
html,body{
margin:0;
height:100%;
}
#main{
height:100%;
margin:0 210px;
background: blue;
}
#left,#right{
width:200px;
height:100%;
background: green;
}
#left{
float:left;
}
#right{
float:right;
}
- 绝对定位+margin
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。div顺序没有要求。
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
html,body{
margin:0;
height:100%;
}
#left,#right{
position:absolute;
top:0;
width:200px;
height:100%;
}
#left{
left:0;
background:#a0b3d6;
}
#right{
right:0;
background:#a0b3d6;
}
#main{
margin:0 210px;
background:#ffe6b8;
height:100%;
}
在用绝对定位时，通常会在其父元素使用相对定位，即position:absolute和position:relative是成对出现的，两者相辅相成。
- flex布局
父元素设置
display: flex;子元素会默认排成一行，通过设置其他属性改变布局方式
.father{
display: flex;
justify-content:space-between;
}
来源网络
【未完待续......】
