CSS入门（2）
CSS布局与定位
- 大背景图
- 开发者工具>Network>漏斗>img>保存到resume中的img目录
- 图片推荐：wallhaven网站壁纸天堂
- 大名片
- 下载按钮
- 进度条
- 非线性布局
- 知识点：
- 高度是由什么决定的
- 内联元素
- 块级元素
文档流就是文档内元素的流动方向。内联元素（如span)文档内元素流动方向从左到右，遇到阻碍换到下一行继续，中文词会断成两行，但英文单词不会换行，这时需要使用word-break：break all属性。块级元素（如div）从上往下，每个块独占一行。用display:inline-block；如果空间够，可以把块弄成一行，同样效果建议使用float（子元素float，父元素clearfix）。
块级元素的高度由其内部文档流元素高度总和决定（不一定相等）。
内联元素的高度比较复杂，不同浏览器有不同建议行高=上下出血+上部+中部+下部，不同字体建议行高也不一样TT。
文字的居中不是文字中心点居中，而是基线对齐
font-size：100px，此时的100px就是上中下
border大法，有效的调试方法。
height能不用就不要用，很容易出bug
- line-box是啥
- box是啥（盒模型）
- 宽度是由什么决定的
- position的5（6）个取值
- 高度是由什么决定的
| 取值 | 含义 |
|---|---|
| fixed | 脱离文档流，不随页面滚动发生变化 |
| inherit | 继承父元素的position值 |
| static | 默认定位，排哪就哪儿 |
| relative | 相对定位，相对默认位置移动 |
| absolute | 绝对定位，以父元素的左上角的最靠边的点为坐标原点，相对于该点进行移动 |
| sticky | 新增的 |
脱离文档流后文字会缩到一块，这时迫不得已要加宽度width：100%（容易出bug）
6. z-index
z-index指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
- 堆叠顺序可为正数，也可为负数
- 堆叠顺序越高越在前面
- 没有指定堆叠顺序的，最后定位的显示在最前面
