一、左右布局常用的方式
1.position布局
需注意的是要给两/三栏元素的父元素添加高度来撑开布局空间，来摆放两/三栏元素：
两栏布局
position两栏布局.png
三栏布局
position三栏布局.png
2.float布局
需注意的是要给两/三栏元素的父元素添加清除浮动的样式clearfix，使两/三栏元素能自适应撑开父元素的空间：
两栏布局
float两栏.png
三栏布局
float三栏.png
二、元素调整
元素按照页面面积的占用形式，主要分为行内元素、块级元素、行内块级元素，他们的调整主要分为宽、高、行高、垂直居中、水平居中调整。
他们在文档流、脱离文档流中页面面积的默认占用情况不相同，而且通过设置元素宽高和居中，都会进一步改变元素的内容和页面面积的占用。
在文档流中，块级元素的宽度默认会自适应父元素宽度，高度默认为每一行文档流高度之和，在脱离文档流后，宽高默认都会变为根据内容自适应，无论是否脱离文档流，都可height设置高度，或line-height设置行高，width设置宽度；块级元素的左右居中通过"margin-left=margin-right=确定值/auto"设置，垂直居中通过"padding-top=padding-bottom=确定值"设置。
对于行内元素，则无论是否脱离文档流，宽高都默认根据内容自适应，line-height设置行高，width设置宽度，但脱离文档流之后，可以通过height设置高度；行内元素左右居中通过对父元素添加样式"text-align：center"设置，默认垂直居中。
而inline-block元素的使用，一般需添加样式"vertical-align: top"，确保内容垂直方向的居中。
网友评论