CSS

布局是CSS中一个重要部分，本文总结了CSS布局中的常用方法，包括常用的左右布局、左中右布局，以及水平居中、垂直居中的多种实现方式。

 

 

一、左右和左中右布局：

之所以将左右布局和左中右布局写在一起，是因为左右布局可以看做去掉一个中间栏的左中右布局，其布局的思想是类似的。

a. float+margin

原理说明：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。

布局步骤:

1. 对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动，记得用clearfix清除bug。
2. 对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

 

左右布局的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。

b. position+margin

原理说明：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。

布局步骤:

1. 对两边侧栏分别设置宽度，设置定位方式为绝对定位。
2. 设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。
3. 对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

 

左右布局的实现方法

如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。

 

二、居中方法

a.水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。

子元素为

行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

 

b.垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;