前端入门系列--CSS（5）

CSS布局：标准流（从左到右从上到下最基础）、浮动（为了让盒子在一行上显示）前面已经讲过了，本篇继续阐述最后一种：定位。
针对一些页面效果（商品图片上方小标签图片），浮动虽然可以实现，但是其不能在图片和文字上方，而定位则可以克服该问题；

1、三种方式的关系

标准流是在最下方–>浮动在中间–>定位在最上方

2、定位详解

选择器{
		position:定位方式;
		边偏移方向:具体数值px;
		...
}

2.1定位方式

1、static是默认方式，相当于无定位（几乎不会用到）
2、relative是相对定位，其偏移是相当于它当前所在位置进行的，且其是占位置的（即原来的位置会保留，别的元素占不了）；
3、absolute是绝对定位，其父级若是有定位的则按照父亲进行偏移，否则再往上一级找有定位的爷爷依次上推，如果都没有则相对于浏览器，其是不占位置的（即原来位置会被其他元素占掉）
重点：通常2/3是结合起来使用的，子盒子用绝对定位而父亲用相对定位
4、fixed固定定位，相当于一种特殊的绝对定位，不过其偏移只相当于浏览器当前的可视窗口，不会随滚动条滚动，与绝对定位一样也不占位置

2.2边偏移

在写了定位的方式后则以偏移方向+偏移量写明偏移的具体，如：top：10px则是如下图的上方偏移

2.3定位扩展

2.3.1绝对定位盒子水平居中

绝对定位盒子不能喝正常盒子一样通过设置margin：0 auto；来设置水平居中对齐；
其应该通过特殊公式进行水平居中，如下：

1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**

2.3.2堆叠顺序

前面说了标准流、浮动与定位之间的顺序，但是定位之间的顺序如下：
加了定位的盒子，后来居上，如果想要前面的盒子在上面的话则必须给其添加z-index属性，属性可以是任意整数，数值越大位置越上层；注意该属性只对定位的元素有用；

2.3.3改变display属性总结

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块
  所以对于一个行内元素若加了浮动、固定定位、绝对定位则可以直接设置宽高，不用再转行内块
  且浮动、固定定位、绝对定位的元素不会有外边距塌陷的问题（前面是通过给父盒子加border、padding、overflow：hidden来解决的）
  
  

2.4三种方式总结

一个网页通常是由三种方式共同作用完成的：

1). 标准流

可以让盒子上下排列 或者 左右排列的；

2). 浮动

可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列；

3). 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值；