CSS布局

2018-06-27 本文已影响0人西域战神

常用居中法：

居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：

</div>

1.水平居中

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

行内元素：对父元素设置text-align:center;

定宽块状元素: 设置左右margin值为auto;

不定宽块状元素: 设置子元素为display:inline,然后在父元素上text-align:center;

2.垂直居中

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

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height

父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;

块状元素:设置子元素position:absolute 并设置marigin:auto

左中右和左右布局

</div>

1. float+margin

布局步骤:

1.对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。

2.对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

.left { float:left; width:100px;}

.right{ float:right; width:200px; }

.main{ margin-left:100px; margin-right:200px;}

注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列.这个布局会先渲染左右两列，然后才是main。

左右布局的实现方法

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

2. position+margin

布局步骤:

1.对两边侧栏分别设置宽度，设置定位方式为绝对定位。

2.设置两侧栏的top值都为0，设置左侧栏的left值为0，右侧栏的right值为0。

3.对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

.left,.right { position:absolute;top:0;width:200px;}

.left{ left:0;}

.right{right:0;}

.main{ margin:0 200px;}

本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。

与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。

如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。