两列三列布局
两列布局
两列布局主要分为左固定右自适应、左自适应右固定两种，这里主要以两栏右侧自适应布局（自适应部分是首节点，因为这种情况比较特殊，所以单独来说）为例进行讨论
两栏右侧自适应布局(自适应部分是首节点)
这里的两栏自适应布局指的是左边固定，右边自适应，并且自适应部分的标签应写在固定部分标签的前面，一共有3种方法实现这种布局。
- flex布局
通过设置flex弹性布局的方式实现两栏右侧布局（设置项目的排列方向从右向左）
.container{
display: flex;
flex-direction: row-reverse;
}
.left{
width: 300px;
height: 100vh;
background-color: rosybrown;
}
.right{
flex: 1;
height: 100vh;
background-color: slategray;
}
<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>
- 相对定位和绝对定位
通过父元素设置相对定位，自适应元素设置绝对定位的方式实现两栏右侧布局（缺点是需要知道固定元素的宽度）
.container{
position: relative;
}
.left{
width: 300px;
height: 100vh;
background-color: rosybrown;
}
.right{
height: 100vh;
position: absolute;
top: 0;
right: 0;
left: 300px;
background-color: slategray;
}
<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>
- calc函数
.left{
float: left;
width: 300px;
height: 100vh;
background-color: rosybrown;
}
.right{
float: right;
height: 100vh;
background-color: slategray;
width: calc(100% - 300px);
}
<div class="container">
<div class="right"></div>
<div class="left"></div>
</div>
三列布局
三列布局分为左中右部分，这里以左右宽度固定，中间自适应的三列布局（面试出现频率高）为例进行讨论。实现这种布局主要有5种方法。
- flex弹性布局（思路与上面两栏右侧自适应布局方法1一致）
.container{
display: flex;
flex-direction: row-reverse;
}
.left{
width: 200px;
height: 100vh;
background-color: salmon;
}
.middle{
height: 100vh;
background-color: springgreen;
flex: 1;
}
.right{
width: 200px;
height: 100vh;
background-color: tomato;
}
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
- 绝对定位和相对定位（思路与上面两栏右侧自适应布局方法2一致）
.container{
position: relative;
}
.left{
width: 200px;
height: 100vh;
background-color: salmon;
}
.middle{
height: 100vh;
background-color: springgreen;
position: absolute;
left: 200px;
top: 0;
right: 200px;
}
.right{
width: 200px;
height: 100vh;
background-color: tomato;
position: absolute;
top: 0;
right: 0;
}
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
- calc方法计算（思路与上面两栏右侧自适应布局方法3一致）
calc函数，运算符之间要有空格
.left{
width: 200px;
height: 100vh;
background-color: salmon;
float: left;
}
.middle{
float: left;
width: calc(100% - 400px);
height: 100vh;
background-color: springgreen;
}
.right{
width: 200px;
height: 100vh;
background-color: tomato;
float: left;
}
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
- display:table属性实现
.container{
display: table;
width: 100%;
height: 100vh;
}
.left{
display: table-cell;
width: 200px;
background-color: salmon;
}
.middle{
display: table-cell;
background-color: springgreen;
}
.right{
display: table-cell;
width: 200px;
background-color: tomato;
}
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
- display:grid属性实现
.container{
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 200px auto 200px;
}
.left{
background-color: salmon;
}
.middle{
background-color: springgreen;
}
.right{
background-color: tomato;
}
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
除了两栏右侧自适应布局(自适应部分是首节点)这种布局，以上5种方法对于一般的两列三列布局都可以实现
- 圣杯布局
margin-top、margin-bottom取负值元素会向上移动，margin-left、margin-right取负值元素会向左移
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
clear: both;
}
#container{
padding: 0 200px;
overflow: hidden;
}
.column{
height: 200px;
float: left;
position: relative;
}
#left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: aqua;
}
#right{
width: 200px;
margin-left: -200px;
right: -200px;
background-color: wheat;
}
#center{
width: 100%;
background-color: tomato;
}
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">#center</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
https://zhuanlan.zhihu.com/p/103774667
- 双飞翼布局
.container{
width: 100%;
float: left;
}
.left,.middle,.right{
height: 100vh;
}
.middle{
margin-left: 200px;
margin-right: 200px;
background-color: springgreen;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
background-color: salmon;
}
.right{
float: left;
width: 200px;
margin-left: -200px;
background-color: tomato;
}
.footer{
clear: both;
}
<div class="header"></div>
<div class="container" id="middle">
<div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer"></div>
问题：如何实现XX布局
知识点：flex布局、浮动原理、子绝父相、calc函数、圣杯布局、双飞翼布局