position:absolute、static、relative、fixed;
flot:left、right;
相对定位:相对定位则不会把元素从文档流中移除，而是基于其原来的位置进行一定的便宜。页面中其他的元素不会占据其编译后留下的空白空间，就像该元素仍在原位一样。
绝对定位:不仅可以将某元素置于页面中的任何位置之上，还能够将其从文档流中移除。绝对定位元素不会影响到文档中的其他元素。
浮动
布局
固定布局:固定宽度。
流式布局:宽度百分比指定。
居中布局
1.使用自动外边距实现剧中
.demo{ margin-left:auto; margin-right:auto; width:200px; }
2.使用text-align实现居中
body{ text-align:center; } p,div{ text-align:left; }
body的子孙也剧中显示，我们就需要写条规则，让其中的文本回到默认的剧中对齐。
3.组合使用自动外边距和文本对齐
body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; width:200px; text-align:left; }
4.负外边距解决方案
#container{ position:absolute; left:50%; width:800px; margin-left:-400px; }
布局的灵感和法则
1.用户界面设计
了解将浏览页面的界面。
在页面和站点中给用户足够的导向。
使用人们熟知的象征符号。
保证与功能相关的特性在页面中足够显眼。
保证设计元素的一致性。 网站中的各个页面间的导航链接应该保持一致，LOGO图片和标题的位置也要始终如一。
了解页面中的关键元素。 在一幅作品中，总会有一些能够吸引用户最多关注的特殊符号。
清楚地表达页面的内容。 人类的注意力持续时间较短，通常来讲最多9秒。让用户一眼就可以掌握到页面的主旨。
2.可用性
重要的信息应该放在显眼的位置。 将用户最需要的信息尽可能地放在页面的顶部
永远在title元素中给出页面的简单介绍:<title>万花:黑长直</title> 起到向导作用
尽可能地保证页面中的导航链接有着一致的表现。
对于中型或大型站点来说，强烈建议提供搜索功能。
用缩进和偏移将栏中内容分开。
在垂直的世界中使用水平布局
1.固定定位
div.static_image{ backgrouud-image:url(face.jpg); background-repeat:no-repeat; background-position:left bottom; position:fixed; left:0; bottom:0; height:500px; width:200px; z-index:2; }
2.浏览器缺陷
IE
div.static_image{ backgrouud-image:url(face.jpg); background-repeat:no-repeat; background-position:left bottom; position:absolute; left:0; bottom:0; height:500px; width:200px; }
元素的位置以及其带来的含义
左上:一般放LOGO 浏览者的目光一般都会首先移动到这里。
右上:略逊于左上，但仍高于其他元素。
底部:不是很重要，放置非必要的东西。如版权
处理布局中常见的内容溢出问题
最常见的两种内容溢出:绝对定位元素中内容过多，浮动元素尺寸超过其可容纳区域。
浮动导致的内容溢出
1.用标签清除浮动
<style> .clsear{ clear:botn; } </style> <div class="clear"></clear>
2.精确控制浮动元素
增大区域宽度
限制内容宽度并注意斜体 IE中的斜体可能导致水平溢出
限制内容溢出 overflow:hidden;
结对定位导致的内容溢出
垂直溢出
用浮动代替绝对布局
在设计中尝试避免该问题
限制溢出
使用脚本
用em而不是px作为长度单位 top left