CSS布局技巧：三行布局，上下固定，中间自适应高度

"该资源提供了一种实现上中下三行布局的方法，其中上下两行高度固定，中间行根据浏览器高度自适应，并且内容能够垂直居中显示。这个布局方案在Firefox 2.0、Internet Explorer 6和7、Opera 8.5以及Safari等浏览器上已经过测试，具有良好的兼容性。对于非IE内核的浏览器，它利用CSS的`display`属性，将最外层元素设为`display:table`，子元素设为`display:table-row`，模拟表格布局，使得中间栏自适应高度。而对IE浏览器，由于不支持`display:table`，则采用定位方式实现类似效果。" 在这个CSS布局实例中，关键知识点包括： 1. **CSS Display 属性**：`display:table`、`display:table-row` 和 `display:table-cell` 用于模拟表格布局。这种方式允许我们将元素按照表格的形式排列，即使它们在HTML中并非真正的表格元素。 2. **高度自适应**：中间栏(`#main`)的高度会根据浏览器窗口大小自动调整，确保内容始终能在垂直方向上居中。这得益于`display:table`的特性，当上下两行(`#header` 和 `#footer`)高度固定时，中间栏可以自动填充剩余空间。 3. **垂直居中对齐**：通过将中间栏的子元素(`#wrap`)设置为`display:table-cell`，并应用`vertical-align:middle`，内容可以在垂直方向上居中显示。 4. **浏览器兼容性处理**：由于IE6和7不支持`display:table`等CSS新特性，所以使用条件注释(`<!–[if IE]>`)为这些旧版本的IE浏览器提供不同的CSS样式，通常会用到绝对或相对定位来实现类似的效果。 5. **基础布局样式**：所有元素的`margin`和`padding`设置为0，以消除默认边距和填充；`body`的`text-align`设置为`center`，使得内容在页面中水平居中；`#box`设置`width`和`margin`，使其在页面中水平居中显示。 这个布局实例对于创建响应式网页设计，特别是需要保持内容垂直居中的情况非常有用，而且通过CSS的条件注释处理，可以确保在多种浏览器上都能正常显示。