前言
最近做了一个项目需要自适应布局，对于萌新的我，就百度，视频，书等学习下，归纳了实现自适应布局各种方式，有什么不足，希望多提意见
自适应布局
浮动布局
定位布局
flex布局
table-cell布局
grid布局
题目：假设高度已知，请写出二栏布局，其中左栏、宽度为160px，中间自适应
image.png
flex布局
html结构，大盒子设置flex，里面设置左右两个小盒子
<body> <section class="box"> <article class="box-left"> </article> <article class="box-right"> <h1>hello</h1> </article> </section></body>
CSS部分
html * { //去除浏览器默认边距 margin: 0; padding: 0;
}
.box { display: flex; width: 100%; // height:100vh; //高度无法自适应，遇到内容过多，会溢出盒子，用下面方法替代
min-height: 100vh;
}
.box-left { width: 160px;
min-height: 100vh;
background: greenyellow;
}
.box-right { // 方法一： flex: 1; // 方法二： width: calc(100% -160px); // 剩余宽度等于总宽度减去左盒子宽度
min-height: 100vh; background: darkcyan;
}float 布局，基本就css有些地方改动而已
CSS
.box {
width: 100%;
min-height: 100vh;
max-height: 100%;
}
.box-left { float: left; //修改地方
width: 160px;
min-height: 100vh;
max-height: 100%;
background: greenyellow;
}
.box-right {
min-height: 100vh;
max-height: 100%;
background: darkcyan;
}定位布局
CSS
.box {
width: 100%;
min-height: 100vh;
max-height: 100%;
position: relative; //修改地方
}
.box-left {
position: absolute; //修改地方
left: 0; //修改地方
width: 160px;
min-height: 100vh;
max-height: 100%;
background: greenyellow;
}
.box-right {
position: absolute; //修改地方
left: 160px; //修改地方
right: 0; //修改地方
min-height: 100vh;
max-height: 100%;
background: darkcyan;
}table-cell 布局
CSS
.box {
width: 100%;
min-height: 100vh;
display: table; //修改地方
}
.box>article {
display: table-cell; //修改地方
}
.box-left {
width: 160px;
min-height: 100vh;
background: greenyellow;
}
.box-right {
min-height: 100vh;
background: darkcyan;
}grid 布局
CSS
.box {
width: 100%;
min-height: 100vh;
display: grid; //修改地方
grid-template-columns: 160px auto; //修改地方
}
.box-left {
background: greenyellow;
}
.box-right {
background: darkcyan;
}后续：
最近完成
作者：艾尔丶Lawliet
链接：https://www.jianshu.com/p/5b674ab859fe
随时随地看视频
