双飞翼和圣杯布局区别可参考:https://www.cnblogs.com/imwtr/p/4441741.html
一、固定布局
二、自适应布局
宽度随着网页大小的改变而改变;
三、常见类型
1、两列布局:
1.1 左边宽度固定,右边宽度自适应(左边浮动,下一个元素就会占据位置,并排一行)
.main {/*外层的样式:父级元素的水平居中*/
width: 95%;
margin-left:auto;
margin-right:auto;/* 左右居中 */
}
/*左边设置固定宽度以及左浮动(为了不占一行)*/
.left {
float: left;
width: 200px;
height: 600px;
background: red;
}
/*右边设置自适应宽度,最小宽度,margin-left,把左边固定宽度的元素的位置留出来就好了*/
.right {
min-width: 400px; /* 最小宽度 */
margin-left: 210px;//不设置margin,左边栏和右边栏会有重合部分
height: 600px;
background: blue;
}
html:
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
1.2、右边宽度固定,左边宽度自适应:左右都浮动(左边自适应元素设置外层div 100%宽度,这样会占一行,然后里层设置右边的margin,把右边元素位置空出来)
//左边父级设置100%宽度,左浮动
.left-fa {
width: 100%;//占一行
float: left;
}
//左边子元素设置margin-right
.left {
margin-right: 310px;//把右边固定宽度的元素位置留出来
height: 600px;
background: red;
}
/*右边固定宽度的元素左浮动,和margin-left负的本身大小*/
.right {
width: 300px;
height: 600px;
background: yellow;
float: left;
margin-left: -300px; //设置本身宽度的负值,是为了和左边元素占一行,不设置就被挤在下一行
}
2、三列布局
2.1 定位法:(左右边设置绝对定位,设置一个最外级div(给父级设置relative,相对最外层定位))
.main {//最外层
width: 95%;
margin-left:auto;
margin-right:auto;/* 左右居中 */
height: 300px;
*zoom: 1;
position: relative;
}
/*左边固定元素定位*/
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: cyan;
}
/* 中间自适应,设置的margin左右距离为左右二边固定宽度元素的 大小*/
.center-fa{
width: 100%;
height: 100%;
}
.center{
height: 100%;
min-width: 400px;
margin-left: 210px;
margin-right: 210px;
background-color: chocolate;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
background-color: rgb(255, 0, 221);
}
html:
<div class="main">
<div class="left"></div>
<div class="center-fa"> <div class="center"></div></div>
<div class="right"></div>
</div>
2.1 双飞翼布局(对比圣杯如何呢??):(三栏都浮动,中间自适应元素设置外层div 100%宽度,以防独占一行,里层需要设置左右固定二栏的margin宽度,把左右二栏的位置空出来;另外,三栏排成一排,左右二栏需要设置负margin自身宽度)
.main {
width: 95%;
margin-left:auto;
margin-right:auto;/* 左右居中 */
height: 300px;
overflow: hidden;
*zoom: 1;
}
.left{
float: left;
width: 200px;
height: 100%;
margin-right: -200px;/*负margin自身宽度,为了并排一行。不然下面的会一直被挤下去*/
background-color: cyan;
}
.center-fa{
float: left;
width: 100%;
height: 100%;
}
.center{
height: 100%;
min-width: 400px;
margin-left: 210px;/*为了给左右二栏空出位置*/
margin-right: 210px;
background-color: chocolate;
}
.right{
margin-left: -200px;/*负margin自身宽度,为了并排一行*/
float: left;
width: 200px;
height: 100%;
background-color: rgb(255, 0, 221);
}
html:
<div class="main">
<div class="left"></div>
<div class="center-fa">
<div class="center"></div>
</div>
<div class="right"></div>
</div>