1.两栏布局
两栏布局的核心是左栏固定宽度，右栏宽度自适应
html结构为
<div class="outer">
<div class="left"></div>
<div class="right"></div>
</div>
方式一
左栏浮动+固定宽度
右栏宽度auto+margin偏移
.outer{
height: 500px;
background-color: black;
}
.left{
height: 100%;
float: left;
width: 200px;
background-color: red;
}
.right{
height: 100%;
margin-left: 200px;
width: auto;
background-color: blue;
}
方式二
左栏浮动+固定宽度
右栏设置overflow:hidden(目的是产生bfc,不与左栏重叠)
.outer{
height: 500px;
background-color: black;
}
.left{
height: 100%;
float: left;
width: 200px;
background-color: red;
}
.right{
height: 100%;
overflow: hidden;
background-color: blue;
}
方式三
父级设置flex布局
左栏固定宽度
右栏flex:1
.outer{
height: 500px;
background-color: black;
display: flex;
}
.left{
width: 200px;
background-color: red;
}
.right{
flex: 1;
background-color: blue;
}
方式四
父级相对定位
左栏绝对定位
右栏设置margin-left
.outer{
height: 500px;
background-color: black;
position: relative;
}
.left{
height: 100%;
position: absolute;
width: 200px;
background-color: red;
}
.right{
height: 100%;
margin-left: 200px;
background-color: blue;
}
方式五
父级相对定位
左栏固定宽度
右栏绝对定位+偏移
.outer{
height: 500px;
background-color: black;
position: relative;
}
.left{
height: 100%;
width: 200px;
background-color: red;
}
.right{
height: 100%;
position: absolute;
left: 200px;
bottom: 0;
top: 0;
right: 0;
background-color: blue;
}
2.三栏布局
三栏布局的核心是左右两栏固定宽度,中间一栏宽度自适应
dom结构为
<div class="outer">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
方式一
左栏左浮动 固定宽度
右栏右浮动 固定宽度
中间一栏设置左右偏移 并且处于html结构的最后
.outer{
height: 500px;
background-color: black;
}
.left{
height: 100%;
width: 200px;
float: left;
background-color: red;
}
.center{
height: 100%;
margin-left: 200px;
margin-right: 200px;
background-color: green;
}
.right{
height: 100%;
width: 200px;
float: right;
background-color: blue;
}
方式二
左右栏绝对定位
中间一栏设置偏移
.outer{
height: 500px;
background-color: black;
position: relative;
}
.left{
height: 100%;
width: 200px;
position: absolute;
background-color: red;
}
.center{
height: 100%;
margin-left: 200px;
margin-right: 200px;
background-color: green;
}
.right{
height: 100%;
position: absolute;
width: 200px;
right: 0;
top: 0;
background-color: blue;
}
方式三
父级设置flex布局
左右栏固定宽度
中间一栏设置flex:1
.outer{
height: 500px;
background-color: black;
display: flex;
}
.left{
width: 200px;
background-color: red;
}
.center{
flex: 1;
background-color: green;
}
.right{
width: 200px;
background-color: blue;
}
圣杯布局
方法:
1.给三栏都设置左浮动 让中间一栏占宽百分百,使得左右两栏下移
2.给中间一栏设置左右padding，用来给左右两栏设置存放空间
3.设置左栏的margin-left为-100%,这样左栏就会移动到中间一栏的最左边
4.给右栏设置margin-left为负的右栏的宽度,这样右栏就会移动到中间一栏的最右边
5.左右两栏使用相对定位进行偏移,移动到之前给他们准备好的空间中
为什么margin-left为负数会使元素上移?
答:浏览器会判断margin-left与元素宽度,如果margin-left+width<0,浏览器就会认为元素的宽度小于0，
上一层是可以容纳这个元素的,于是就会上移
.outer{
height: 500px;
background-color: black;
padding-left: 200px;
padding-right: 200px;
}
.left{
position: relative;
left: -200px;
float: left;
margin-left: -100%;
width: 200px;
height: 100%;
background-color: red;
}
.center{
width: 100%;
height: 100%;
float: left;
background-color: green;
}
.right{
position: relative;
left: 200px;
float: left;
margin-left: -200px;
width: 200px;
height: 100%;
background-color: blue;
}
双飞翼布局
方法:与圣杯布局类似,不同点是双飞翼布局给左右两栏留空间是这样做的:
在中间div中新增一个div(inside),给inside设置margin偏移.这样就给
左右两栏留下了空间
html结构
<div class="outer">
<div class="center">
<div class="inside">
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.outer{
height: 500px;
background-color: black;
}
.left{
float: left;
margin-left: -100%;
width: 200px;
height: 100%;
background-color: red;
}
.center{
float: left;
height: 100%;
width: 100%;
}
.inside{
margin-left: 200px;
margin-right: 200px;
height: 100%;
background-color: grey;
}
.right{
float: left;
margin-left: -200px;
width: 200px;
height: 100%;
background-color: blue;
}