CSS如何设置高度为屏幕高度_掌握 CSS 精髓：布局

CSS 虽然初衷是用来美化 HTML 文档的，但实际上随着 float、position 等属性的出现，它已经可以起到调整文档渲染结构的作用了，而随着弹性盒子以及网格布局的推出，CSS 将承担越来越重要的布局功能。渐渐地我们发现 HTML 标签决定了页面的逻辑结构，而 CSS 决定了页面的视觉结构。

这一课时我们先来分析常见的布局效果有哪些，然后再通过代码来实现这些效果，从而帮助你彻底掌握 CSS 布局。

我们通常提到的布局，有两个共同点：

大多数用于 PC 端，因为 PC 端屏幕像素宽度够大，可布局的空间也大；

布局是有限空间内的元素排列方式，因为页面设计横向不滚动，纵向无限延伸，所以大多数时候讨论的布局都是对水平方向进行分割。

实际上我们在讨论布局的时候，会把网页上特定的区域进行分列操作。按照分列数目，可以大致分为 3 类，即单列布局、2 列布局、3 列布局。

单列布局

单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的(最大)宽度来保证不同像素宽度屏幕下显示一致。

示例网站

拉勾，蓝色区域为布局容器，水平居中对齐，宽度 1260px：

谷歌搜索，蓝色区域为布局容器，水平左对齐，宽度 652px：

一些网站会将单列布局与其他布局方式混合使用，比如拉勾网

首页的海报和左侧标签就使用了 2 列布局，这样既能向下兼容窄屏幕，又能按照主次关系显示页面内容。

这种布局的优势在于基本上可以适配超过布局容器宽度的各种显示屏幕，比如上面的示例网站布局容器宽度为 700px，也就是说超过 700px 宽度的显示屏幕上浏览网站看到的效果是一致的。

但它最大的缺点也是源于此，过度的冗余设计必然会带来浪费。例如，在上