布局与定位

布局

1. 流体布局，扩展窗口时，页面中的内容随之扩展；
2. 冻结布局，页面内容固定，不随页面的扩展而扩展；
   用一个<div>包含页面所有内容，然后给该<div>一个固定的宽度，如：
   #allcontent { width: 800px; ...... }
3. 凝胶布局，页面内容宽度固定，但外边距岁窗口的扩展而扩展；
   用一个<div>包含页面所有内容，然后给该<div>一个固定的宽度，指定左右外边距为auto。如：
   #allcontent { width: 800px; margin-left: auto; margin-right: auto; .... }
4. 浮动布局
   a. 将浮动元素放在块元素上;
   b. 给浮动元素设置一个特定的宽度，不能为auto。
   c. 在CSS中添加 float:left/right;样式；
   d. clear属性指定一个块元素左边或右边或两边不能有浮动元素。
5. CSS表格显示布局
   a. 划分好表格格局
   b. 给表格和行分别添加<div>元素,并分别添加id
   c. 在行的区域内，添加内容作为单元格
   d. 指定表格
   display:table;
   指定行
   display:table-row;
   指定单元格
   display:table-cell；

定位

1. 静态定位
   静态定位是默认方式。
2. 绝对定位（absolute）
   相对于页面边界来定位。用一个<div>包含指定内容，然后指定它的宽度和位置，如：
   #allcontent { position: absolute; top : 150px; left: 100px; width: 800px; ...... }
   注意 z-index属性。用于指定定位元素的上下层次关系。
3. 固定定位（fixed）
   相对于浏览器窗口定位，把元素放在一个特定的固定位置上，不再移动，即时滚动页面。
   如：
   xxx { position: fixed; top : 150px; left: 100px; ...... }
4. 相对定位（relative）
   相对定位是相对于其外围包含元素来定位
   xxx { position: relative; top : 50px; left: 10px; ...... }
   使用绝对，固定和相对定位时，属性top,right,bottom,left可以用来指定元素的位置。*