流式布局
目的
让布局脱离固定值限制,可以根据页面情况改变相应发生改变
1、解决的经典案例
<style type="text/css">
.wrap {
max-width: 1200px;
min-width: 800px;
width: 90%;/*参考最近父级*/
height: 600px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="wrap"></div>
2、流式布局相关操作
① 百分比设置 %
② 窗口比设置 vw | vh
③ 字体控制 em | rem
em为最近设置字体大小的父级规定的字体大小
rem为html字体大小
3. 百分比流式(参考最近父级)
.box {
width: 90%;
max-width: 1000px;
min-width: 600px;
}
4. 窗口比
.box {
width: 90vw;
max-width: 1000px;
min-width: 600px;
}
