一、盒模型
如果要知道元素的宽度，那一定需要了解css中的盒模型。
所有的元素都可以看作一个盒子，这个盒子包括 margin、border、padding、content。
盒模型分类
| 分类 | box-sizing | 盒子总宽度 |
|---|---|---|
| 标准盒模型 | content-box | margin(上下) + border(上下) + padding(上下) + width |
| 怪异盒模型 | border-box | margin(上下) + border(上下) + padding(上下) + content |
元素box-sizing默认是content-box，但是便于布局，大多时候用的border-box，设置height 即表示 不算 margin（左右）的宽度。
怪异盒模型中border + padding + content 等于css中width的数值（无其他属性影响时）
height属性值
| 值 | 描述 |
|---|---|
| auto | 默认值。浏览器可计算出实际的宽度 |
| length | px、rem、em、vw等单位 |
| % | 基于包含块元素（父元素）高度的百分之 |
| inherit | 从父元素继承height属性值 |
height: 100%
接下来我们聊了height: 100% 的宽度是如何计算的。
设置百分比生效的两个条件：
- 父标签有高度可循，如果中途遇到height: auto，百分比将不会生效
- 元素自身的属性，如：inline、浮动，脱离正常文档流、zoom，百分比将不会生效
单位之间的区别
屏幕高度为 500px，父亲盒子的高度为 300px，自身内容高度为100px
| 属性值 | 描述 | 盒子此时的高度 |
|---|---|---|
| 100% | 根据有高度(height不能为auto)的父亲盒子进行计算 | 300px |
| 100vh | 根据窗口的高度 | 500px |
| auto | 根据块内容自动调整高度 | 100px |
设置height的趣事
- 如果设置的min-height 大于height，height将失效，盒子最后呈现的最后高度与min-height和实际内容高度息息相关。
- 在flex布局中，flex item 设置
flex:1的盒子，当实际内容过多的时候，会被撑开，这是因为该盒子的 min-width为 min-content，此时只需要设置一下min-width: 0就可以解决撑开的问题。
