自然文档流：natural document flow；Position:static;
块元素分行显示（即使两个元素在同一行内能够显示下来；）
行内元素按行显示，直到一行满了，从第二行开始；
布局的四个基本概念：
1 定位postion：static,relative,absolute,fixed;
2 浮动float:left,right;
3 外边距margin:如三栏布局，
container:width:100%;
container .main:margin:0,300,0,200;
left:float200px;
right:float300px;
4 单位unit：px,percent,em;
定位一般都要考虑浏览器的默认字体设置（16px);显示器设置的分辨率：1024*768px;
流式布局：是相对于长度单位使用px的定宽布局而言的，使用百分数，同时考虑最大宽度和最小宽度：mini-width,max-width;或者整体考虑只跨85%；
弹性布局：以em为单位设置宽度，width:92em,font size:62.5%(16*62.5%=10px;);其它部分的而已块可考虑使用百分数；
绝对定位：定位的参照元素是包含定位属性（或相对定位或绝对定位）的最近父元素，直溯到<body>元素；
绝对定位的元素可叠，也就是层的概念；
与绝对定位相领的元素会忽略绝对定位元素的存在；所以会有重叠的现象；
绝对定位对象以它的最近的一个已经定位的祖先元素为基准进行偏移，直溯到body元素，开始设置x,y坐标。
相对定位：
使用静态定位过于放任自流，使用绝对定位过于绝对无情。而相对定位是一种折中的定位方法，被应用的元素不脱离文档流，但却能够通过坐标值以原始位置参照物进行偏移；
是指相对于它自身在自然文档流的默认状态下其本身所处的位置为参照，再根据相应的诸如top,left值进行偏移；
与相对定位相邻的元素会将相对定位元素作为普通元素进行排列，也就是说会有两个空间，一个空间是其自然文档流的位置，做为空白是其它相邻元素的参照系；另一个空间是其偏移后的自身，也有可能重叠；
进行相对定位后，虽然元素的表现区脱离了文本流，但在文本流内却为该元素保留了一块空间位置，这们位置不能随着文本流的移动而移动，如果希望元素放弃在文本流内为其留下的空间位置，就要用绝对定位。绝对定位不仅可以使其脱离文本流，而且在文本流内不会为其留下空间元素，移出去的部分也同相对定位元素一样成了自由体，绝对定位在父层position属性为默认值时，上、下、左、右的坐标原点以body的坐标原点为起始点；
如果要实现绝对定位的层可以承网页中一个固定的点移动，则这个层的父级必须是相对定位或绝对定位；
所有被定义了相对定位、绝对定位的元素都会被做为CSS定位参照物来确定其包含的绝对定位元素的坐标；
相对定位的参照物永远是它本身，也就是元素的位置。
Z-index属性：
层叠定位属性，可以调整各个层叠元素的显示顺序；
固定定位：
相对浏览器窗口，而AP元素是相对于有定位的最近父元素，固定定位的元素，访问者流动页面时，固定内容（如背景，导航区等）将保持在屏幕上的确切位置；
浮动定位
其它对像可以围绕它，在设置float属性时，必须同时设置width属性，它表示该浮动元素盒在窗口盒里所点的实际宽度，否则，它自动氢宽度设置为窗口盒宽度的100%。这样，两个元素盒之间没有空间，不能插入正常流文本；
不同布局属性的元素相邻时，显示的特点：
1 前浮后固：同行分别前后显示；（使用浮动元素的时候，会影响后面的固定元素，要使用clear清除属性。）；
2 前固后浮：分行显示；
absolute
a:定位元素；
b:包含块元素；
| top | A的顶边外壁到B的顶边外壁的距离； |
| right | A的右边外壁到B的右边外壁的距离； |
| bottom | A的底边外壁到B的底边外壁的距离； |
| left | A的左边外壁到B的左边外壁的距离； |
| relative | |
| a:定位元素； | |
| b:原始位置； | |
| top | A的顶边外壁到B的顶边外壁的距离； |
| right | A的右边外壁到B的右边外壁的距离； |
| bottom | A的底边外壁到B的底边外壁的距离； |
| left | A的左边外壁到B的左边外壁的距离； |
三列等高布局
通过三列底边距的负值来控制；
#left,#mid,#right(
padding-bottom:9999px;
magin-bottom:-9999px;
当padding-bottom设置很大时，会向下延伸很多；滚动条会很长；
如果有上述相同的等值，则会把多出的内边距给隐藏起来；
我们再定义包含框隐藏出多的内容#main{overflow:hidden;}，这样当某个栏止的内容很多时，很自动撑开包含框；而当包含框被撑开后，其它栏目的高度也被自动撑开了，当然不是它们的height,而是他们的背景色；
在gone with the wind网页中设置上述负值时，当设很大时；DM以布局显示时，会撑开很高；当设置很小一点时（55px），一些边框会达不到包含框撑开的高度，即只有其内容等高的高度+55px；
了解基于 CSS 的页面布局
许多 Web 站点都使用基于表格的布局显示其页面上的信息。表格对于显示表格数据（如重复元素的行和列）很有用，并且很容易在页面上创建。但表格往往还会生成大量难于阅读和维护的代码。此外，由于所需的标签数量很大，并且可能需要进行“嵌套”，因此表格可能会给使用屏幕读取器查看 Web 页的残障人士带来不便。
基于 CSS 的布局（即，使用块元素代替表格行和列的布局）所包含的代码数量要比具有相同特性的基于表格的布局中的代码数量少很多。基于 CSS 的布局通常使用 <div> 标签，而不是 <table> 标签来创建用于布局的 CSS 布局块。可以将这些 CSS 布局块放置在页面上的任意位置，并为它们指定属性，如边框、边距、背景颜色等。此外，由于代码更为简单和短小，因此使用屏幕读取器查看 Web 页的用户可以更容易地浏览使用 CSS 构建的页面。
使用 Dreamweaver 可以创建层。Dreamweaver 层是一个 HTML 页面元素，您可以将它放置在页面上的任意位置。更具体地说，它是一个包含绝对位置的 <div> 标签（或其它任何标签）。可以使用 Dreamweaver 将层拖动到页面上，然后将其放置在所需的位置。层充当保存资源（如图像、Flash 文件、文本等）的内容块。
Dreamweaver 层是绝对定位元素。也就是说，它们包含一个相对于页面的上边距和左边距设置的特定位置。不能使用层创建基于 CSS 的布局，然后将页面内容居中显示。因此，本教程中的布局与您在教程：创建基于表格的页面布局中创建的布局略有不同。
有关 Dreamweaver 层的更多信息，请参见《使用 Dreamweaver》中的使用 CSS 对页进行布局。
在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。
Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。
当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中HTML。
position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。
height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。
clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。
z-index DIV tag 的立体位置。值越大 DIV 的位置越高。
background-color DIV 背景的颜色。
layer-background-color Netscape 的 DIV 背景颜色。
background-image DIV 的背景图象。
layer-background-image Netscape 的 DIV 的背景图象。
{ ; left: 40px; top: 10px }
定位单元的控制 （width、height、visiblility）
除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。
DIV { ; left: 200px; top: 40px; height: 150px }
基于 CSS 的布局（即，使用块元素代替表格行和列的布局）所包含的代码数量要比具有相同特性的基于表格的布局中的代码数量少很多。基于 CSS 的布局通常使用 <div> 标签，而不是 <table> 标签来创建用于布局的 CSS 布局块。可以将这些 CSS 布局块放置在页面上的任意位置，并为它们指定属性，如边框、边距、背景颜色等。此外，由于代码更为简单和短小，因此使用屏幕读取器查看 Web 页的用户可以更容易地浏览使用 CSS 构建的页面。
使用 Dreamweaver 可以创建层。Dreamweaver 层是一个 HTML 页面元素，您可以将它放置在页面上的任意位置。更具体地说，它是一个包含绝对位置的 <div> 标签（或其它任何标签）。可以使用 Dreamweaver 将层拖动到页面上，然后将其放置在所需的位置。层充当保存资源（如图像、Flash 文件、文本等）的内容块。
Dreamweaver 层是绝对定位元素。也就是说，它们包含一个相对于页面的上边距和左边距设置的特定位置。不能使用层创建基于 CSS 的布局，然后将页面内容居中显示。
float,clear,clip,overflow,display,visibility
float:left 并排从左边开始向右延伸显示；
display:block 元素将自动形成一个方块作为自己的点位符；
id and class properties:
<p id="content"></p> # content{…}(id只能使用一次）；
<span class="blue"></sapn> class名称可以做页面中多次使用；
CSS style and HTML style；
CSS:<标记 style="属性1：属性值1；属性2：属性值2；[…]"></标记>
HTML：<标记属性1="属性值1" 属性2="属性值2" […]></标记>
属性名和值都有所区别，二者的连接、间隔也不一样；
属性名称要小写；
属性值要使用双引号；