CSS 布局

在网页中，元素有三种布局模型：

流动模型（Flow）== 标准流 == 文档流
浮动模型 (Float)
层模型（Layer） == 定位

流动模型，块级元素占一行，内联元素并排显示

浮动模型 ，让块级元素并排显示

div{
    width: 200px;
    height: 200px;
    float: left;
}

层模型

绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)

绝对定位，相对于浏览器窗口(屏幕内的网页内容)，脱离文档流

div{
    width: 200px;
    height: 200px;
    border: black 1px solid;
    position: absolute;
    left: 20px;
    top: 20px;
}

相对定位，相对于以前的位置移动，可层叠

div{
    width: 200px;
    height: 200px;
    border: black 1px solid;
    position: relative;
    left: 20px;
    top: 20px;
}

固定定位，相对移动的坐标是视图（屏幕内的网页窗口）本身，脱离文档流

#id1{
    width: 200px;
    height: 200px;
    border: black 1px solid;
    position: fixed;
    left: 20px;
    top: 20px;
}

继承定位

以父定位为主

水平居中

1、行内元素
text-align: center

2、定宽块元素
div{
            width: 200px;
            border: blue 1px solid;
            margin: 200px auto;
}

3、不定宽块元素
table{
            border: blue 1px solid;
            margin: 20px auto;
}

4、浮动
.container{
            float: left;
            left: 50%;
            position: relative;
}
.container ul{
            list-style: none;
            display: inline;
}
.container li{
            list-style: none;
            display: inline;
}

垂直居中

table td{
           border: blue 1px solid;
           height: 400px;
           vertical-align: middle;
}


设置为表格单元显示
.container{
           height: 400px;
           display: table-cell;
           vertical-align: middle;
           border: blue 1px solid;
}


内联块元素
.container a{
           position: absolute;
           width: 200px;
           background: brown;
           border: blue 1px solid;
}

Z-index

值越大，层级在上