# 定位与布局

我们常用浮动(float)、定位(position)、显示模式(display)相关属性结合使用来实现页面元素的定位与布局

# 一、文档流

CSS文档流大致可以分为3种：标准流，浮动流，定位流。

1，标准流（文档流）

内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

2，浮动流

float属性：设置某个元素在父元素内左对齐或者右对齐

脱离标准流，之后它将无视元素的display属性，并且都被当做块级元素处理

3，定位流

a) static 静态定位，实际上所有元素默认都是静态定位的，即处于标准流中。

b) relative 相对定位，元素保留在标准流中所占用的位置，但实际是边框及以内的部分将显示在偏移之后的位置。即虽然元素已经不再原来的位置了，但之前所占用的空间并不会被释放给其他标准流中的元素。

c) absolute 绝对定位，元素脱离标准流，浏览器把它视作块级元素，不论定位之前它是何种元素，其他元素也将无视它。绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的。

d) fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口。

# 二、浮动

a) 在相同方向上浮动的元素，先浮动的元素会显示在前面。

b) 不同方向的浮动元素，会尽量去寻找并贴靠前面和它浮动方向相同的元素。如果前面没有其他浮动元素，那么它将紧贴其父元素的边界。

c) 如果有未浮动的兄弟元素，那么元素在浮动之后，会根据它在标准流中的位置确定该在第几行展示。

浮动元素还有一个特点：浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置。这才是设计浮动的初衷。

元素浮动后会带来两个问题，第一个是造成父元素的高度塌陷，padding和margin无效。第二个是被其他元素无视，出现元素相互覆盖的现象。那么要怎样才能消除浮动对其他元素的影响呢？我们通过下面的方式清除浮动带来的影响。

a) 为父元素设置固定的高度（解决问题一）。

b) 为父元素设置浮动（解决问题一）。

c) 设置clear属性。clear属性的功能是使浮动元素不去寻找相邻的其他浮动元素，从而消除浮动元素对其他元素的影响（解决问题二）。

d) 为父元素设置overflow:hidden; 属性（解决问题二）。

# 三、定位

1，相对定位

通过给元素设置position:relative; 属性设置元素相对定位。

 .box {
     position: relative;
     top: 50px;
     left: 50px;
 }

 /*box元素将在原来的位置向下和向右偏移50px，请注意：在定位流中，同一个方向上的定位属性只能使用一次*/

1
2
3
4
5
6
7

请注意在浏览器中的坐标系和一般坐标系并不相同。如果不清楚请看《CSS基础》 (opens new window)第4.3节。

在相对定位中，实际上元素并未脱离标准流，所以浏览器还是会区分它是否是块级或其他类型的元素。另外，设置元素的margin属性，实际上margin区域会出现在元素定位之前的位置。

2，绝对定位

通过给元素设置position:absolute; 属性设置元素绝对定位。

.box {
    position: absolute;
    top: 50px;
    left: 50px;
}

/*box元素将相对于父元素的左顶点（坐标原点）向下向右偏移50px*/

1
2
3
4
5
6
7

如果没有设置偏移量，默认top和left偏移量为0。如果元素所有祖先元素都没有定位属性，那么元素将相对body元素偏移。

在使用绝对定位时有两个注意点：第一个是如果网页宽高较大时（大于浏览器可视区宽高），并且元素最终相对于body定位了，实际上它只是相对浏览器首屏的宽高进行偏移，而不是整个网页的宽高。第二个是绝对定位的元素会自动忽略有定位属性的祖先元素的padding属性。

绝对定位一般和相对定位配合使用，父元素设置相对定位，但不设置偏移量（默认为0），子元素设置绝对定位，这样就可以把子元素的偏移控制在父元素之内。

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 50px;
    top: 50px;
}

/*子元素相对父元素进行偏移，二父元素不受影响*/

1
2
3
4
5
6
7
8
9
10
11

3，固定定位

元素的固定定位和背景图片的关联性相似，可以控制元素是否随着滚动条滚动。

div {
    position: fixed;
    top: 100px;
    left: 50px;
}

1
2
3
4
5

固定定位的元素相对于浏览器视口偏移，和绝对定位的元素一样，它会脱离标准文档流，并且浏览器把他们一致视作块级元素。

4，z-index属性

默认情况下，所有元素都有一个z-index属性，用于定义它们的覆盖关系。

div {
    z-index: 999;
}

1
2
3

通常情况下，元素的z-index属性值都是0，并且定位流中的元素会覆盖标准流中的元素，同在定位流中的元素，写在后面的会覆盖写在前面的元素。

在定为流中，如果你想调整它们的覆盖关系，你可以设置它们的z-index属性，并且谁的值越大，显示优先级越高。

需要注意的是，如果定位元素的父元素也设置了z-index属性，那么子元素的z-index属性将失效，并且最终是根据父元素的z-index属性来判断覆盖关系。

# 四、水平居中

1、行内元素水平居中：(当子元素不为行内元素时，可设置子元素display：inline/inline-block)

/* 设置父元素文字居中即可居中显示 */
.parent {
    text-align: center;
}

1
2
3
4

2、定宽块状元素水平居中：

/* 设置左右margin为auto */
.block {
    width: 100px;
    margin: auto;
}

1
2
3
4
5

3、绝对定位居中显示

.block {
    position: absolute;
    left: 50%;
}

.parent {
    position: relative;
}

1
2
3
4
5
6
7
8

4、css3不定宽度**transform: translateX(-50%); **

.block {
    transform: translateX(50%);
}

1
2
3

5、flex实现

.parent {
    display: flex;
    justify-content: center;
}

1
2
3
4

# 五、垂直居中

1、父元素定高单行文本垂直居中

.parent {
    height: 100px;
}

.block {
    line-height: 100px;
}

1
2
3
4
5
6
7

2、多行行内元素

/* 父元素设置display:table-cell;和vertical-align: middle; */
。parent {
    display: table-cell;
    vertical-align: middle;
}

1
2
3
4
5

3、块状元素css3

.block {
    transform: translateY(50%);
}

1
2
3

4、绝对定位

.parent {
    position: relative;
}

.block {
    /* 绝对定位; */
    position: absolute;
    top: 50%;
}

1
2
3
4
5
6
7
8
9

5、flex实现垂直居中

.parent {
    display: flex;
    align-items: center;
}

1
2
3
4

← CSS3有哪些新特性？现代化css →