一：宽高自适应
1：width：auto；或者不写，才是宽度自适应；
导航栏，通栏布局通常设置宽度自适应
2：height：auto；高度自适应，根据内容多少调节高度
3：min-height：设置最小高度，这个一般用的比较多。
max-height；min-width；max-width；
4：浮动元素的高度自适应
.box::after{
content: ""; /* 空的行内元素 */
clear: both; /* 清浮动 */
sidplay: block; /* 行内元素-->块元素 */
height: 0;
width: 0;
visibility: hidden; /* 内容隐藏，可以隐藏content中的内容 */
}5：窗口自适应
盒子可以根据窗口的大小进行改变。
以下为例，设置box为默认的100%宽高。
<style>
.box{
width: 100%;
height: 100%;
}
html,body{
height:100%
}
</style>二：屏幕分多栏布局（使用窗口自适应）
1：两栏布局（左栏宽度固定，右栏宽度自适应）
方案一：box1设置浮动，box2设置margin-left，将box1浮动占的weight空出来
方案二：box2使用calc函数计算weight，box1设置左浮动，box2设置右浮动
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 100%;
weight: 200px;
background: red;
/* float: left; */
}
.box2{
height: 100%;
background: yellow;
/* margin-left: 200px; */
/* width: calc(100% - 200px); */
/* float: right; */
}
html,body{
height: 100%;
}
/* 方案一：box1设置浮动，box2设置margin-left，将box1浮动占的weight空出来 */
/* 方案二：box2使用calc函数计算weight，box1设置左浮动，box2设置右浮动*/
</style>
扩展知识点：
2：三栏布局1（左、右两栏宽度固定，中间栏自适应）
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
/**********************************/
.left,.right{
height: 100%;
weight: 200px;
}
.left{
background: yellow;
/* float: left; */
}
.right{
background: red;
/* float: right; */
}
.center{
height: 100%;
background: yellow;
/* margin-left: 200px; */
/* margin-right: 200px; */
/* width: calc(100% - 400px); */
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
方案一：left,right设置浮动，center设置margin-left & margin-right，将left,right浮动占的weight空出来
注：此方案需要注意body中right和center的顺序，center未设置浮动，为块元素，如果center在right前，则right无法和center在同行显示。
方案二：center使用calc函数计算weight，left，center设置左浮动，right设置右浮动
3：三栏布局2（上、下栏高度固定，中间栏高度自适应）
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
/**********************************/
.top,.bottom{
height: 50px;
weight: 100%;
background: #ccc;
}
.middle{
width: 100%;
background: yellow;
height: calc(100% - 100px);
/* margin-left: 200px; */
/* margin-right: 200px; */
}
.left,.right{
width: 100px;
height: 100px;
background: red;
float: left;
}
.center{
width: calc(100% - 200px);
height: 100&;/* 此处为父盒子高度的100% */
background: blue;
float: left;
}
</style>
<body>
<div class="top"></div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="middle"></div>
</body>
扩展：
1：display：none；不占位的隐藏
2：visibility：hidden；占位隐藏
3：
4：