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设置右浮动。但关键的是，三个子元素的总宽度不能大于或者等于父元素的宽度。
- 自适应宽度布局
两列布局（实现效果：两列自适应宽度）
思路：实现自适应两列布局，可以继续使用浮动方式来布局，但在设置浮动元素的宽度时，不再使用固定值，而要使用百分比，从而实现宽度的自适应。
两列布局（实现效果：左侧为固定宽度，右侧自适应）
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
网友评论