- 流体布局（liquid layout） ：扩展浏览器窗口时，页面中的内容会扩展以适应页面,这是默认布局模式
- 冻结布局（frozen layout） ：内容的宽度是固定的，不会随着浏览器的窗口扩展或收缩。这个宽度是自己用width定义的。这种模式的好处是可以对设计提供更多的控制，代价是不能有效的使用浏览器的宽度
凝胶布局(jello layout) :内容的宽度是固定的，但是外边距会随着浏览器窗口扩展或收缩(设置为auto)通常会把内容放在中央，会美观一些，其他与冻结布局类似
层模式布局 ：利用position属性的四个值定位 static，absolute，fixed，relative；
- static： 默认方式，元素放在页面的正常流中
- absolute：一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。
- 可以将元素放在页面的任何位置，默认是相对于页面边界来放置，若是嵌套在另一个定位元素内，则是相对于这个外包含元素定位。（绝对元素的宽度不是必须要设定的） 。
- 会使内联元素支持宽高，块元素内容撑开宽度.
- fixed：相对于视窗定位，页面滚动时不会移动 ，其他内容在这些固定元素下面正常滚动。
- 会使内联元素支持宽高，块元素内容撑开宽度。IE6不支持
- relative: 元素首先正常流入页面，然后按指定的量偏移，是相对于正常流中该元素位置定位 ，而且偏移前的位置保留不动 。不会影响元素本身的特性，如果没有定位偏移量，对元素没有任何影响。
- 无论是相对、绝对还是固定定位，当偏移量超出上面、左边浏览器窗体（或者说超出可视区域）的时候，超出的内容都会被隐藏；而超出下面和右边的时候，相对定位和固定定位会隐藏超出的部分内容，而绝对定位会出现滚动 条。
- 可以使用z-index属性分层放置，z-index越大，说明层次越高，当然它是可以设置负值的。 默认层次，后者高于前者.Z-index 仅能在定位元素上奏效
- 相对定位与绝对定位的结合使用：Relative与Absolute组合使用,可以实现一个元素相对于其他元素进行定位，而不是相对于浏览器
需要定位的元素的父级元素设置为相对定位，自己本身设置为绝对定位即可
- 浮动布局 ：浮动元素会从正常流中取出，浮动到左边或者右边，与绝对定位不同的内联元素会考虑浮动元素的边界，围绕着这个浮动元素 。浮动无法创建两个等高的列。
- 表格布局 ：CSS display:table 使用一种类似表格的布局来表现结构中的内容，为页面增加的结构完全是为了支持这种布局，并没有为页面增加任何有含义的内容。经常用来实现多栏均匀布局。利用这种布局很容易实现完美对齐且等高的列，而且可以随着浏览器扩展和收缩。与HTML表格不同，HTML表格的、是建立数据的结构. （在IE8以前不支持）