1.普通布局（头部、内容、底部）
2，两栏布局
左边固定大小，右边自适应
.p{
display: flex;
}
.p>div{
height: 100px;
}
.a{
background-color: pink;
width: 200px;
}
.b{
background-color: bisque;
flex: 1;
}
浮动
.p>div{
height: 100px;
}
.a{
background-color: pink;
width: 200px;
float: left;
}
.b{
background-color: bisque;
margin-left: 200px;
}
第二种
.p>div{
height: 100px;
}
.a{
background-color: pink;
width: 200px;
float: left;
}
.b{
background-color: bisque;
width: 100%
float: left;
}
网格布局
.container {
display: grid;
width: 100%;
grid-template-rows: 300px;//每行的高
grid-template-columns: 100px auto//每个元素的宽度
}
3，三栏布局
flex实现
.p{
display: flex;
}
.p>div{
height: 100px;
}
.a{
background-color: pink;
width: 200px;
}
.b{
background-color: bisque;
flex: 1;
}
.c{
background-color: pink;
width: 200px;
}
浮动实现
.p{
}
.p>div{
height: 100px;
}
.a{
background-color: pink;
width: 200px;
float: left;
}
.b{
background-color: bisque;
/* margin-right: 200px; */
/* float: left;
*/
margin: 0 200px;
}
.c{
background-color: yellow;
width: 200px;
float: right;
}
定位实现
父元素设置相对定位，左右元素分别设置left、right为0，然后中间元素的left分别为左右的width即可
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 100px;
height: 300px;
background-color: #ce5a4b;
}
.main {
position: absolute;
left: 100px;
right: 200px;
height: 300px;
background-color: #f8cf5f;
}
.right {
position: absolute;
right: 0;
width: 200px;
height: 300px;
background-color: #499e56;
}
网格布局
.container {
display: grid;
width: 100%;
grid-template-rows: 300px;//每行的高
grid-template-columns: 100px auto 200px;//每个元素的宽度
}