CSS布局和元素调整

一、左右布局常用的方式

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"，确保内容垂直方向的居中。