CSS布局简介

CSS 的作用一分为二，除了能很好地装饰网页中的文本、导航栏、图像和其他元素之外，在整个网页布局方面的功能也特别出色。
正常情况下，浏览器从上到下显示 HTML，把块级元素摞在一起，而使用 CSS 可以创建并排显示的分栏，还能把图像或文本定位在页面中的任意位置(甚至可以叠放到其他元素上面)

网页布局的类型

Web 设计师往往会面对很多未知问题，例如: 访客使用的是哪种浏览器？访客是在安卓手机或 iPad 上浏览网站吗？
设计师面对的最大问题是，如何为不同屏幕尺寸设计好看的网页。
显示器的尺寸和分辨率各异，有的笔记本屏幕是 15 英寸大，分辨率为 640 * 480 像素，有的设备屏幕超级大，有 30 英寸，分辨率为 5000000 * 4300000 像素。
更别提小屏幕的手机和中小屏幕的平板电脑了。

为了解决这个问题，人们提出了多种基本的网页布局方式。你见到的几乎所有网页都属于这两个类型中的一个--固定宽度布局或流式布局。
使用固定宽度布局能最大限度地控制外观，不过对访客会造成不便，因为他们使用的设备屏幕分辨率可能与你设计时使用的不一样。
如果屏幕特别小，访客要向右滚动才能看到全部内容；如果屏幕很大，又浪费了空间，多出的空间本可以显示更多精彩内容。

此外，智能手机用户要缩放才能看到想看的内容。流式布局能根据浏览器窗口的大小伸展或收缩，不过对设计的控制更具挑战，可是能最有效地利用浏览器窗口里的空间。
为了解决大量尺寸不一的屏幕问题，出现了一种更强大的网页设计方法 -- 响应式 Web 设计，不过这种方法增加了复杂度。

固定宽度布局: 一些设计师喜欢使用固定宽度布局，因为效果一致。不管浏览器窗口有多宽，页面中内容的宽度始终一致。有时，这种布局紧靠浏览器窗口左边，不过更常见的是居中显示。使用固定宽度布局无需担心页面在特别宽(或特别窄)的显示器中有什么问题。
多数固定宽度布局的宽度小于 1000 像素，留出空间显示滚动条和浏览器窗口的其他部分，以便能在1024 * 768 像素的显示器中显示。最常使用的宽度是 960 像素。
以前，大多数网站都是固定的，不过最近几年出现了显著变化，因为智能手机和平板电脑得到了普及，而这两种设备通常比一般的固定宽度网页窄许多。因此，固定宽度布局式微了
流式布局: 有时随波逐流比负隅顽抗容易。流式布局能自动调整，匹配浏览器的宽度(不管多宽)，因为宽度是使用百分比设定的，而不是绝对的像素值。这样，访客改变浏览器窗口的尺寸时，页面会随之变宽或变窄。虽然这种设计最好地利用了浏览器窗口中的可用空间，不过却带来了额外的挑战 -- 确保设计在不同尺寸的窗口中都好看。这种设计在特别大的显示器中超乎寻常的宽，导致文本行太长，难以阅读
响应式 Web 设计(Responsive Web Design，简称 RWD)。Web 设计师 Ethan Marcotte 拥护的响应式 Web 设计也能解决屏幕尺寸差别巨大的智能手机、平板电脑和桌面显示器所面对的问题。为了支持不同宽度的浏览器，响应式 Web 设计不为所有设备提供一样的布局，而是提供不同的布局。例如，响应式网页在桌面浏览器中显示为宽的多栏布局，而在智能手机中会缩窄，变成一栏布局。
从这方面来看，响应式 Web 设计与流式布局很像，都使用百分比设定宽度，以此根据浏览器窗口的宽度伸展或收缩。不过，响应式 Web 设计更进一步，使用一些 CSS 技巧(媒体查询)为不同宽度的浏览器提供不同的设计，因此我们能为浏览页面所用的不同设备设计设计不同的布局

注意: max-width 和 min-width 属性在固定宽度布局和流式布局之间提供了一种折中方案

如何使用 CSS 布局

布局策略

