元素分类
- 块级元素 block
- 内联元素 inline
- 内联块级元素 inline-block
通过display可以改变元素的展示状态
块级元素
- 每个块级元素都是另起一行，并且独占一行
- 元素的盒模型属性都可以设置
- 元素宽度默认是父容器宽度的100%
内联元素
- 内联元素和其他内联元素都在一行展示
- 元素的盒子属性设置无效
- 元素的宽度是包含文字或图片的宽度，不可改变
内联块级元素
同时具备内联和块级的特征
整体对外展示内联特性，对内展示块级特性。
- 和其非块级元素在一行上
- 元素的盒子属性可以设置
盒模型
从内向外依次是 实际内容 -> 内填充 -> 边框 -> 边界
content -> padding -> border -> margin
布局模型
- 流动模型 Flow
- 浮动模型 Float
- 层模型 Layer
流动模型 FLow
流动Flow是网页的默认布局，默认情况所有的HTML元素都是根据流动模型来分布网页内容。
流动布局有两个特征：
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
- 内联元素都会在所处的包含元素内从左到右水平分布
浮动模型
任何元素在默认情况下都是不能浮动的，可以通过css定义为浮动。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
float取值有 left right none inherit
通常所说的float元素脱离了文档流，一般情况看上去没问题，
但 float最初的目的是实现文字环绕效果，从这点看，似乎又没脱离流，这一点我不解，
可能mdn给的这个就是解释吧
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性。
就是保持了部分流动性。
层布局
层布局模型，就像是Photoshop中的图层，每一层都能精确定位，
但在网页设计领域，由于网页大小的活动性，层布局没收到热捧。
如何让html元素在网页中精确定位，css定义了一组定位属性position来支持层模型布局：
Position
- absolute
- relative
- fixed
relative
设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着。
absolute
设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
由于relative没有脱离文档流，所以可以设置父元素为relative，设置子元素为absolute 就可以使用上下左右让子元素相对父元素移动了。
fixed
设置position:fixed（表示固定定位），与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
