「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」
CSS width 和 height 的：auto 和 100%
一、 width：auto和height：auto
width、height的默认值都是auto。
width: auto
在块级元素中，width: auto会自适应撑满父元素宽度（流体布局中）。这里的撑满和width: 100%的固定宽度不同，而是像水一样能够根据margin值的不同而自适应父元素的宽度。
在内联元素中，width: auto则呈现出包裹性，即元素宽度由子元素的宽度决定。
height: auto
无论内联元素还是块级元素，height: auto都是呈现出包裹性，即元素高度由子元素的高度决定。
正常的流体布局中，块级元素会默认占满一行。这里的占满可以分为两种情况。
- 块级元素的
width是固定值，margin是auto，则margin会撑满剩下的空间； - 块级元素的
margin是固定值，width是auto，则width会撑满剩下的空间。
.container{
width: 150px;
margin: auto;
height: 50%;
background-color: aqua;
}
.container {
width: auto;
margin: 0 50px;
height: 50%;
background-color: aqua;
}
二、 width：100%和height：100%
width：x% ：定义基于包含块（父元素）宽度的百分比宽度。 height：x%：基于包含它的块级对象的百分比高度。
<body>
<div class="wrap">
<div class="container">
<div class="content">
Hello World!
</div>
</div>
</div>
</body>
.wrap {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.container {
position: relative;
width: 50%;
}
.content {
width: 100%;
position: absolute;
background-color: aqua;
}
这里 .content的100%是相对于 .container
.wrap {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.container {
/* position: relative; */
width: 50%;
}
.content {
width: 100%;
position: absolute;
background-color: aqua;
}
这里 .content的100%是相对于 .wrap
这里要注意区分父元素和包含块的概念
一般情况下，包含块就是父元素，而当元素设置了定位等脱离了常规文档流之后，包含块就不一定是父元素了，需要根据具体情况分析
三、height:100% 和 height:auto 的区别
height:auto，是指根据块内内容自动调节高度。
height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。
注意父元素height: auto会导致子元素height: 100%百分比失效。
如果想要子元素的height:100%生效，
那么父元素需要设定显式高度值；或者子元素使用绝对定位。（绝对定位元素百分比高度根据父元素的padding box计算，非绝对定位元素百分比高度是根据父元素的content box计算）
此处补充一个demo
通过切换.content的position开关，观察.content的高度变化。
position:absolute 打开时
.content的父元素是 .wrap，高度根据.wrap 的 padding box 计算
position:absolute 关闭时
.content的父元素是 .container，高度根据.container 的 content box 计算
<!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>
html,body{
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 200px;
background-color: aquamarine;
position: relative;
padding: 50px 0;
}
.container {
height: 100px;
background-color: rgb(255, 192, 203);
padding: 50px 0;
}
.content {
height: 50%;
/* position: absolute; */
background-color: aqua;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="content">
Hello World!
</div>
</div>
</div>
</body>
</html>
