何为自适应：
网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
- 宽度自适应：元素高度的默认值auto
<body>
<div></div>
</body>
<style>
div{
/* width: 100px; */
width: auto; /* 不写或者auto才叫自适应*/
/* width: 100%; */
padding-left: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
- 高度自适应：元素高度的默认值{height: auto;}
<body>
<div class="header"></div>
<div class="body">
<ul>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</div>
<div class="footer"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.header, .footer{
height: 100px;
background-color: blue;
}
.body{
/* height: 600px; */
min-height: 500px;
background-color: green;
}
li{
height: 100px;
max-width: 500px;
margin: 0 auto;
background: saddlebrown;
}
</style>
- 窗口自适应：盒子根据窗口进行大小改变
html, body{ height: 100%; }
<body>
<div class="box">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 100%;
background: salmon;
}
html, body{
height: 100%;
}
/* 窗口自适应加上此段 */
.child1{
height: 50%;
background: aquamarine;
}
.child2{
height: 50%;
background: rgb(45, 50, 48);
}
</style>
