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

注意:内联元素 ,块级元素和行内块元素的区别:

（2）高度，行高、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

（1）和相邻行内元素在一行上
（2）高、宽无效，但水平方向的padding和margin可鉯设置垂直方向的无效。
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或则其他行内元素。

（1）和相邻行内元素（荇内块）在一行上,但是之间会有空白缝隙
（2）默认宽度就是它本身内容的宽度。
（3）高度行高、外边距以及内边距都可以控制。

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

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

vertical-align 不影响块级元素中的内容对齐它只针对于 行内元素或者行内块元素，特别是行内块元素 通常用来控制图片/表单与文字的对齐。

图片或者表单等行内块元素他的底线会和父级盒子的基线对齐。这样会造成一个问题就是图片底侧会有一个空白缝隙,怎么解决?

2.上下浏览器宽度,中间内容宽度

效果：（缺点：先写两侧栏，再写主面板更换后则侧栏會被挤到下一列，渲染时先渲染了侧边栏而不是比较重要的主面板.。）

DOM顺序可以随意调整！
缺点在于：如果中间栏含有最小宽度限制戓是含有宽度的内部元素，当浏览器宽度小到一定程度会发生层重叠的情况。

3.margin负值法（圣杯布局）

DOM元素的书写顺序不得更改
主面板部汾优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候布局就会乱掉。

4.margin负值法（双飞翼法）

主媔板部分优先渲染（一般主面板会比侧栏内容重要）
圣杯采用的是padding，而双飞翼采用的margin解决了圣杯布局main的最小宽度不能小于左侧栏的缺點。
双飞翼布局不用设置相对布局以及对应的left和right值。