[HeadFirst-HTMLCSS入门][第十一章布局排版]

• 流
• 浮动布局
• 冻结布局
• 凝胶布局
• 绝对布局
• 表格显示布局
• postion 绝对 静态 固定 相对

浮动元素

• 必须指明宽度

解决重合

中缝

• 设置外边距留中缝，好看一点

clear标签

• 不准左右有浮动元素，如果有，直接下移

  clear=right
  

标签放右边的缺点

• 不支持float的设备中，会先出现标签，而不是主内容

• 如果主内容放前面 使用left的话，标签又会扩展很难看

• 优点除了缩放会使得内容顺序有问题 就没其他问题了

流体与冻结设计

冻结：不随浏览器变化而变化，我看了百度等大网页，貌似都是这种设计

• 把所有div用一个div捆绑起来，并限制div的宽度。这样不随浏览器的变化而变化。

• 但是如果宽度设计太小，会使得右边有太多的空白，可以让左右外边距auto，稍微缓解

• 宽度或许可以获取到屏幕大小，这样似乎很不错。不过要用到js。

• 优点 再HTML之下 缺点 有留白

绝对定位

• positon 必须制定左或右，上或下

  position=absolute;
  top:100px;
  right：200px;
  width：280px
  

  元素

  • static 默认
  • absolute 绝对地，元素不会流入
  • Fixed 固定 相对于浏览器窗口，而不是相对于页面
  • Relative 正常流的偏移量

• Zindex

• 优点 标签在内容之下 缺点：无法用clear了。

固定定位 Fixed

使用CSS创建表格

div #tableContainer{
  display: table;   //table属性告诉div要像表格一样拜访
  border-spacing: 10px; //边框间距
}
div #tableRow{
  display: table-row;   //表格的第一行，也是唯一的一行
}

#main {
  display: table-cell;  //第一行第一列，因为再html考前
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;  //相对于单元格上对齐
}

#sidebar {
  display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  vertical-align: top;
}