CSS布局

1.CSS绝对定位
属性名：position
属性值：absolute
使用了绝对定位的元素，相当于该元素被从原文档中删除了。
例如：

<style>
    .abs{
        position: absolute;
        top: 150px;
        left: 50px;
    }
</style>
<p>正常文字1</p>
<p>正常文字2</p>
<p class="abs">绝对定位元素3</p>
<p>正常文字4</p>

效果如下

绝对定位是基于最近的一个定位了的父容器
例如：

<style>
    .abs{
        position: absolute;
        top: 150px;
        left: 50px;
    }
    .absdiv{
        position: absolute;
        left:150px;
        top:50px;
    }
</style>
<p>正常文字1</p>
<p>正常文字2</p>
<div class="absdiv">
    这是一个定位了的div
    <p class="abs">绝对定位元素3</p>
</div>
<p>正常文字4</p>

效果如下：

如果没有了定位了的父容器，那么它的最近的一个定位了的父容器就是body
通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了
元素重复之后，就存在谁掩盖谁的问题，这时候可以通过设置z-index属性，当z-index值越大，就表示放在上面，z-index越小，就表示放在下面。
例如：

<style>
    #abs{
        position: absolute;
        top: 20px;
        left: 60px;
        z-index:1
    }
    #abs1{
        position: absolute;
        left:60px;
        top:120px;
        z-index: -1
    }
</style>
<p>正常文字1</p>
<p>正常文字2</p>
<p>正常文字2</p>
<p>正常文字2</p>
<p>正常文字2</p>
<p>正常文字2</p>
<img id="abs" src="file:///Users/chenyangyang/Downloads/example.gif">
<img id="abs1" src="file:///Users/chenyangyang/Downloads/example.gif">
<p>正常文字4</p>

效果如下：

2.CSS相对定位
属性名：position
属性值：relative
与绝对定位不同，相对定位不会把元素从原文档中删除，而是在原文档位置的基础上，移动一定的距离。
3.CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。
属性名：float
属性值：left、right
文字向右浮动：浮动后，原来的坑就让出来了，并且是在原来的高度的基础上，向右浮动。
例如：

<style>
    .r{
        float:right
    }
</style>
<p>正常文字1</p>
<p>正常文字2</p>
<p class="r">浮动文字</p>
<p>正常文字3</p>
<p>正常文字4</p>

效果如下：

文字向左浮动
首先，文字向左浮动后，会把坑让出来，这时候正常文字3就会试图占这个坑，但是，发现这个浮动文字并没有走，所以正常文字3就会排在它后面。

<style>
   .r{
       float: left;
   }
</style>
<div>正常文字1</div>
<div>正常文字2</div>
<div class="r">浮动文字</div>
<div>正常文字3</div>
<div>正常文字4</div>

效果如下：

如果不允许出现浮动元素，可以设置
属性名：clear
属性值：left、right、both、none
如果左边出现了浮动的元素，则设置clear:left即可以达到不允许浮动元素出现在左边的效果。
默认的div排列是会换行的，如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方，如果查过了父容器，还会有自动换行的效果。
4.CSS显示方式
元素的display显示方式有多种，隐藏、块级、内联、内敛-块级
隐藏：使得被选择的元素隐藏，并且不占用原来的位置。
属性名：display
属性值：none
块级：块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效。div是默认的块级元素。
内联：内联元素前后没有换行，并且在其上的width和height也无效，其大小由其中的内容决定。span默认是内联元素
属性名：display
属性值：inline
内联-块级
内联是不换行的，但是不能指定大小。块级是能指定大小的，但是会换行。
有时候需要元素处于同一行，并且能够指定大小，这时候就需要用到内联-块级 inline-block。
5.CSS水平居中
内容居中：
标签属性align：center
样式属性text-align：center
元素居中：
设置块级元素的宽度并设置样式margin:0 auto来使元素居中。
内联元素可以通过放置在div中，然后设置给div设置text-align实现。
6.CSS垂直居中
设置行高line-height的方式使元素垂直居中。

<div style="border: 1px solid blue;line-height: 50px;">
    内容是内容
</div>

还可以借助设置相同的上下内边距，来实现垂直居中的效果。
可以使用display:table-ceil的方式将div用单元格形式显示出来，然后借助单元格的垂直居中vertical-align:middle来达到效果。

<div style="border: 1px solid blue;display: table-cell;height:50px;vertical-align: middle;">
    内容是内容
</div>