一. 两列布局：左侧定宽、右侧自适应。
四种方法 ：flex 、position、float和负外边距、外边距
1. 使用flex.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.main{
display:flex;
}
.sitebar{
flex:0 0 200px;
order:-1;
//order属性用于更改在主轴方向上排列顺序,order数值越小，排列越靠前，默认为0，可以为负数
background-color: green;
}
.content{
flex:1;
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
右侧自适应区块
</div>
<div class="sitebar">
左侧定宽200px区块
</div>
</div>
</body>
</html>
2. 使用position， 考虑了页面优化，右侧区域先加载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.sitebar{
200px;
background-color: green;
}
.content{
position: absolute;
left: 200px;
right:0;
top:0;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
右侧自适应区块
</div>
<div class="sitebar">
左侧定宽200px区块
</div>
</body>
</html>
3. 利用float和负外边距
这里的100%是相对于父元素, margin-left的意思是子元素的左边框距离父元素右边框的距离，我这里没考虑padding,border等因素哈
当设置left元素的margin-left:-100%;时，left元素的左边框会与父元素的左边框重合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.main {
100%;
float:left;
}
.main .content {
margin-left: 200px;
background-color: red;
}
.sitebar {
200px;
float: left;
background-color: green;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
右侧自适应区块
</div>
</div>
<div class="sitebar">
左侧定宽200px
</div>
</body>
</html>
二、三列布局：左右定宽，中间自适应。
圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。
三种方法：flex、绝对定位、使用负外边距。
1. flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.body{
display:flex;
}
.content{
flex:1;
background-color: green;
}
.nav, .ads{
/*//设置两个侧边栏宽度*/
flex:0 0 200px;
background-color: blue;
}
.nav {
/* 把导航放到最左边*/
order:-1;
background-color: grey;
}
</style>
</head>
<body>
<div class="body">
<main class="content">center</main>
<nav class="nav">left</nav>
<aside class="ads">right</aside>
</div>
</body>
</html>
2. 绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin: 0px;
}
.left {
background-color: red;
100px;
position: absolute;
top: 0px;
left:0px;
}
.center {
background-color: grey;
margin-left: 100px;
margin-right: 100px;
}
.right {
background-color: green;
100px;
position: absolute;
top:0px;
right:0px;
}
</style>
</head>
<body>
<div class="center">中间</div>
<div class="left">左列</div>
<div class="right">右列</div>
</body>
</html>
三、两列等高布局。
利用padding-bottom的正值与margin-bottom的负值相互抵消即可，同时最外层设置overflow:hidden;即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main {
margin: 0 auto;
overflow: hidden;
600px;
}
.left {
background-color: red;
300px;
float:left;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
.right {
background-color: green;
300px;
float:left;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<p style="height:200px">left</p>
</div>
<div class="right">
<p style="height:300px">right</p>
</div>
</div>
</body>
</html>