定位等知识
## CSS 属性书写顺序
建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient
## 导航栏注意点 :
实际开发中, 我们不会直接用链接a 而是用 li 包含链接(li + a)的做法
行高会继承给孩子
## 定位组成
定位: 将盒子定在某一个位置 , 所以定位也是在摆放盒子, 按照定位的方式移动盒子
定位 = 定位模式 + 边偏移
1. 定位模式
定位模式决定的定位方式, 它通过 CSS 的 position 属性来设置, 其值可以分为四个
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
相对定位
概念 : 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
相对定位的特点：（务必记住）
1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。
绝对定位
概念 : 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
绝对定位的特点：（务必记住）
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置。（脱标）所以绝对定位是脱离标准流的。
子绝父相
概念 : 子级是绝对定位的话，父级要用相对定位
原因 :
① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
总结：
因为父级需要占有位置，因此是相对定位, 子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
固定定位 fixed
概念 : 定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
特点 :
1. 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随滚动条滚动。
2. 固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
## 固定定位小技巧： 固定在版心右侧位置
小算法：
1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了
## 定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
浮动不会压住文字
## 元素的显示与隐藏
1. display 显示隐藏
display 属性
display 属性用于设置一个元素应如何显示。
display: none ；隐藏对象
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置
2. visibility 显示隐藏
visibility 属性用于指定一个元素应可见还是隐藏。
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
visibility 隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用 visibility：hidden 如果隐藏元素不想要原来位置，就用 display：none (用处更多 重点）
3. overflow 溢出显示隐藏