使用 CSS 布局网页更像是一种艺术，而不是一门学科。如何使用 HTML 标识内容，以及如何编写 CSS，这都没有一应万全的公式可遵循，对一个设计有用的方式，可能对另一个设计没用。

然而，使用 CSS 布局时当然有些策略可以采用。这些策略只是指导方针，而不是必须遵守的规则。不过，拿到项目的原始视觉设计稿时，脑中要先浮现这些技巧。

从内容入手

很多设计师喜欢直奔主题，去设置颜色、字体、图标和图像。可是，从视觉设计上手是本末倒置的做法。
网页中最重要的元素是内容，标题、文字段落、好看的照片、导航连接、视频等，这些才是人们访问网站的目的。他们想阅读，学习和体验网站提供的内容。
内容至上，因此调整内容的外观之前，要想好呈现什么内容。如果侧边栏中没什么有意义的内容，即便创建特别好看的 3D 效果也无济于事

此外，网页的设计应该由内容要传达的信息决定。如果决定在首页推销公司的服务，突出显示提供的优质客户服务，或许应该放一张大图，展现公司员工的友好，再引述客户对服务的满意评价。
由于这些元素对网页要传达的信息至关重要，因此可以在视觉上下功夫，突出显示图片和引语，让二者富有感染力。

移动设备优先

同样地，随着智能手机和平板电脑的普及，设计师开始苦苦思索，想办法把内容中的糟粕去掉，只留下精华。
智能手机的屏幕尺寸有限，忙碌的人们精力也有限，因此出现了“移动设备有限运动”。
移动设备优先的设计方式涉及到从内容入手，也涉及去掉无关的噪音，例如那些适合在桌面屏幕上显示，却不便在较小屏幕上显示的补充信息，以及分散访客注意力，有碍关键信息传达的内容。

记住，如果网站的访客中有一大部分是智能手机或小型平板电脑用户，那么不是所有人都想滚动一个长长的页面去获取信息(也不想缩放，去查看页面中的素有内容)。
不要试图填满 32 英寸桌面显示器的每一平方英寸，要思考如何简化内容，把信息清楚直接地表达出来，让人易于理解

先画草图

确定要在网页中显示什么内容之后，接下来要考虑如何组织内容，以合理的方式显示出来。
此时，有些设计师喜欢动手编写 HTML: 创建<div>标签，添加<header>、<article>、<footer>标签等。
这是一种好方法，通常称为“在浏览器中涉及”，因为一开始就直指网站的核心 -- HTML 代码。

不过，编写 HTML 代码之前，至少应该画张草图，规划内容的摆放位置。这不需要什么高级的工具，纸和笔就行。
因为 Web 设计就是把内容放在一个个盒子中(<div>标签或其他 HTML 标签)，然后把盒子放在页面中，所以，在草图中画一些方框和分栏等等有助于尝试不同的页面布局。
通过这种方式可以尽快确定应该把内容放在哪儿，应该占据多少空间，以及基本色调(亮色或暗色)

如果熟悉 Photoshop、IIIustrator 或 Fireworks 等图形程序，可以使用程序设计网页的外观。
如果不是图形程序高手，即便只画几个方框，标明页面中不同元素的未知，对改进页面的布局也有帮助。
如果想把两栏设计改成四栏，在 IIIustrator 中改变方框的尺寸要比重写 HTML 和 CSS 容易得多。

可是，使用图形程序时，不要花太多时间调整图形的设计。如果想在 Photoshop 或 IIIustrator 中实现诸多 CSS 属性效果，需要做大量工作；
而且，就是实现了，后面还要使用 CSS 代码再实现一遍。也就是说，我们只需在纸上或图形程序中画个粗略的外观，然后在文本编辑器中编写符合内容摆放位置的 HTML 代码

找出各个盒子

画好构思图后，该思考如何编写实现设计所需的 HTML 标记代码的 CSS 样式了。在这个过程中要构思页面中不同的结构单元，找出可以组成独立盒子的元素。

通常，我们可以通过构思图中视觉上的线索判断是否需要使用<div>标签。
例如，一个带边框线的标题和几个文字段落表面要把这些内容放在<div>标签里，而且要添加边框。

此外，如果是并排显示几块文本，应该把每块内容放在各自的<div>标签里。不过，HTML 标签往往不会并排显示，所以需要使用一些布局技术才能实现并排效果。

