DIV+CSS页面基本布局总结

1.固定宽度布局

一列水平居中布局
一列的宽度固定为已知值，使用margin设置来达到水平居中效果。
html代码：

image.png

css代码：

image.png

效果：

image.png

其中对于宽度固定的元素，只需要设置该元素的css样式(margin:0 auto;)就可以实现让该元素在其父元素的宽度下水平居中对齐显示。

两列布局（浮动）
网页布局常见左右两列布局，如果已知左右两列的宽度是固定值，则可以使用float浮动方式完成基本布局排版

html代码：

image.png

css代码：

image.png

效果：

两列布局，当已知列的宽度时，可以使用浮动属性来达到左右布局的效果，仅需设置float:left和float:right就可以轻松达到页面布局效果。
注意：因为float 会是元素脱离文档流 子元素设置了左右浮动 撑不开父元素 父元素失去高度 需要清除浮动 写个伪类 这种清除浮动的方法最好，因为伪元素不占据空间。

三列布局
三列水平布局，如果列的宽度都是固定的，实现方式与上面两列布局相似，使用浮动即可达到效果。

html代码：

image.png

css部分代码：

image.png

效果：

image.png

leftbox和midbox设置左浮动，rightbox设置右浮动。但关键的是，三个子元素的总宽度不能大于或者等于父元素的宽度。

2. 自适应宽度布局

两列布局（实现效果：两列自适应宽度）
思路：实现自适应两列布局，可以继续使用浮动方式来布局，但在设置浮动元素的宽度时，不再使用固定值，而要使用百分比，从而实现宽度的自适应。

两列布局（实现效果：左侧为固定宽度，右侧自适应）
1）使用浮动来进行自适应布局：

html代码

image.png

css代码

image.png

效果

image.png

基本思路分析：

1.左侧设置固定宽度并设置浮动float:left;
2.右侧不设置宽度，只设置左侧边距为左侧栏的宽度加上左侧与右侧的间距margin-left。

使用定位来进行布局：

image.png

基本思路分析：

父元素设置为position:relative;
leftbox设置固定宽度，设定为绝对定位position:absolute。
rightbox设置为相对定位position:relative。（使其遮盖左侧栏）
rightbox设置左边距，边距值margin-left刚好为左侧栏的宽度。

效果：

image.png

三列布局：中间自适应（实现效果：原理类似于两列布局）
1）使用浮动来布局
中间列自适应。

image.png

基本思路分析：
1.左侧以及右侧设置固定宽度，并且分别设置左右浮动。
2.中间栏设置左右边距，边距值刚好分别等于左右侧栏的宽度。

使用定位来布局

image.png

思路分析：
1.父元素设置position:relative;
2.leftbox和rightbox设置position:absolute;并且设置左右侧栏的宽度值。
3.midbox设置position:relative;
4.midbox设置左右margin值，正好对应左右侧栏的宽度值
(margin=leftboxWidth/rightboxWidth)。

水平垂直居中
让一个块级元素水平居中 margin : 0 auto;

让一个块元素水平垂直居中

image.png

效果

image.png

除了可以使用margin-top把div往上偏移之外，CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：

image.png

用flex设置元素水平垂直居中

image.png