web网页搭建：HTML与CSS（六）

布局与定位

• 页面的布局

一.流

1.块元素从上往下流，个元素之间有一个换行。每个元素默认占浏览器整个宽度；内联元素在水平方向互相挨着，总体上从左上方流向右下方。
2.并排放置内联元素：左元素外边距10px，右元素外边距10px，两个元素之间会有20px的空间；上下放置两个块元素。他们共同的外边距会折叠在一起，两个边框的距离为最大的外边距高度。
3.浮动元素（float）：置于块元素上方，不影响正常的页面流动。但内联内容会考虑浮动元素的边界，围绕着这个浮动元素。（必须指定特定的高度）
4.元素clear属性指定其左边或右边不能有浮动元素。

二.布局

• 流体布局

拓展浏览器窗口，页面内容会拓展以适应页面。

• 冻结布局

内容宽度固定。调整屏幕大小，设计不变。示例如下：
HTML文件中：

    

      .........
    

CSS文件中：

#allcontent{
  width:800px;
  ...
}

• 凝胶布局

内容宽度固定，但外边距随浏览器窗口扩展，且通常把内容放在中央，更加美观。

• 表格显示布局

将元素置于表格当中。示例如下：
HTML文件：

...
        //表格div
  
           //第一行div，里面包含firstcol和secondcol两列两个元素
    
   //第一个元素
      ...
    
    
   //第二个元素
      ...
    
  
  ...

CSS文件中：

#tablecontainer{
  display:table;     //这是表格布局
  border-spacing: 10px; //单元格边框边距，不需要元素外边距
}
#tablerow{          
  display:table-row;        //这是表格的一行
}
#main{
  vertical-align: top;      //单元格中的内容相对于单元格上边对齐
  display: table-cell;      //这是一个单元表格里的元素
  ...
}
#secondcol{
  vertical-align: top;
  display: table-cell;
  ...
}

• 元素的定位

四种定位方式：static,absolute,fixed,relative

• 静态定位（static）

默认方式，将元素置于正常流中。

• 绝对定位（absolute）

置于页面任何位置，相对页面边界放置。并不置于流中

#unix{
  position:absolute;
  top:150px;
  left:100px;
  width:400px;
}

• 固定定位（fixed）

相对浏览器窗口定位，页面滚动，固定定位的元素位置不变。

#unix{
  position:fixed;
  top:150px;
  left:100px;    (可以为负值)
  width:400px;
}

• 相对定位（relative）