css 3层布局

CSS 3层布局是一种常用的网页布局方式，适用于多种不同的网站设计。该布局方式由三个层组成，分别是：头部、内容区和底部。

.header {
    width: 100%;
    height: 100px;
    background: #ccc;
}
.content {
    width: 100%;
    height: calc(100% - 200px);
    background: #f8f8f8;
}
.footer {
    width: 100%;
    height: 100px;
    background: #ccc
}

如上代码所示，首先定义了头部，其高度为100px，宽度为100%。在内容区中，我们通过使用calc函数计算出内容区的高度，该高度为100%减去头部和底部的高度（200px），从而实现内容区的自适应高度。底部的定义与头部类似，也是高度为100px，宽度为100%。

在HTML中，我们可以这样表示：

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

这样，我们便可以构建一个简单的三层布局页面。当然，在实际应用中，我们可以根据自身需求对CSS进行相应的调整，例如添加内边距、边框等样式。

需要注意的一点是，由于使用了calc函数，该布局方式在一些旧版浏览器中可能不兼容。因此，在实际项目中，我们需要进行兼容性测试，并针对不同浏览器进行相应的处理。