😺 CSS中 100% 和 Auto 的区别对比
Width、Height 的 Auto
在浏览器中元素宽高样式默认就是 Auto
width: auto
在块级元素中，width: auto 会自适应撑满父元素宽度。会根据 margin 值的不同来自适应撑满父元素宽度
在内联元素中，width: auto 则呈现出包裹性，即元素宽度由子元素的宽度决定
height: auto
无论块级元素还是内联元素，height: auto 都是呈现出包裹性，即元素高度由子元素的高度决定
Auto 总结
所以在正常的流体布局中：
- 块级元素会默认独占一行
- 内联元素会默认在一行中排列
- 内联块元素会默认在一行中排列，但是宽度由子元素决定
在块级元素中分为两种情况独占一行：
- 元素宽度定宽，
margin: auto则 Margin 会填满剩余空间 - 元素宽度Auto，外边距Margin定宽，则 Width 会填满剩余空间
Width、Height 的 100%
Width 是基于包含块（父元素）宽度的百分比宽度。 Height 基于包含它的块级对象的百分比高度。
这里要注意区分父元素和包含块的概念
一般情况下，包含块就是父元素，而当元素设置了定位等脱离了常规文档流之后，包含块就不一定是父元素了，需要根据具体情况分析