定位+特性
定位方式
文档流定位（静态定位）
默认的定位方式，显示的元素从上到下，从左向右排列，通过外边距控制位置
格式： position:static
相对定位
元素不脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于元素的初始位置
应用场景：当元素需要从当前位置做位置偏移时，仍然占着原来的位置
绝对定位
元素脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口或做了相对定位的祖先元素
应用场景：当元素需要做位置偏移，不需要保留原来位置时使用绝对定位
固定定位
脱离文档流，通过top/left/right/bottom控制元素位置的偏移，偏移值相对于窗口。
应用场景，当某个元素需要固定在窗口的某个位置的时候使用固定定位
浮动定位
- 脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边缘或同级其它浮动元素时停止
- 如果一行显示不下，会自动折行，如果折行时上面的一行有凸出的部分有可能会被卡住
- 如果元素的所有子元素全部浮动，则自动识别的高度为0，通过给元素添加overflow:hidden;
- 如果元素浮动则会脱离文档流后面的元素会顶上来，可以通过给后面元素添加clear属性让后面的元素左右两侧不允许有浮动，这样后面的元素就不会再顶上来。
- 应用场景：当纵向排列的元素需要改成横向时 使用浮动定位
行内元素垂直对齐方式
/* vertical垂直 对齐方式 默认基线对齐baseline
top上对齐 bottom下对齐 middle中间对齐 */
/* vertical-align: middle; */
/* 如果有需求对页面中的某一个元素做位置偏移
需立即想到相对定位 */
/* position: relative;
top: 10px; */
CSS的三大特性
继承性
子元素可以继承祖先元素中的部分属性，只能继承color/font-开头/text-开头/line-开头的属性 ，某些特定元素自带显示效果不受继承影响 比如：超链接a，h1-h6字体大小不受继承影响
层叠性
通过不同的选择器可以选择到同一个元素,如果作用的属性不同则全部生效，如果设置的是相同的样式则根据优先级决定
优先级
作用范围越小优先级越高，直接选中优先级高于间接选中（继承）
id>class>标签名>继承