css布局方式
1.行布局
2.多列布局:两列 三列
4.圣杯布局,双飞翼布局: 三列布局 中间自适应宽度 两边定宽 中间优先渲染
圣杯布局与双飞翼布局的区别:
圣杯:加一个包含main,left,right
整体的容器,设置容器左右的padding
,浮动左右元素填充padding
,需设置position:relative
,因为要设置left,right
位置,同时调节margin-left
双飞翼:只需要给main
元素加一个容器,设置容器的margin-left,margin-right
,左右元素浮动设置margin-left
即可
<!--圣杯布局-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
width:100%;
min-width:700px;
text-align:center;
}
.header,.footer{
width:100%;
height:40px;
background:#eee;
float:left;
}
.body{
padding:0 200px 0 220px;
}
.main,.left,.right{
position:relative;
float:left;
}
.main{
width:100%;
min-height:300px;
background:green;
}
.left{
width:220px;
min-height:300px;
background:red;
margin-left:-100%;
left:-220px;
}
.right{
width:200px;
min-height:300px;
background:blue;
margin-left:-200px;
right:-200px;
}
</style>
</head>
<body>
</body>
<div class="header">header</div>
<div class="body">
<div class="main">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</html>
<!--双飞翼布局-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
min-width:700px;
color:#fff;
text-align:center;
}
.header,.footer{
width:100%;
height:40px;
background:#ddd;
float:left;
}
.main,.left,.right{
float:left;
}
.main{
width:100%;
min-height:300px;
}
.main-item{
margin-left:220px;
margin-right:200px;
min-height:300px;
background:green;
}
.left{
width:220px;
min-height:300px;
background:gold;
margin-left:-100%;
}
.right{
width:200px;
min-height:300px;
background:orange;
margin-left:-200px;
}
</style>
</head>
<body>
</body>
<div class="header">header</div>
<div class="body">
<div class="main">
<div class="main-item">main-item</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</html>