22、流动设计与 CSS 盒模型解析

流动设计与 CSS 盒模型解析

1. 流动设计基础

互联网标准确保了每个人都能享受愉快的上网体验，使得网页内容可以通过多种媒介传递，并且在不同浏览器和操作系统上表现一致。流动设计作为一种重要的概念，能让内容适应不同的展示媒介，无论屏幕大小、分辨率或平台如何，布局都能相应调整。

1.1 流动设计的基本原则

为了创建流动设计，需要遵循以下基本原则：
- 除了组织数据的情况，不允许使用表格。
- 避免使用 <br /> 、 <b> 、 <i> 等不必要的标签（标签汤）。
- 样式表必须按媒体进行组织，网页文档应使用外部样式表，以减少文件大小和加载时间。

遵循这些规则可以创建出轻量级、下载速度快且易于移植到其他设备（如手机和 PDA）的设计。这种设计结构具有自描述性，易于维护，同时也提高了网站的可访问性，方便使用语音合成器的用户快速浏览页面。

1.2 <table> 与 <div> 的对比

在 CSS 出现之前，不使用表格很难实现美观的设计。但如今，使用表格存在诸多弊端：
| 对比项 | <table> | <div> |
| ---- | ---- | ---- |
| 设计初衷 | 并非 W3C 的原始意图 | 更符合现代设计理念 |
| 维护难度 | 维护成