css布局（水平居中、垂直居中、定位、浮动等）--源于ife task2的思考

1. 盒子模型

margin外边距，border边框，padding内边距，element元素

2. 水平布局

2.1 盒子模型理解水平布局

父元素width=子元素margin-left+border-left+padding-left+width+padding-right+border-right+margin-right;

2.2 行内元素实现水平居中

text-align="center";

2.3 使用width和margin水平居中

{ width:100px; margin-left:auto; margin-right:auto; }

2.4 使用position，margin和left水平居中

eg1:实现在父元素水平居中
.box { height: 100px; width: 100px; position: absolute; margin: 0px 0 0 -50px;//宽度的一半 left: 50%; }

eg2:实现在父元素水平居中
.box { height: 100px; width: 70%; position: absolute; margin: 0px 0 0 -35%;//宽度的一半 left: 50%; }

2.5 使用incline-block水平居中

仅inline-block属性是无法让元素水平居中，display:incline-block;
关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果

2.6 浮动实现水平居中的方法：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
ul{
    float:left;
    position:relative;
    left:50%;//整个分页向右边移动宽度的50%
}
li{
    float:left;//我们会让导航浮动到左边，而且每个分页项也进行浮动，
    position:relative;
    right:50%;//将每个分页项向左边移动宽度的50%
}

3. 垂直布局和垂直居中对齐

3.1 盒子模型理解垂直布局

父元素height=子元素margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

3.2 单行文字

若单行文字居中，让line-height设置与外部盒子的height值一样即可。

3.3 水平和垂直的居中

eg3:实现在浏览器框中的水平和垂直的居中
#container{ position: fixed; width: 400px; height: 200px; background: #ccc; margin: -100px 0 0 -200px; left: 50%; top:50%; }

eg4:实现对父元素的水平和垂直的居中
.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }

4. 包含浮动

一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。
这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。

<div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
.box-set {
    background: #e8eae9;
}
.box {
    background: #8ec63f;
    height: 100px;
    float: left;
    margin: 10px;
    width: 200px;
}

这个父元素box-set会塌陷，不会出现background: #e8eae9;的效果；

5. 清除浮动

5.1 父元素中加入overflow清除浮动，则不会出现塌陷，父元素效果可以呈现出来

.box-set { background: #404853; overflow: auto; }

使用“overflow:auto;”,在IE中会给元素添加滚动条，最好是直接使用“overflow:hidden;”来清除浮动。

5.2 clearfix清除浮动

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。
使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。
“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。
“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。

.box-set:before,
.box-set:after { content: ""; display: table; }
.box-set:after { clear: both; }
.box-set { *zoom: 1; }

6. 定位

使用定位，可以准确的定义元素框相对于其正常位置应该出现在哪，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置

6.1 position relative:

relative”可以给元素设置位移（offset）“top、right、bottom和left”属性。通过这些位移属性设置可以给元素进行精确的定位。

6.2 position absolute:

绝对定位元素会脱离文档流,绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。
绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然元素定位会相对于页面的主体进行定位。

6.2 position fixer:

固定定位和绝对定位很类似，但是他定位是相对于浏览器窗口，并且不会随滚动条进行滚动。
固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。不需使用margin、border和padding。

7. z-index属性

改变元素是的层叠顺序，改变这种层叠顺序可以直接使用“z-index”来控制。元素的“z-index”值越高将会出现在越上面，不管元素在Dom哪个位置上。