布局中的位置问题

绝对定位与相对定位

position的参数：
static : 　默认属性，对象遵循正常文档流，top，right，bottom，left等属性不会被应用。
relative : 相对定位，对象遵循正常文档流，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。相对body定位。
absolute : 绝对定位，对象脱离正常文档流，将对象从文档流中拖出，使用left、right、top、bottom等属性进行绝对定位。而其层叠通过[css z-index]属性定义。此时对象不具有边距，但仍有补白和边框。相对html定位，或者相对父元素非“position：static”的元素定位。
fixed: 固定定位，对象脱离正常文档流，相对于父元素的定位，父元素一般为窗口，需要配合top,left,right,bottom,z-index等属性(IE6不支持)。

注意：

• 我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~
  •如果top和bottom一同存在的话，那么只有top生效。
  •如果left和right一同存在的话，那么只有left生效。
• 使用static 定位或无position定位的元素z-index属性是无效的，即（z-index为整数，可为负，仅能在定位元素上奏效，如position:absolute、relative、fixed;）
• margin的auto属性的作用是用来分配剩余空间。内联元素，不是占一整行，没有剩余空间，如<a href=" "></a>,
  ,<img src=" " />,<span></span>,<input type=" " />。块级元素需要设置宽度，如果没有宽度的块默认就是100%，就没有auto值了。

设置块级元素水平垂直居中

• 方法一（弊端：需要计算块级元素的一半，来进行偏移）
  position: absolute;top:50%;left: 50%;margin-left: -25px;margin-top: -25px
• 方法二（translate方法中的参数分别指x、y方向的偏移）
  position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%)"
• 方法三（推荐使用）
  position: absolute;top: 0;bottom: 0;left:0;right:0;margin: auto

---

注意：
一般块级元素水平居中用margin:0 auto;即可。
文字水平居中：单行文字用text-align：center，多行文字参照块居中。垂直居中，将文本的line-height设置父元素的高度

flex布局

float浮动

手册解释：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
（那浮动float的本意是什么呢？是：让文字像流水一样环绕浮动元素。用浮动实现页面布局本不是浮动该干的事情）
取值：默认none,元素不浮动，并会显示在其在文本中出现的位置。left左浮动。right右浮动。inherit从父元素继承float属性的值。