Web前端-HeadFirst笔记-CH11-两栏实现方案&CSS表格

两栏实现方案：

1. 流体布局：float，边栏扩展，主内容固定（顺序正确）；边栏固定，主内容扩展（设计流畅，但主内容顺序位于边栏之下）。用#footer{clear：方位；}解决覆盖页脚问题，使用clear的块元素会下移直到旁边没有块元素。
2. 冻结布局 ：width：固定值；/*固定大小的div包含整个页面*/（无法创建两个长度相同的两个列，块底色长度不能延伸到页脚上方）内容宽度固定。
3. 凝胶布局 ：在冻结布局之上增加 #allcontent{margin-left:auto; margin-right:auto;}/*内容居中*/（不会扩展填充满整个页面）内容宽度固定，外边距会随浏览器窗口伸缩。
4. 绝对位置，position:absolute;/*将边栏设置为固定位置，固定宽度，主内容区设置margin*/（存在覆盖页脚问题。）
5. CSS表格显示：表格中只放置块元素，表格会自动扩展来适应单元格宽度和高度。并不是建立布局的最佳工具。需要建立多栏，且内容栏均匀时适用。

CSS表格使用语法

HTML：
<div id="tableContainer">
    <div id="tableRow">
      <div id="">块元素自动划分为列元素</div>
      <div id="">块元素自动划分为列元素</div>
    </div>
</div>

CSS:
div#tableContainer{display:table;border-space:10px;}/*border-space不会与相邻块元素的垂直外边距折叠*/
div#tableRow{display:table-row;}
#main{diapaly:table-cell;vertical-align:top;/*删除margin设置*/}
#sidebar{dispaly:table-cell;vertical-align;/*确保单元格的内容相对于单元格的上边对齐，其他垂直对齐方式有：middle，bottom*//*删除margin设置*/}

CSS布局工具箱的策略：

HTML为内容建立结构，CSS处理布局。

CSS表格与HTML表格：

同：都是在HTML中创建一种结构，能够映射到表格的行和列。
异：CSS表格：创建某种布局的方法。
     HTML表格：建立数据的结构。

tips：对于页眉的固定宽度的图像无法适应浏览器窗口缩放：

①分割图像得到多个图像
②html引用多个分割后的图象时，使用id指定，以便在CSS中选择
③为右侧#image设置float：right；