什么是自适应？
网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
- 宽度自适应：元素宽度的默认值为auto，当宽度不写的时候，width取值为auto，就是自适应，100%不是自适应，因为如果设置了padding和width 100%，只会加长横向滚动条，这明显就不是自适应
- 高度自适应：元素高度的默认值为auto,元素要使用height:100%;需要提前将html和body的height属性都设置为100%，否则设置无效，而且html和body两个缺一不可
最小宽高度
- min-height 最小高度
- max-height 最大高度
- min-width 最小宽度
- max-height 最大高度
两栏布局 - 通过calc()函数实现（后台管理页面常用）
- calc()函数：用于动态计算长度值，需要注意运算符前后都需要保留一个空格，eg.
width:calc(100% - 10px); - 任何长度值都可以使用 calc() 函数进行计算
- calc() 函数支持
+ - * /运算，按照数学运算优先级规则
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
color: aliceblue;
}
html,body{ /*要设置后面元素的height自适应，需要将html和body两个元素height设置为height:100%;缺一不可*/
height: 100%;
}
h1{
padding: 10px;
}
span{
display: block;
margin: 30px 10px;
text-indent: 1em;
}
.side{
width: 230px;
height: 100%; /* 元素要使用height:100%;需要提前将html和body的height属性设置为100%，否则设置无效 */
background-color: purple;
overflow: auto;
float: left;
}
.main{
width: calc(100% - 230px);
height: 100%;
background-color: brown;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div class="side">
<h1>侧边栏 - 固定宽度</h1>
<span>ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, modi ipsam ullam architecto vitae sapiente excepturi sunt minus illo laboriosam assumenda dignissimos vel velit harum eaque dolorum deleniti dolorem nisi?</span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam modi at sunt? Quae, veritatis. Voluptatibus, odit id maiores necessitatibus impedit soluta, et perspiciatis cum autem maxime, totam animi veniam? Libero?</span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam modi at sunt? Quae, veritatis. Voluptatibus, odit id maiores necessitatibus impedit soluta, et perspiciatis cum autem maxime, totam animi veniam? Libero?</span>
</div>
<div class="main">
<h1>右边主界面 - 自适应宽度</h1>
<span>ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, modi ipsam ullam architecto vitae sapiente excepturi sunt minus illo laboriosam assumenda dignissimos vel velit harum eaque dolorum deleniti dolorem nisi?</span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam modi at sunt? Quae, veritatis. Voluptatibus, odit id maiores necessitatibus impedit soluta, et perspiciatis cum autem maxime, totam animi veniam? Libero?</span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam modi at sunt? Quae, veritatis. Voluptatibus, odit id maiores necessitatibus impedit soluta, et perspiciatis cum autem maxime, totam animi veniam? Libero?</span>
</div>
</body>
</html>
三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.header,.main,.footer{
text-align: center;
font:normal bolder 18px/45px Aria,微软雅黑;
}
.header{
height:100px;
background-color: #7D9870;
}
.main{
/* PS：如果设置min-height，其子元素将无法设置height或min-height的百分比 */
height: calc(100% - 200px);
background-color: #F4FBF1;
}
.footer{
height: 100px;
background-color: #7D9870;
}
.main>div{
/* padding: 10px; */
float: left;
}
.sideLeft,.sideRight{
width: 180px;
height: 100%;
background-color: #B0AD88;
}
.section{
width: calc(100% - 360px);
}
.main>div>span{
display: block;
margin: 15px;
}
</style>
</head>
<body>
<div class="header">Header - 固定高度 自适应宽度</div>
<div class="main">
<div class="sideLeft"><span>sideLeft - 自适应高度 固定宽度</span></div>
<div class="section">section - 自适应高宽度</div>
<div class="sideRight"><span>sideRight - 自适应高度 固定宽度</span></div>
</div>
<div class="footer">Footer - 固定高度 自适应宽度</div>
</body>
</html>
