两栏布局
核心是：一侧固定，另一侧自适应
1 浮动方法 float
给固定的一侧设置浮动
1.1 左侧固定，右侧自适应
<style type="text/css">
#left{
width:200px;
border:1px solid red;
float: left;
}
#right{
margin-left: 201px;
border:1px solid blue;
height:400px;
}
</style>
<body>
<div id="left">左侧固定</div>
<div id="right">右侧自适应</div>
</body>
1.2 右侧固定，左侧自适应
<style type="text/css">
#right{
width:200px;
border:1px solid red;
float: right;
}
#left{
margin-right: 201px;
border:1px solid blue;
height:400px;
}
</style>
<body>
<div id="right">右侧固定</div>
<div id="left">左侧自适应</div>
</body>
2 定位 position
左侧固定 右侧自适应，给父级position: relative;给固定宽度的一方position: absolute;
<style type="text/css">
.box {
position: relative;
}
#left{
position: absolute;
top: 0;
left: 0;
width:200px;
border:1px solid red;
}
#right{
margin-left: 201px;
border:1px solid blue;
height:400px;
}
</style>
<div class="box">
<div id="left">左侧固定</div>
<div id="right">右侧自适应</div>
</div>
3 弹性布局 flex
父级设置display,固定其中一个，另一个flex:1
<style type="text/css">
.box {
display: flex;
}
#left{
width:200px;
border:1px solid red;
}
#right{
border:1px solid blue;
height:400px;
flex: 1;
}
</style>
<div class="box">
<div id="left">左侧固定</div>
<div id="right">右侧自适应</div>
</div>
三栏布局
核心是：两侧固定，中间自适应
1 浮动方法 float
两侧固定，且设置float,中间部分设置margin自适应
<style type="text/css">
#left{
width:200px;
border:1px solid red;
float: left;
}
#middle {
border:1px solid yellow;
margin: 0 200px;
}
#right{
width: 200px;
border:1px solid blue;
float: right;
}
</style>
<div class="box">
<div id="left">固定</div>
<div id="right">固定</div>
<div id="middle">自适应</div>
</div>
2 定位 position
父级设置position:relative 两侧固定设置position：absolute 中间部分设置margin自适应
<style type="text/css">
.box {
position: relative;
}
#left{
position: absolute;
width:200px;
border:1px solid red;
top: 0;
left: 0;
}
#middle {
border:1px solid yellow;
margin: 0 200px;
}
#right{
position: absolute;
top: 0;
right: 0;
width: 200px;
border:1px solid blue;
}
</style>
<div class="box">
<div id="left">固定</div>
<div id="right">固定</div>
<div id="middle">自适应</div>
</div>
3 弹性布局 flex
<style type="text/css">
.box {
display: flex;
}
#left{
width:200px;
border:1px solid red;
}
#middle {
border:1px solid yellow;
flex: 1;
}
#right{
width: 200px;
border:1px solid blue;
}
</style>
<div class="box">
<div id="left">固定</div>
<div id="middle">自适应</div>
<div id="right">固定</div>
</div>
4 calc 函数
<style type="text/css">
#left{
width:200px;
border:1px solid red;
}
#middle {
border:1px solid yellow;
width: calc(100% - 400px)
}
#right{
width: 200px;
border:1px solid blue;
}
</style>
<div id="left">固定</div>
<div id="middle">自适应</div>
<div id="right">固定</div>