顺应原本的内容流

通常情况下，标签不会并排显示，也不会叠加在一起，而是像文字处理程序中的文本一样，填满页面的整个宽度，从上到下排列。
块级标签，例如标题、段落和无序列表等，相互纵向叠放。因为这是 HTML 标签的正常显示方式，所以，如果像纵向叠放多个<div>标签，无需做任何定位

记住还有背景图可用

删繁就简

分层显示元素

别忘了内外边距

多栏布局

使用 float 属性或 position 属性的缺点

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<style>
  div {
    width: 20em;
    float: left;
  }
  div#div1 {
    margin-right: 2em;
  }
  div#div3 {
    width: 100%;
    background-color: yellow;
    height: 200px;
  }
</style>
<div id="div1">
  示例文字1。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。
</div>
<div id="div2">
  示例文字2。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。
</div>
<div id="div3">
  页面中的其他内容
</div>

第一个 div 元素与第二个 div 元素是各自独立，因此如果在第一个 div 元素中加入一些内容，将会使得两个元素的底部不能对齐，导致页面多出一块空白区域。

使用多栏布局方式

在 CSS 3 中加入了多栏布局方式。使用多栏布局可以将一个元素的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<style>
  div#div1 {
    width: 40em;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
  }
  div#div3 {
    width: 100%;
    background-color: yellow;
    height: 200px;
  }
</style>
<div id="div1">
hhhhhhhhhh
<br><br><br>
  示例文字1。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。
</div>
<div id="div2">
  示例文字2。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。想对来说比较长的文字。示例文字。
</div>
<div id="div3">
  页面中的其他内容
</div>

在 CSS 3 中，通过column-count属性来使用多栏布局方式，该属性的含义是将一个元素中的内容分为多栏进行显示。在 Firefox 浏览器中，需要写成-moz-column-count；在 Safari、CHrome 或 Opera 浏览器中，需要写成 -webkit-column-count的形式，在 IE 浏览器中，不需要添加浏览器供应商前缀

使用多栏布局的时候，需要将元素的宽度设置成多个栏目的总宽度，与使用 float 属性和 position 属性时的区别是：使用后两个属性时只需单独设定每个元素的宽度即可，而使用多栏布局时需要设定元素中多个栏目相加后的总宽度

我们也可以使用 column-width属性单独设置每一栏的宽度而不设定元素的宽度。在 Firefor 浏览器中，需要写成 -moz-column-width 的形式；在 Safari、Chrome或 Opera 浏览器中，需要书写成 -webkit-column-width的形式，在 IE 浏览器中，不需要添加浏览器供应商前缀

另外，如果此处使用 column-width属性指定每栏宽度而不设定元素的宽度，则需要在元素外面单独设定一个容器元素，然后指定该容器元素的宽度

盒布局

使用 float 属性或 position 属性时的缺点

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<style>
  #left-sidebar {
    float: left;
    width: 200px;
    padding 20px;
    background-color: orange;
  }
  #contents {
    float: left;
    width: 300px;
    padding: 20px;
    background: yellow;
  }
  #right-sidebar {
    float: left;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
  }
  #left-sidebar, #contents, #right-sidebar {
    box-sizing: border-box;
  }
</style>
<div id="container">
  <div id="left-sidebar">
    <h2>左侧边栏</h2>
    <ul>
      <li><a href="">超链接</a></li>
      <li><a href="">超链接</a></li>
      <li><a href="">超链接</a></li>
      <li><a href="">超链接</a></li>
      <li><a href="">超链接</a></li>
    </ul>
  </div>
  <div id="contents">
    <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例
    文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
    示例文字示例文字示例文字示例文字示例文字示例文字
    示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
    示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示
    例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例
    文字示例文字示例文字示例文字示例文字</p>
  </div>
  <div id="right-sidebar">
    <h2>右侧边栏</h2>
    <ul>
      <li><a href="">超链接</a></li>
      <li><a href="">超链接</a></li>
      <li><a href="">超链接</a></li>
    </ul>
  </div>
</div>

使用 float 属性或 position 属性时，左右两栏或多栏中 div 元素的底部并没有对齐