正文布局

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

正文布局

原文：http://www.cnblogs.com/lxtiscool/p/3527018.html