前言
提示：在你需求详细了解这几者的区别，你首选需求了解一下标准盒模型和怪异盒模型的区别。如果你已经了解这两者之间的区别，你可以直接跳转到
一、标准盒模型和怪异盒模型
这里简单概述一下两者的区别。一个盒模型包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)。也就是说标准盒模型和怪异盒模型都有这四部分，区别在于标准盒模型width=content，而怪异盒模型的width=content+padding+border。
1: 标准盒模型
width = content
width为100px，内容content为100px
2: 怪异盒模型
width = content+padding+border
width为100px，内容content=width-padding-border = 60px
3：切换盒模型：box-sizing
box-sizing: box-sizing:content-box，采用标准模式进行计算，默认就是这种模式。
box-sizing: box-sizing:border-box时，采用怪异模式进行计算。
二、width: auto和width: 100%
1：不设置padding、margin、border的时候
（1）代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
padding: 20px;
background-color: pink;
color: seashell;
}
.box1 {
width: 100%;
background-color: skyblue;
}
.box2{
width: auto;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">width: 100%</div>
<div class="box2">width: atuo</div>
</div>
</body>
</html>
（2）效果图
2：设置padding、margin、border的时候
（1）在第一步的前提下添加以下样式
.box1,
.box2{
padding: 10px;
margin: 10px;
border: 10px solid red;
}
（2）效果图
（3）对比盒模型
结论：从（3）可以看到 width:100% 的盒子超出了父盒子的内容区域，而 width:auto 的盒子仍然在父盒子的内容区域之内。
3：怪异盒模型并设置padding、margin、border的时候
（1）在第二步的前提下添加以下样式
.box1,
.box2{
box-sizing: border-box;
}
（2）效果图
（3）对比盒模型
4: 总结
width: 100% 和 width: auto是相对于父元素的 width来计算的（也就是父元素的content），区别在于：
width:100% 的元素， width 与父元素的 content 宽度相等
width:auto 的元素，总宽度与父元素的content 宽度相等
三、height: auto和height: 100%
相较于width:auto和width: 100%来讲，height: auto和height: 100%就比较简单了。
height：auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。
1：代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content{
display: flex;
}
.main {
width: 300px;
height: 300px;
padding: 20px;
background-color: pink;
color: seashell;
margin-right: 10px;
}
.box1,
.box2{
padding: 10px;
margin: 10px;
border: 10px solid red;
/* box-sizing: border-box; */
}
.box1 {
width: 100px;
height: 100%;
background-color: skyblue;
}
.box2{
width: 100px;
height: auto;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="content">
<div class="main">
<div class="box1">height: 100%</div>
</div>
<div class="main">
<div class="box2">height: atuo</div>
</div>
</div>
</body>
</html>
2：效果图和盒模型
3：height：100%标准盒模型和怪异盒模型的区别
这里其实就是由于盒模型改变导致了content的不同，就不过多讲解了。
总结
1： width: 100% 和 width: auto
width: 100% 和 width: auto是相对于父元素的 width来计算的（也就是父元素的content），区别在于：
width:100% 的元素， width 与父元素的 content 宽度相等
width:auto 的元素，总宽度与父元素的content 宽度相等
2：height: auto和height: 100%
height：auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。