Microsoft Word - 第3章.doc

Transcription

1 Web 世 界 的 五 彩 缤 纷, 离 不 开 CSS 这 门 样 式 语 言 会 说 CSS 的 人, 如 同 画 家 一 般, 挥 笔 舞 墨 之 间, 小 鸡 变 凤 凰 会 CSS 3 的 人, 就 如 同 有 了 108 色 水 彩 组 合 套 装, 可 以 尽 情 嘲 笑 那 些 只 拥 有 12 色 的 软 包 装 水 彩 笔 的 小 朋 友, 并 给 自 己 的 凤 凰 点 上 金 光 闪 闪 的 羽 鳞 3.1 关 于 CSS 的 那 件 小 事 本 书 稍 前 的 章 节 已 经 无 数 次 地 强 调,HTML 标 签 被 设 计 用 来 定 义 文 档 内 容, 文 档 如 何 展 现 则 由 用 户 代 理 ( 浏 览 器 ) 来 完 成 这 都 是 为 了 响 应 Web 标 准 化 的 口 号 : 分 离 分 离! 文 档 样 式 与 行 为 的 不 断 分 离!CSS 语 言 本 身 的 设 计 目 标 也 不 外 乎 此 20 世 纪 90 年 代 初 HTML 刚 被 发 明 的 时 候, 样 式 表 (stylesheet) 就 以 各 种 各 样 的 形 式 出 现 了, 不 同 浏 览 器 提 供 了 他 们 各 自 的 样 式 语 言, 终 端 用 户 可 以 自 己 撰 写 这 些 样 式 语 言 来 改 变 浏 览 器 中 文 档 的 最 终 外 观 ( 什 么? 上 个 网 还 要 学 一 门 语 言?) 不 过 用 户 始 终 是 最 懒 惰 的, 编 写 HTML 文 档 的 作 者 ( 开 发 者 ) 逐 渐 承 担 起 了 文 档 显 示 的 重 任, 而 且, 文 档 作 者 也 应 该 对 自 己 文 档 的 展 现 负 责 当 年 的 两 大 浏 览 器 (IE&Netscape) 为 了 争 取 更 多 的 用 户 和 开 发 者 也 不 断 提 供 各 种 各 样 能 改 变 表 现 层 的 标 签 和 属 性 ( 比 如 font 标 签 和 bgcolor 属 性 等 ), 这 一 度 导 致 了 诸 多 混 乱, 创 建 内 容 清 晰 独 立 于 表 现 层 的 文 档 变 得 十 分 困 难 为 了 解 决 这 一 问 题, 伟 大 的 标 准 组 织 W3C 再 次 挺 身 而 出, 指 着 IE 和 Netscape 的 鼻 子 说, 你 们 俩 能 不 能 消 停 消 停? 看 我 弄 个 样 式 语 言 给 你 们! 于 是 CSS 诞 生 了 当 然 了,CSS 诞 生 绝 非 一 日 之 功 关 于 CSS 的 最 早 的 建 议, 是 1994 年 由 哈 肯 维 姆 莱 (Håkon Wium Lie, 此 君 来 自 挪 威 的 森 林, 现 任 Opera 的 CTO) 在 芝 加 哥 的 一 次 会 议 提 出, 当 时 他 还 在 与 李 爵 士 在 CERN( 欧 洲 核 子 研 究 组 织 ) 一 起 工 作 ( 瞧 瞧 这 帮 大 牛!), 与 此 同 时, 伯 特 波 斯 (Bert Bos) 正 在 设 计 一 个 叫 做 Argo 的 浏 览 器, 于 是 两 个 人 决 定 一 起 合 作 设 计 CSS, 并 作 为 W3C 组 织 CSS 相 关 项 目 的 技 术 负 责 人, 最 终 推 动 CSS 成 为 W3C 的 推 荐 标 准 通 常, 样 式 表 语 言 的 使 用 者 有 三 种 : 读 者 ( 也 就 是 用 户 ) 作 者 ( 开 发 者 ) 和 用 户 代 理 ( 浏 览 器 ), 如 何 很 好 的 照 顾 这 三 者 的 需 求 却 是 一 个 难 点 在 CSS 发 明 之 初, 有 一 些 样 式 表 语 言 已 经 存 在 或 者 有 人 建 议 了, 比 如 Netscape 曾 向 W3C 提 出 的 JSSS(JavaScript-Based Style Sheets) 标 准 : with(tags) { contextual(ul, LI).color = "red"; contextual(ul, UL, LI).color = "blue"; ids.z098y.letterspacing = "0.3em"

2 classes.foo.h1.color = "red" tags.em.color = "red"; /* red, really red!! */ tags.b.color = "blue"; // blue, really blue contextual(tags.div, tags.p).color = "green"; contextual(classes.reddish.all, tags.h1).color = "red"; contextual(ids.x78y, tags.code).background = "blue"; JSSS 采 用 了 JavaScript 的 语 法 来 撰 写 样 式, 对 于 很 多 用 户 而 言, 是 很 不 友 好 的 只 想 改 改 字 体, 却 要 学 习 JavaScript? 这 可 不 理 想 同 期 的 样 式 表 语 言 还 有 James Clark 的 DSSSL,Robert Raisch 的 Stylesheets for HTML 等, 它 们 无 一 例 外 地 被 历 史 的 洪 流 所 淘 汰 了 CSS(Cascading Style Sheets 的 缩 写, 即 层 叠 样 式 表 ) 是 第 一 个 提 出 层 叠 概 念 的 样 式 表 语 言 所 谓 层 叠, 就 是 一 个 文 件 的 样 式 可 以 从 其 他 样 式 表 中 继 承 下 来, 这 样 使 得 样 式 的 编 写 非 常 灵 活, 文 档 最 终 呈 现 可 以 混 合 作 者 读 者 以 及 用 户 代 理 各 自 的 喜 好 CSS 层 叠 的 特 性 强 大 的 功 能 再 加 上 其 简 单 易 学 的 语 法, 使 其 很 快 风 靡 于 样 式 表 最 广 大 的 使 用 者 设 计 师 们 1996 年 12 月,CSS 的 第 一 个 版 本 正 式 发 布,1998 年 第 二 版 发 布, 这 两 个 版 本 的 规 范 通 常 被 称 为 CSS 1 和 CSS 2 按 照 W3C 的 说 法,CSS 没 有 传 统 意 义 上 的 版 本 号, 而 是 通 过 级 别 (level) 来 定 义 的, 后 一 级 别 的 规 范 建 立 在 前 一 级 别 之 上 每 一 个 高 级 别 的 level 都 包 含 低 级 别 的 全 部 内 容, 这 样 使 得 解 析 高 级 别 CSS 代 码 的 解 析 器 也 能 完 美 兼 容 解 析 低 级 别 的 CSS 代 码 CSS level 1 对 应 着 CSS 1 规 范,CSS 1 已 经 被 工 作 组 视 为 废 弃 (obsolete) 标 准, 我 们 也 不 做 过 多 考 究 CSS level 2 最 初 对 应 着 CSS 2 规 范, 不 过 在 CSS 2 规 范 实 施 的 过 程 中, 发 现 的 问 题 都 被 写 进 了 勘 误 表 (Errata list), 而 各 种 问 题 又 层 出 不 穷, 使 得 勘 误 表 变 得 笨 重 不 堪,W3C 决 定 新 增 一 个 修 正 版 的 CSS 2, CSS Level 2 Revision 1, 也 就 是 最 广 为 人 知, 应 用 也 最 为 广 泛 的 CSS 2.1 规 范 因 此, 可 以 说 CSS 2.1 规 范 定 义 了 CSS Level 2 CSS 2.1 来 自 CSS 2, 并 替 换 了 CSS 2 CSS 2 中 的 一 些 内 容 仍 然 在 CSS 2.1 中 保 留, 一 些 内 容 则 被 修 改 或 者 移 除 了 这 些 移 除 的 部 分 也 许 会 在 未 来 CSS 3 规 范 中 实 现, 而 未 来 CSS Level 3 将 以 CSS 2.1 的 基 础 上 定 义 这 意 味 着 CSS 2.1 有 着 更 好 的 兼 容 性 关 于 CSS 的 核 心 概 念 惯 用 法 和 学 习 路 线 几 乎 都 是 围 绕 CSS 2.1 展 开 学 习 CSS 3, 也 离 不 开 CSS 2.1, 而 且 严 格 的 说,CSS 3 也 包 含 CSS 2.1 的 全 部 内 容 CSS Level 3 依 然 是 在 CSS Level 2(CSS 2.1 规 范 ) 基 础 上 定 义 的, 但 CSS 3 在 定 义 方 式 上 做 了 很 大 的 改 变, 采 用 了 模 块 化 的 方 式 (module by module) 以 前 的 规 范 是 一 个 规 范 涵 盖 全 部 内 容, 而 现 在 的 规 范 是 在 之 前 规 范 的 基 础 之 上 通 过 模 块 化 来 定 义, 每 一 个 模 块 都 为 CSS 2.1 添 加 或 者 替 换 某 些 功 能 这 样 子 意 味 着 CSS 的 不 同 功 能 完 全 分 离 了, 你 可 以 在 任 何 时 候 学 习 它 们 的 任 意 一 个 部 分 (CSS 的 基 础 依 然 是 必 须 的 ), 浏 览 器 也 可 以 选 择 在 合 适 的 时 候 实 现 它 们 中 的 某 些 部 分 当 然, 本 章 的 内 容 将 着 重 讲 解 现 代 浏 览 器 已 经 实 现 的 部 分 3.2 CSS 的 核 心 概 念 正 所 谓 万 丈 高 楼 平 地 起, 在 学 习 CSS 3 的 新 特 性 之 前, 有 些 CSS 的 核 心 概 念 是 非 常 值 得 我 们 去 深 入 挖 掘 的, 它 们 对 我 们 实 际 使 用 和 继 续 学 习 CSS 这 门 设 计 语 言 都 非 常 有 帮 助 本 节 内 容 不 会 涉 及 CSS 的 最 基 础 内 容 诸 如 选 择 器 的 使 用 和 样 式 属 性 的 含 义 等 而 89

3 第 1 篇 HTML 5 移 动 Web 开 发 基 础 会 讨 论 更 多 不 容 易 理 解 或 者 容 易 导 致 误 解 的 内 容, 如 浮 动 和 格 式 化 上 下 文 等 也 许 过 去 你 经 常 使 用 它 们, 但 你 的 理 解 可 能 还 有 偏 差 或 者 模 糊 不 清 的 地 方, 这 些 内 容 在 CSS 知 识 体 系 里 面 处 于 核 心 地 位 本 节 内 容 将 为 你 探 一 探 它 们 的 究 竟 语 法 层 叠 和 特 殊 性 (specificity) CSS 简 单 的 语 法 使 得 CSS 拥 有 着 极 其 广 泛 的 受 众 CSS 的 核 心 语 法 用 图 3.1 即 可 阐 述 殆 尽 : 图 3.1 CSS 语 法 CSS 语 法 简 单 灵 活, 选 择 器 (selector) 直 接 与 HTML 代 码 对 应, 声 明 (declaration) 非 常 人 性 化, 绝 大 部 分 属 性 (property) 名 都 是 有 含 义 的 英 文 单 词 或 词 组, 属 性 值 (value) 大 部 分 也 是 直 接 用 有 意 义 的 单 词 表 示 例 如, 颜 色 值 可 以 取 yellow red 和 orange, 预 设 的 border 样 式 有 solid 和 dashed 等 CSS 语 法 有 很 高 容 错 性 一 条 错 误 的 语 句 并 不 会 影 响 之 后 语 句 的 解 析 : h1{ color: blue /* 这 里 没 有 分 号, 导 致 语 法 错 误 */ font-size: 20px /* 这 条 声 明 不 会 被 应 用 */ h2 { _height: 200px; /* 对 于 不 识 别 的 属 性 名, 将 会 自 动 忽 略 这 也 是 IE6 7 8 hack 的 基 本 原 理 */ color: yellow; /* 前 面 的 语 法 错 不 会 影 响 这 条 声 明 */ 注 意 : 虽 然 CSS 的 容 错 性 很 高, 但 是 在 编 写 时 也 别 忘 了 使 用 工 具 (CSS Lint 等 ) 检 查 CSS 是 否 语 法 正 确 由 于 CSS 继 承 的 特 性, 编 写 样 式 将 会 异 常 省 时 省 力 : #div1 { color: #FF0; #div1 p { font-size: 20px; /* div1 中 的 p 元 素 的 内 容 会 变 为 黄 色 (#FF0), 因 为 color 90

4 这 个 属 性 是 可 以 继 承 的, 无 须 再 单 独 设 置 color 一 次 */ 除 了 单 个 样 式 表 中 样 式 继 承 的 特 性, 不 同 来 源 样 式 表 之 间 也 会 表 现 出 层 叠 的 特 性 样 式 表 的 来 源 有 三 种 : 作 者 用 户 和 用 户 代 理, 他 们 分 别 ( 通 常 情 况 下 ) 对 应 着 开 发 者 或 设 计 师, 最 终 用 户 和 浏 览 器 由 于 CSS 层 叠 的 特 性, 这 三 种 来 源 的 样 式 表 都 会 起 作 用, 以 期 在 最 大 程 度 上 满 足 所 有 人 的 显 示 需 求 然 而 这 三 者 之 间 层 叠 的 优 先 级 ( 权 重 ) 各 有 不 同, 默 认 情 况 下, 他 们 之 间 优 先 级 的 大 致 顺 序 是 : 作 者 -> 用 户 -> 用 户 代 理 只 有 一 个 例 外, 即 指 定 了!important 的 样 式 规 则 除 外, 它 们 将 被 提 升 到 最 高 优 先 级 提 示 1: 在 IE FifreFox 和 Safari 等 浏 览 器 上 都 可 以 设 置 用 户 CSS 文 件, 但 在 Chrome 上 无 法 设 置 用 户 样 式 表, 只 能 通 过 chrome 扩 展 的 方 式 来 添 加 自 定 义 样 式, 不 过 这 也 无 可 厚 非 教 爸 爸 妈 妈 上 网 已 经 够 累 了, 难 道 还 要 教 他 们 写 CSS 么? 提 示 2: 对 于 FireFox, 你 可 以 通 过 访 问 resource://gre-resources/ 来 查 看 浏 览 器 的 默 认 资 源, 其 中 包 含 了 默 认 的 CSS 样 式,webkit 系 列 的 浏 览 器 没 有 提 供 访 问 浏 览 器 默 认 样 式 的 接 口, 不 过 由 于 webkit 本 身 是 开 源 项 目, 你 可 以 通 过 查 看 webkit 中 相 关 源 码 的 方 式 来 获 知 文 件 中 包 含 了 大 部 分 原 生 的 默 认 样 式 定 义, 如 hr 元 素 :? hr { display: block; -webkit-margin-before: 0.5em; -webkit-margin-after: 0.5em; -webkit-margin-start: auto; -webkit-margin-end: auto; border-style: inset; border-width: 1px 最 后 被 显 示 为 块 级 元 素, 前 后 各 有 0.5em 的 margin, 并 且 采 用 了 嵌 入 (inset) 的 边 框 样 式, 如 图 3.2 所 示 图 3.2 webkit 下 默 认 的 hr 样 式 ( 放 大 后 ) 除 了 样 式 表 来 源 和 属 性 的 层 叠 性, 选 择 器 的 特 殊 性 (specificity) 值 也 发 挥 着 重 要 的 作 用, 广 为 人 知 的 ID 选 择 器 优 先 级 高 于 class 选 择 器 优 先 级 规 则 便 来 自 于 特 殊 性 计 算 原 理 <!DOCTYPE HTML> <style type="text/css"> div { width: 100px; height: 100px; #c1 #c2 div.con { background-color: yellow; 91

5 第 1 篇 HTML 5 移 动 Web 开 发 基 础 div { background-color: black; #c2 div { background-color: blue; #c2 #content { background-color: red; </style> <div id="c1"> <div id="c2"> <div id="content" class="con"></div> </div> </div> 在 前 面 的 例 子 中, 按 照 CSS 的 规 则, 多 条 CSS 声 明 中 的 background-color 都 作 用 在 content 元 素 上, 最 终 content 的 背 景 色 取 决 于 特 殊 性 的 加 权 结 果 特 殊 性 的 值 可 以 看 作 是 一 个 由 四 个 数 组 成 的 一 个 组 合, 用 a,b,c 和 d 来 表 示 它 的 四 个 位 置 依 次 比 较 a,b, c 和 d 这 四 个 数 其 特 殊 性 的 大 小 比 如,a 值 相 同, 那 么 b 值 大 的 组 合 特 殊 性 会 较 大, 以 此 类 推 不 同 的 选 择 器 对 应 的 a,b,c 和 d 四 个 值 的 权 重 不 同, 其 基 本 规 则 : 在 html 标 签 的 style 属 性 中 定 义 的 样 式 ( 内 联 样 式 ),a 值 记 为 1 CSS 代 码 中 ID 选 择 器,b 记 为 1, 多 个 选 择 器 则 累 加 b 值 class 和 伪 类 (:hover) 选 择 器 用 c 记 元 素 (div) 和 伪 元 素 (:before) 用 d 记 在 这 个 规 则 下, 容 易 计 算 出 上 面 例 子 中 各 条 声 明 的 特 殊 性 值 : <style type="text/css"> div { width: 100px; height: 100px; #c1 #c2 div.con { /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */ background-color: yellow; /* 胜 出 */ div { /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ background-color: black; #c2 div { /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */ background-color: blue; #c2 #content { /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */ background-color: red; </style> 因 此, 最 终 ID 为 content 的 元 素 背 景 会 是 鲜 亮 的 黄 色 框 模 型 (Box Model) 框 模 型 又 称 盒 模 型, 对 于 前 端 工 程 师 而 言 可 用 人 尽 皆 知 来 形 容 它, 在 浏 览 器 漫 长 而 不 悠 久 的 历 史 上 有 过 两 种 框 模 型, 其 中 一 种 是 W3C 标 准 的 框 模 型, 如 图 3.3 所 示 92

6 图 3.3 框 模 型 示 意 图 HTML 中 的 每 一 个 可 感 知 元 素 都 会 在 浏 览 器 中 生 成 框 一 个 矩 形 的 区 域, 每 个 框 都 包 含 四 个 矩 形 组 成 部 分, 从 外 向 内 依 次 是 : 外 边 距 (Margin) 边 框 (Border) 内 边 距 (Padding) 和 内 容 (Content), 这 四 个 部 分 形 成 了 四 个 框 (box) 对 于 一 个 定 义 了 高 宽 的 且 高 宽 生 效 的 元 素, 元 素 实 际 的 尺 寸 来 自 于 框 中 的 四 个 值 的 计 算 结 果 #box { width: 70px; margin: 10px; padding: 5px; 这 个 例 子 中, 最 终 生 成 框 的 实 际 尺 寸 可 以 参 考 下 面 的 示 意 图 ( 如 果 定 义 了 border 宽 度 值, 最 后 的 结 果 也 是 要 包 含 border 的 ): 93

7 第 1 篇 HTML 5 移 动 Web 开 发 基 础 要 注 意 的 是,margin 对 于 table 相 关 类 型 ( 除 了 table-caption table 和 inline-table 这 3 类 ) 的 元 素 是 不 起 作 用 的, 如 td tr 和 th 等 另 外 对 于 行 内 非 替 换 元 素 ( 如 span 元 素 ), 垂 直 方 向 的 margin 是 不 起 作 用 的 padding 属 性 也 有 一 定 的 限 制, 它 可 以 使 用 到 除 display 值 是 table-row-group table-header-group table-footer-group table-row table-column-group 和 table-column 之 外 的 所 有 元 素 margin 有 一 项 非 常 独 到 的 特 性 是 可 以 为 其 指 定 负 值, 如 果 将 正 值 理 解 为 推 开 元 素 周 围 的 其 他 元 素, 那 么 负 值 则 表 现 为 拉 近 元 素 周 围 的 元 素 利 用 负 边 距 可 以 实 现 很 多 有 趣 的 视 觉 效 果, 例 图 3.4 表 单 组 如 可 以 实 现 表 单 组 的 效 果, 如 图 3.4 所 示.input-group { width: 200px;.input-group.text { -webkit-appearance: none; border: 1px solid gray; padding: 4px 4px; width: 200px; margin: 0;.input-group.text:first-child { border-radius: 5px 5px 0 0; margin-bottom: -1px;.input-group.text:last-child { border-radius: 0 0 5px 5px; 如 果 要 使 得 上 面 的 表 单 更 完 善, 还 应 该 处 理 focus 情 况 下 的 z-index:.input-group.text:focus { position: relative; z-index: 1; 另 一 种 框 模 型 来 自 老 版 本 的 IE, 两 者 有 细 微 的 差 别, 主 要 是 在 计 算 框 的 尺 寸 时 所 用 边 界 不 同 一 个 元 素 可 以 通 过 box-sizing 属 性 来 改 变 盒 子 尺 寸 的 计 算 规 则 : #div1 { box-sizing: border-box; /* width/height = 实 际 可 见 尺 寸 ( 包 含 content, padding, border) + marigin */ #div2 { /* 默 认 情 况,W3C 模 型 */ box-sizing: content-box; /* 实 际 可 见 尺 寸 = width/height + padding + border + margin */ 1. 外 边 距 折 叠 在 框 模 型 中, 外 边 距 折 叠 是 一 个 非 常 容 易 使 人 迷 惑 的 地 方, 简 单 说 来, 外 边 距 折 叠 指 94

8 的 是 相 邻 的 两 个 或 多 个 外 边 距 会 合 并 成 一 个 外 边 距 注 意 此 处 说 的 相 邻 是 外 边 距 相 邻, 而 不 是 元 素 相 邻, 比 如 三 个 嵌 套 的 元 素 他 们 的 上 边 距 都 是 相 邻 的, 因 此 其 边 距 会 折 叠 : <div style="border:1px solid red; width:100px;"> <div id="div1" style="margin-top:50px; background-color:green; height:50px; width:50px;"> <div id="div2" style="margin-top:100px;">b</div> </div> </div> 在 上 面 的 例 子 中,div1 和 div2 的 margin-top 是 相 邻 的, 最 后 会 折 叠 成 一 个 margin-top, 其 值 为 两 者 中 较 大 的 值, 最 后 的 结 果 如 图 3.5 所 示 判 断 外 边 距 是 否 相 邻, 其 规 则 可 以 总 结 为 以 下 两 点 : 这 两 个 外 边 距 没 有 被 非 空 内 容 padding border 或 clear 属 性 所 隔 开 这 些 margin 都 处 于 常 规 流 (in-flow) 中, 他 们 可 以 是 相 邻 的 节 点, 也 可 以 是 父 子 节 点 满 足 这 两 个 条 件 的 margin 我 们 称 其 为 是 相 邻 的 (Adjoining) 那 么 它 们 分 别 表 示 什 么 意 思 呢? 被 隔 开 这 个 很 好 理 解, 对 于 上 例, 如 果 我 们 将 代 码 改 成 下 面 这 样 : <div style="border:1px solid red; width:100px;"> <div id="div1" style="border:1px solid blue;margin-top:50px; background-color:green; height:50px; width:50px;"> <div id="div2" style="margin-top:100px;">b</div> </div> </div> 运 行 后 的 效 果 如 图 3.6 所 示 图 3.5 外 边 距 折 叠 图 3.6 折 叠 边 距 条 件 为 div1 加 上 边 框 后,div2 的 上 外 边 距 就 不 再 与 div1 发 生 折 叠 了, 因 此 出 现 了 图 3.6 中 字 母 B 所 在 div 跑 到 最 外 层 元 素 之 外 的 效 果 同 样 道 理, 如 果 为 div1 添 加 padding-top 或 者 文 字 内 容, 都 会 使 得 折 叠 失 效 同 样, 由 于 浮 动 元 素 inline-block 元 素 和 绝 对 定 位 元 素 不 属 于 当 前 普 通 流, 因 此 它 们 也 不 会 和 垂 直 方 向 上 的 其 他 margin 折 叠 : <div style="margin-bottom:50px; width:50px; height:50px; background-color: green;">a</div> <div style="margin-top:50px; width:100px; height:100px;background-color: 95

9 第 1 篇 HTML 5 移 动 Web 开 发 基 础 green;display:inline-block"> <div style="margin-top:50px; background-color:gold;">b</div> </div> 运 行 后 的 效 果 如 图 3.7 所 示 此 时,B 的 父 div 和 A 所 在 div 不 再 属 于 同 一 个 普 通 流, 因 此 不 会 发 生 外 边 距 折 叠, 同 理 可 推 至 B 本 身 所 在 元 素 2. 关 于 外 边 距 折 叠 的 计 算 多 个 margin 在 发 生 折 叠 时 根 据 margin 正 负 值 的 不 同 会 出 现 不 同 的 折 叠 效 果, 大 致 说 来 有 如 下 几 个 规 则 : 当 这 些 margin 均 为 正 值 时, 取 margin 中 的 最 大 值 当 margin 中 正 负 值 都 存 在 时, 先 取 出 负 margin 中 绝 对 值 最 大 的, 然 后, 和 正 margin 值 中 最 大 的 margin 相 加 深 刻 理 解 框 模 型 离 不 开 实 践, 如 果 你 使 用 Chrome 浏 览 器 的 开 发 者 工 具 进 行 调 试, 可 以 方 便 地 查 看 甚 至 编 辑 一 个 元 素 生 成 的 框, 如 图 3.8 所 示 图 3.7 外 边 距 折 叠 图 3.8 在 Chrome 中 调 试 框 模 型 不 过, 记 住 这 些 关 于 边 距 的 口 诀 还 是 远 远 不 够 的, 可 视 化 模 型 将 会 是 对 理 解 页 面 元 素 布 局 更 加 重 要 的 内 容 可 视 化 格 式 模 型 (visual formatting model) 可 视 化 格 式 模 型 可 谓 是 页 面 布 局 元 素 与 元 素 间 关 系 遵 循 的 基 本 规 则 了, 掌 握 好 这 部 分 内 容, 基 本 上 在 各 种 浏 览 器 诡 异 的 兼 容 性 问 题 就 打 遍 天 下 无 敌 手 了 甚 至 是 IE 6 7 和 8 不 过 本 节 内 容 不 会 去 讲 浏 览 器 差 异 的 细 节, 仅 仅 阐 述 核 心 概 念 的 原 理 极 其 应 用, 这 些 概 念 无 论 是 在 桌 面 浏 览 器 还 是 在 手 机 浏 览 器 都 同 样 适 用, 且 有 助 于 你 写 出 快 而 好 的 CSS 动 心 了 吧? 所 谓 可 视 化 格 式 模 型, 指 的 是 用 户 代 理 ( 浏 览 器 ) 在 可 视 化 媒 体 ( 显 示 器 ) 上 处 理 文 档 树 在 这 个 模 型 中, 每 一 个 文 档 中 的 元 素 都 会 根 据 框 模 型 产 生 零 个 或 多 个 框, 这 些 框 的 96

10 布 局 受 控 于 下 面 几 个 因 素 : 框 的 尺 寸 和 类 型 ( 宽 高 几 何? 行 内 框 还 是 块 框?) 定 位 模 式 ( 没 有 定 位 的 常 规 流? 浮 动? 还 是 绝 对 定 位?) 文 档 树 中 元 素 间 的 关 系 外 部 信 息 ( 视 口 大 小? 图 片 真 实 尺 寸?) 以 上 四 个 因 素 共 同 决 定 了 一 个 元 素 在 页 面 上 的 最 终 显 示, 掌 握 了 这 四 点, 基 本 就 掌 握 了 CSS 布 局 的 精 髓 1. 包 含 块 (Containing block) 在 CSS 中 关 于 框 的 很 多 定 位 尺 寸 的 计 算, 都 和 其 矩 形 边 界 有 关, 这 个 矩 形 我 们 称 之 为 包 含 块 包 含 块 是 一 个 相 对 的 概 念, 一 个 元 素 的 父 元 素, 通 常 就 是 这 个 元 素 以 及 其 子 孙 元 素 的 包 含 块 包 含 块 是 一 个 很 重 要 的 概 念, 可 视 化 格 式 模 型 中 很 多 行 为 的 理 论 都 和 它 有 关 : 宽 高 为 auto 时 的 计 算 绝 对 定 位 元 素 和 浮 动 元 素 的 定 位 等 等 某 个 元 素 的 包 含 块 并 不 一 定 是 这 个 元 素 的 父 元 素, 严 格 的 包 含 块 判 定 比 较 复 杂, 流 程 可 以 参 见 图 3.9 所 示 图 3.9 包 含 块 判 定 记 忆 判 定 包 含 块 这 图 可 能 比 较 吃 力, 对 于 绝 大 部 分 情 况, 你 可 以 简 单 地 记 为 : 一 个 元 素 的 包 含 块 边 界 是 它 最 近 的 非 static 定 位 祖 先 的 内 容 区 域 97

11 第 1 篇 HTML 5 移 动 Web 开 发 基 础 2. 匿 名 块 框 (Anonymous block boxes) 你 经 常 会 听 到 行 内 元 素 生 成 行 内 框 块 级 元 素 生 成 块 框 这 样 的 概 念, 但 可 能 很 少 接 触 匿 名 块 框 这 个 名 词, 其 实 只 要 把 握 住 一 点 所 有 的 元 素 都 会 生 成 框 就 很 容 易 理 解 匿 名 块 框 的 构 造 过 程 了 例 如 下 面 这 段 代 码 : <p>somebody whose name I have forgotten, said, long ago: <q>a box is a box,</q> and he probably meant it.</p> 我 们 加 上 样 式 : p { display: block; q { display: block; margin: 1em 最 终 浏 览 器 中 渲 染 的 效 果 可 能 如 图 3.10 所 示 p 和 q 元 素 本 身 会 生 成 两 个 块 框, 其 中 每 一 行 文 本 都 会 生 成 一 个 行 框 (line box) 上 面 例 子 一 共 生 成 了 四 个 行 框,p 中 的 块 级 q 元 素 将 上 下 行 框 分 成 了 两 个 部 分, 此 时 会 为 这 两 部 分 生 成 两 个 匿 名 块 框, 如 图 3.11 所 示 图 3.10 匿 名 框 的 渲 染 图 3.11 匿 名 框 的 生 成 匿 名 框 并 不 是 实 际 的 框, 引 入 此 概 念 将 非 常 容 易 理 解 一 些 行 为 比 如 后 面 要 讲 到 的 浮 动 3. 定 位 此 处 的 定 位 并 不 是 指 绝 对 定 位 或 者 相 对 定 位, 这 里 是 一 个 更 加 宽 泛 的 概 念 CSS 中 的 定 位 方 案 (Positioning schemes) 包 含 这 样 几 种 常 规 流 : 即 文 档 在 默 认 情 况 下 的 定 位, 其 中 包 含 块 框 块 级 格 式 化 规 则 行 内 框 的 行 内 格 式 化 规 则 和 相 对 定 位 规 则 98

12 浮 动 : 浮 动 元 素 将 脱 离 常 规 流 进 行 布 局 元 素 将 靠 边 站 绝 对 定 位 : 同 样 将 脱 离 常 规 流, 并 根 据 包 含 块 来 计 算 具 体 位 置 浮 动 或 者 绝 对 定 位 的 元 素 将 被 成 为 流 外 (out of flow) 元 素, 反 之 则 成 为 流 内 (in flow) 元 素 这 三 种 定 位 的 大 体 规 则 你 肯 定 也 已 经 接 触 过 许 多, 不 过 display position 和 float 这 三 者 混 用 的 时 候 也 会 使 人 迷 惑 : div1 { position: absolute; display: inline; float: right; margin: 20px; width:200px; 对 于 这 样 一 个 div 元 素, 它 的 最 终 渲 染 结 果 应 该 是 怎 样 的 呢? 作 为 一 个 内 联 元 素 被 绝 对 定 位, 并 且 只 有 左 右 有 20px 的 边 距? 还 是 不 绝 对 定 位 而 基 于 包 含 块 向 右 浮 动? 实 际 浏 览 器 渲 染 结 果 应 该 是 前 者, 并 且 最 后 作 为 块 级 元 素 渲 染 成 200px 宽 度 的 盒 子 对 于 这 三 者 的 关 系, 可 以 参 照 图 3.12 来 得 出 结 论 其 中 display 属 性 的 计 算 值 参 考 表 3-1 图 3.12 position float 和 display 的 关 系 99

13 第 1 篇 HTML 5 移 动 Web 开 发 基 础 表 3-1 转 换 对 应 表 inline-table 设 定 值 inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block 其 他 计 算 值 table block 同 设 定 值 因 此, 上 例 实 际 最 终 的 渲 染 结 果 将 等 价 于 : div1 { position: absolute; display: block; float: none; margin: 20px; width: 200px; 常 规 流 (Normal Flow) 常 规 流 ( 有 的 文 档 里 面 称 之 为 的 普 通 流 或 者 被 广 泛 误 称 为 文 档 流 ) 是 一 个 文 档 在 被 显 示 时 最 常 见 的 布 局 形 态 一 个 框 ( 无 论 它 是 块 级 的 还 是 行 内 的 ) 在 常 规 流 中 必 须 属 于 一 个 格 式 化 上 下 文 (Formatting Context), 其 中 包 含 块 级 格 式 化 上 下 文 (Block Formating Context, 简 称 BFC) 和 行 内 (inline) 格 式 化 上 下 文 块 级 格 式 化 上 下 文 可 由 一 个 元 素 来 定 义, 其 他 元 素 在 这 个 元 素 所 定 义 的 环 境 中 必 须 满 足 一 些 特 定 的 规 则 比 如 一 个 div, 它 在 overflow 被 设 置 为 hidden 的 情 况 下 会 产 生 一 个 块 级 格 式 化 上 下 文 : div1 { overflow: hidden; 你 可 以 将 块 级 格 式 化 上 下 文 想 象 成 一 个 密 封 的 大 箱 子, 箱 子 外 边 的 元 素 将 不 与 箱 子 内 的 元 素 产 生 作 用, 此 时 在 该 div 中 的 元 素 将 会 呈 现 出 如 下 的 特 征 : 外 边 距 将 不 再 与 上 下 文 之 外 的 元 素 折 叠 其 内 可 以 包 含 浮 动 元 素 可 以 阻 止 浮 动 元 素 被 覆 盖 ( 也 就 是 常 说 的 清 除 浮 动 ) 框 会 一 个 接 一 个 地 被 垂 直 放 置, 它 们 的 起 点 是 一 个 包 含 块 的 顶 部 ( 这 意 味 着 BFC 中 的 文 字 将 不 会 环 绕 邻 接 的 浮 动 盒 子 排 布, 而 是 竖 直 排 布 因 为 行 框 将 会 一 个 接 一 个 的 垂 直 放 置 ) 那 么, 如 何 才 能 触 发 块 级 格 式 化 上 下 文 呢? 大 致 说 来 有 这 样 几 种 方 式 : 浮 动 元 素 ( 浮 动 元 素 本 身 形 成 一 个 块 级 格 式 化 上 下 文 ) 绝 对 定 位 元 素 行 内 块 元 素 (display: inline-block) 表 格 单 元 格 和 标 题 (display: table-cell 或 display: table-caption) overflow 非 "visible" 的 元 素 ( 如 上 例 中 的 overflow: hidden) 比 如 下 面 的 例 子 :

14 <div id="sibling-box">sibling-box</div> <div id="bfc-box"> <div id="float-box">float-box</div> </div> 以 及 CSS: #sibling-box { border: 1px dotted #333; margin-bottom: 10px; height: 10px; #bfc-box { border: 1px solid #333; overflow: hidden; /* 清 除 浮 动 的 作 用 */ #float-box { float:left; margin-top: 20px; 渲 染 结 果 将 如 图 3.13 所 示 上 例 中 即 使 这 些 box 没 有 设 置 边 框, 且 没 有 浮 动,float-box 和 sibling-box 的 边 距 也 不 会 折 叠, 功 劳 也 来 自 BFC: #sibling-box { border: 1px dotted #333; margin-bottom: 10px; height: 10px; #bfc-box { overflow: hidden; /* 清 除 浮 动 的 作 用 */ #float-box { margin-top: 20px; 运 行 后 的 效 果 如 图 3.14 所 示 图 3.13 利 用 BFC 清 除 浮 动 图 3.14 BFC 阻 止 边 距 折 叠 块 级 格 式 化 上 下 文 的 触 发 方 式 不 太 容 易 记 忆, 在 CSS 3 中 对 BFC 的 概 念 做 了 细 微 改 动, 重 命 名 为 flow root 触 发 方 式 则 简 单 而 直 白 地 描 述 为 : 在 元 素 定 位 非 static 或 relative 的 情 101

15 第 1 篇 HTML 5 移 动 Web 开 发 基 础 况 下 触 发 这 种 记 法 相 对 来 说 更 加 简 单 易 懂 浮 动 其 实 也 算 一 种 定 位 方 式 5. 浮 动 (float) 浮 动 曾 是 一 种 神 奇 的 布 局 技 术, 但 在 近 些 年 来 越 来 越 被 诟 病, 因 为 浮 动 往 往 会 导 致 一 些 意 料 之 外 的 结 果, 而 且 经 常 面 临 清 除 浮 动 的 痛 苦 而 这 一 切 的 根 源 在 于 : 浮 动 最 初 本 不 是 一 种 用 来 布 局 的 技 术 浮 动 框 会 脱 离 常 规 流 在 当 前 行 向 左 或 者 向 右 漂 移, 浮 动 框 外 的 行 框 可 以 沿 着 浮 动 框 的 边 缘 进 行 渲 染 这 一 特 性 可 以 用 来 实 现 文 字 环 绕 图 片 这 样 的 效 果 : <div> <span> 假 设 这 是 头 像 </span> <p> The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. </p> </div> CSS: span { float: left; width: 50px; height: 50px; padding: 10px; margin: 10px; border: 1px dotted #333; div { border: 1px solid red; width: 200px; padding: 10px; 运 行 后 的 效 果 如 图 3.15 所 示 如 果 你 想 将 右 侧 文 字 竖 直 排 列, 则 可 以 通 过 触 发 p 的 块 级 格 式 化 上 下 文 来 实 现, 因 为 对 于 table 元 素 块 级 替 换 元 素 或 者 在 常 规 流 中 创 建 了 块 格 式 化 上 下 文 的 元 素, 它 们 的 border box 在 同 一 个 块 格 式 化 上 下 文 中 不 能 覆 盖 任 何 浮 动 元 素 在 有 足 够 的 空 间 情 况 下, 也 可 以 把 它 紧 临 浮 动 元 素 放 置, 否 者 放 置 在 浮 动 元 素 的 下 面 : p { overflow: hidden; 运 行 后 的 效 果 如 图 3.16 所 示 浮 动 框 在 定 位 上 还 有 非 常 多 的 细 节 例 如, 同 方 向 的 浮 动 框 间 会 堆 叠, 浮 动 框 不 能 溢 出 包 含 块, 浮 动 框 不 影 响 外 边 距 折 叠 等 不 过 这 些 特 性 大 多 已 被 广 大 前 端 人 士 所 熟 知, 本 书 的 重 点 也 不 在 于 讲 述 这 些 细 节 102

16 图 3.15 浮 动 图 3.16 浮 动 与 BFC 和 浮 动 一 样, 绝 对 定 位 也 是 一 种 脱 离 文 档 流 的 定 位 方 式 掌 握 它 的 诀 窍 在 于 明 白 这 句 话 : 绝 对 定 位 元 素 基 于 包 含 块 ( 不 一 定 是 父 元 素 ) 进 行 定 位 关 于 包 含 块 的 判 定, 前 文 已 经 做 了 详 细 叙 述, 下 面 来 看 一 个 简 单 的 例 子 : <div style="position:relative; width:300px; height:300px; background-color:silver; border:5px solid red;"> <div style="width:100px; height:100px; background-color:blue;"></div> <div style="margin: px; width:200px; height:200px; background-color:gold;"> <div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:green;"> A </div> </div> </div> 运 行 后 的 效 果 如 图 3.17 所 示 图 3.17 绝 对 定 位 可 以 看 到,A 框 并 没 有 相 对 于 其 父 元 素 进 行 定 位, 而 是 相 对 于 其 爷 爷 级 元 素 进 行 了 定 103

17 第 1 篇 HTML 5 移 动 Web 开 发 基 础 位, 原 因 就 在 于 它 爷 爷 是 A 框 第 一 个 position 为 非 static 的 祖 先 元 素 另 外,fixed 定 位 其 实 是 absolute 定 位 的 一 个 子 类, 它 相 当 于 是 包 含 块 为 可 视 窗 口 的 绝 对 定 位 可 视 化 格 式 模 型 的 内 容 还 包 括 分 层 呈 现 (Layered presentation) 双 向 文 本 (bidi) 和 宽 高 值 计 算 等 内 容, 读 者 如 果 有 兴 趣 可 以 阅 读 CSS 2.1 文 档 中 相 关 的 章 节 表 格 表 格 的 可 视 化 布 局 包 含 很 多 繁 杂 的 内 容, 不 过 在 落 实 到 应 用 时, 我 们 只 需 要 记 住 这 样 三 个 要 点 便 可 以 打 遍 天 下 无 敌 表 1. 表 格 元 素 的 匿 名 框 机 制 首 先 看 下 面 一 个 表 格 代 码 : <table> <td>1 </table> 这 并 不 是 一 个 完 整 的 表 格 结 构, 它 还 缺 失 了 行 (tr) 行 组 (tbody) 头 (th) 和 行 头 组 (thead) 等 元 素, 但 是 这 个 非 完 整 的 表 格 会 生 成 至 少 三 层 的 完 整 结 构 :table>tr>td 这 些 生 成 的 结 构 都 是 由 匿 名 框 构 成 ( 类 似 于 前 面 讲 到 的 行 匿 名 框 ) 对 于 一 个 完 整 的 表 格 结 构, 它 的 渲 染 结 构 总 是 由 cell row row group column column group 和 table 这 六 个 部 分 组 成, 并 且 在 逻 辑 上 和 视 觉 上 从 上 至 下 呈 现 出 分 层 结 构, 如 图 3.18 所 示 图 3.18 表 格 分 层 每 一 层 都 由 不 同 的 匿 名 框 构 成, 在 指 定 背 景 时, 位 于 底 层 的 背 景 会 相 应 穿 过 上 层 透 明 104

18 的 元 素 2. 表 格 的 布 局 机 制 表 格 的 宽 度 布 局 算 法 有 两 种 机 制, 一 种 是 固 定, 一 种 是 自 动, 可 以 使 用 table-layout 属 性 指 定 (auto 或 fixed) 所 谓 固 定 算 法, 是 指 的 水 平 方 向 的 布 局 ( 即 列 的 宽 度 ) 不 受 具 体 内 容 的 影 响, 而 是 可 以 通 过 表 格 宽 度 和 列 宽 度 来 指 定 而 自 动 布 局 算 法 中, 列 的 宽 度 是 由 列 单 元 格 中 没 有 折 行 的 最 宽 的 内 容 设 定 的 3. 表 格 的 边 框 掌 握 表 格 边 框 的 精 髓 在 于 掌 握 border-collapse 属 性 border-collapse 可 以 指 定 两 种 表 格 边 框 模 型, 一 种 是 边 框 分 离 模 型 (border-collapse: separate), 在 这 种 模 式 下 每 个 单 元 格 以 及 table 本 身 的 边 框 都 是 独 立 的, 此 时 可 以 使 用 border-spacing 属 性 指 定 单 元 格 边 框 之 间 的 距 离 ( 水 平 或 者 垂 直 ) table { border: outset 10pt; border-collapse: separate; border-spacing: 15pt td { border: inset 5pt td.first-cell { border: inset 10pt 这 样 的 表 格 最 终 效 果 可 能 如 图 3.19 所 示 图 3.19 边 框 分 离 模 型 另 一 种 模 型 叫 做 边 框 合 并 模 型, 使 用 border-collapse: collapse 来 指 定 顾 名 思 义, 合 并 模 型 就 是 邻 接 的 单 元 格 以 及 表 格 元 素 本 身 共 享 同 样 的 边 框 上 例 如 果 表 格 改 为 collapse, 则 结 果 可 能 是 这 样 的, 如 图 3.20 所 示 105

19 第 1 篇 HTML 5 移 动 Web 开 发 基 础 图 3.20 边 框 合 并 模 型 可 以 看 到, 因 为 边 框 被 合 并,inset 和 outset 的 边 框 将 不 再 适 用 因 为 这 种 类 型 的 边 框 会 更 改 上 左 和 下 右 颜 色 的 深 浅, 单 元 格 边 框 设 置 的 边 框 效 果 会 互 相 覆 盖, 最 终 呈 现 出 奇 怪 的 效 果 3.3 CSS 3 选 择 器 增 强 CSS Selector Level 3 模 块 在 CSS 2.1 的 基 础 上 增 加 了 很 多 选 择 器, 这 些 选 择 器 极 大 地 增 强 了 CSS 选 择 器 的 表 达 力, 简 化 了 在 许 多 场 景 下 CSS 开 发 人 员 的 工 作 在 详 细 讲 解 他 们 之 前, 我 们 先 来 看 看 有 哪 些 新 选 择 器 被 引 入 了 表 3-2 涵 盖 了 所 有 CSS 2.1 中 没 有 而 CSS 3 中 新 增 的 选 择 器 表 3-2 CSS Level 3 新 增 选 择 器 一 览 选 择 器 模 式 简 要 说 明 E[foo^="bar"] foo 属 性 以 字 符 串 bar 开 头 的 E 元 素 ( 来 源 于 正 则 表 达 式 语 法 ) E[foo$="bar"] E[foo*="bar"] E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-child E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type foo 属 性 以 字 符 串 bar 结 尾 的 E 元 素 foo 属 性 包 含 字 符 串 bar 的 E 元 素 文 档 根 元 素, 大 部 分 情 况 下 只 能 用 于 匹 配 html 元 素 本 身 选 择 相 对 于 其 父 元 素 的 第 n 个 E 类 型 子 元 素 选 择 相 对 于 其 父 元 素 的 倒 数 第 n 个 E 类 型 子 元 素 与 :nth-child() 作 用 类 似, 但 是 在 匹 配 时 仅 计 算 同 种 标 签 的 元 素 同 :nth-of-type 类 似, 倒 着 数 等 价 于 E:nth-child(1) 等 价 于 E:nth-last-child(1) 等 价 于 E:nth-of-type(1) 等 价 于 E:nth-last-of-type(1) 当 E 是 其 父 元 素 的 唯 一 子 元 素 时 和 :only-child 类 似, 当 E 类 型 只 有 一 个 元 素 时 匹 配 E:empty 当 E 没 有 子 元 素 时 匹 配 ( 包 含 文 本 元 素 ) E:target E:enabled E:disabled E:checked E:not(s) E ~ F 当 url 中 使 用 锚 点 引 用 了 页 面 的 对 象 时, 选 择 匹 配 E 的 对 象 启 用 或 者 禁 用 了 的 UI 元 素 选 择 了 的 UI 元 素 ( 比 如 checkbox 或 radio button) 不 匹 配 某 个 选 择 器 的 E 元 素 匹 配 任 何 在 E 元 素 之 后 的 同 级 F 元 素 (E~F 和 E+F 的 不 同 在 于 后 者 只 能 选 择 紧 邻 E 的 F) 106

20 3.3.1 属 性 选 择 器 的 妙 用 属 性 选 择 器 是 非 常 好 用 的 设 计 工 具, 尤 其 是 在 组 织 代 码 方 面, 假 设 你 要 设 计 一 套 icon, 可 能 采 用 sprite 技 术 :.icon { background-image: url(icon.png) width: 16px; height: 16px;.icon-close { background-position: 0px 20px;.icon-open { background-position: 0px 20px; 此 时 你 可 能 需 要 这 样 使 用 这 些 class: <span class="icon icon-close"></span> 但 实 际 上, 你 可 以 使 用 属 性 选 择 器 来 让 代 码 变 得 更 简 单 : [class^="icon-"] { background-image: url(icon.png) width: 16px; height: 16px; 这 样 HTML 也 会 变 得 更 简 单 : <span class="icon-close"></span> 属 性 选 择 器 也 可 以 多 个 组 合 使 用, 已 达 到 某 些 常 见 的 目 的 : /* 对 某 根 域 下 所 有 安 全 链 接 增 加 安 全 标 识 */ a[href^=" { content: '[safe]' color: green; 强 大 的 结 构 性 伪 类 (Structural pseudo-classes) 结 构 性 伪 类 非 常 实 用, 它 的 推 出 在 开 发 人 员 和 设 计 师 们 中 大 受 欢 迎 /* 选 择 第 五 个 列 表 项 */ li:nth-child(5){ color: green; nth-child(n) 中 的 n 不 一 定 非 得 是 数 字, 也 可 以 是 表 达 式 : /* 选 择 从 第 六 个 li 起 到 最 后 一 个 li */ li:nth-child(n+6) { background: #ccc; 107

21 /* 选 择 第 个 元 素 */ li:nth-child(3n) { 甚 至 还 有 预 设 的 字 符 串 : /* 选 择 第 偶 数 个 元 素 */ li:nth-child(odd) { 第 1 篇 HTML 5 移 动 Web 开 发 基 础 :nth-last-child 也 是 类 似 的 用 法, 只 不 过 是 倒 过 来 数, 比 较 容 易 搞 混 淆 的 是 :nth-child 和 :nth-of-type 两 个 伪 类 我 们 以 下 面 这 个 例 子 来 说 明 它 们 的 区 别 : <section> <h1> 这 里 是 section 下 第 一 个 子 元 素 </h1> <p> 这 里 是 section 下 第 一 个 p 元 素 </p> <p> 这 里 是 section 下 第 二 个 p 元 素 </p> </section> 此 时 这 样 的 选 择 器 : section p:nth-child(2) { /* section 下 的 第 二 个 子 元 素, 且 该 元 素 为 p */ text-decorate:underline; section p:nth-of-type(2) { /* section 下 的 所 有 p 元 素 中 的 第 二 个 */ font-size:1.2em 最 终 结 果 如 图 3.21 所 示 结 构 性 伪 类 选 择 器 中 和 前 面 类 似 的 还 有 :first-child 和 :first-of-type 等, 以 及 其 相 应 的 last 版 本 善 用 这 些 选 择 器 能 解 决 很 多 设 计 上 的 难 题, 也 不 必 污 染 html 代 码, 更 好 地 践 行 内 容 和 表 现 分 离 的 思 想 图 3.21 nth-of-type 与 nth-child 的 区 别 其 他 选 择 器 比 较 有 趣 的 是 :target 选 择 器, 它 会 在 锚 定 页 面 元 素 的 时 候 起 作 用 ( 即 页 面 hash 指 定 了 页 面 某 元 素 的 id 时 ): <section id="voters"> Content </section> CSS: :target { background: yellow; 此 时 如 果 访 问 该 页 面 的 section 元 素 ( 如 则 该 section 元 素 会 呈 现 黄 色 的 背 景 通 常 :target 选 择 器 可 以 用 于 可 视 化 页 面 内 跳 转 行 为 标 识 历 史 状 态 和 高 亮 区 块 等 场 景 108

22 3.3.4 CSS 4 中 的 选 择 器 即 便 在 CSS 2 尸 骨 未 寒,CSS 3 尚 处 萌 芽 之 时,CSS 4 的 选 择 器 就 已 经 初 见 端 倪 了 CSS 4 选 择 器 相 较 于 CSS 3 选 择 器 功 能 更 强, 在 UI 组 件 方 面, 露 出 了 对 交 互 行 为 进 行 统 一 的 野 心, 在 可 用 性 方 面 也 进 行 了 优 化, 如 表 3-3 所 示 表 3-3 CSS 4 选 择 器 选 择 器 模 式 E:not(s1, s2) E:matches(s1, s2) E[foo="bar"i] E:any-link E:local-link E:local-link(0) E:current E:past E:future E:indeterminate E:default E:in-range E:out-of-range E:required E:optional E:read-only E:read-write E /foo/ F 简 要 说 明 相 比 CSS 3,:not 选 择 器 现 在 可 以 匹 配 多 个 子 选 择 器 了 :not 的 反 面 即 仅 选 择 匹 配 子 选 择 器 的 E 元 素 忽 略 大 小 写 的 属 性 选 择 器 所 有 链 接 行 为 的 E 元 素 ( 如 <div src="xx" ></div>) 当 前 文 档 内 的 链 接 当 前 域 内 的 链 接 时 间 维 (Time-dimensional) 伪 类, 可 以 选 择 正 在 ( 或 过 去 未 来 ) 被 屏 幕 阅 读 器 阅 读 的 内 容 UI 组 件 各 种 状 态 的 选 择 器 选 中 的 所 有 F 里 ID 值 与 E 元 素 的 foo 属 性 值 相 等 的 E! > F 神 奇 的 父 选 择 器, 这 时 候 会 选 择 E, 而 非 F CSS 4 的 选 择 器 截 止 到 目 前 在 W3C 还 处 于 工 作 草 案 阶 段, 截 止 到 撰 稿 时 也 没 有 任 何 浏 览 器 支 持 它 们, 因 此 这 里 只 大 致 介 绍 一 下 它 们 幸 运 的 是 CSS 3 选 择 已 被 绝 大 部 分 浏 览 器 完 美 支 持, 尤 其 在 移 动 设 备 上 更 是 如 此, 因 此 你 可 以 放 心 使 用 CSS 3 的 选 择 器, 在 绝 大 多 数 场 景 CSS 3 选 择 器 都 是 够 用 而 且 好 用 的 3.4 和 图 片 说 再 见 CSS 3 备 受 推 崇 的 一 个 重 要 原 因 便 是 它 解 放 了 设 计 师, 对 于 各 种 视 觉 效 果 甚 至 特 效 CSS 3 处 理 起 来 都 游 刃 有 余 可 以 毫 不 夸 张 的 说, 有 了 CSS 3, 设 计 师 ( 或 者 常 年 充 当 伪 设 计 师 的 前 端 工 程 师 们 ) 可 以 和 讨 厌 的 图 片 说 拜 拜 了 109

23 第 1 篇 HTML 5 移 动 Web 开 发 基 础 在 过 去, 使 用 图 片 进 行 UI 设 计 是 常 见 且 别 无 他 选 的 做 法, 那 时 候 设 备 简 单 ( 就 需 要 考 虑 桌 面 显 示 器 ), 用 户 的 需 求 也 很 简 单 随 着 时 代 变 迁, 用 户 对 网 站 速 度 要 求 越 来 越 高, 用 户 访 问 网 页 的 设 备 也 越 来 越 丰 富 由 于 图 片 非 常 消 耗 网 络 资 源 ( 一 个 小 小 的 按 钮 图 片 就 可 能 重 达 几 十 KB), 自 然 容 易 拖 累 整 个 页 面 的 加 载 速 度, 在 桌 面 版 还 好, 但 对 于 寸 流 量 寸 金 的 移 动 版 网 页, 你 不 得 不 精 简 每 一 处 网 络 和 资 源 开 销, 加 上 retina 屏 幕 的 大 热, 使 用 图 片 来 做 UI 设 计 还 得 做 两 套 甚 至 多 套 不 同 分 辨 率 的 图 片 来 进 行 适 应, 给 工 程 师 和 设 计 师 都 带 来 了 不 小 的 麻 烦 CSS 3 中 出 现 的 很 多 新 功 能 在 近 两 年 极 大 降 低 了 图 片 在 UI 设 计 中 的 使 用 率, 背 景 控 件 和 图 标 都 可 以 使 用 非 图 片 技 术 来 完 成, 而 且 能 做 到 更 好 的 适 应 性, 更 好 的 网 站 性 能 背 景 和 边 框 每 一 个 盒 子 都 可 以 拥 有 一 个 背 景, 依 靠 背 景, 我 们 可 以 为 网 页 点 缀 怡 人 的 花 色, 为 重 要 区 块 标 上 醒 目 的 高 亮, 制 作 漂 亮 的 控 件 等 等 在 过 去, 类 似 图 3.22 的 圆 角 按 钮 设 计 一 度 层 出 不 穷 ( 直 到 现 在 也 是 ): 通 常 的 实 现 方 式 是 让 设 计 师 制 作 一 张 固 定 大 小 的 图 片, 然 后 将 a 标 签 display 为 block ( 或 者 inline-block), 设 置 其 宽 高, 并 设 置 背 景 为 这 张 图 片 这 种 做 法 的 缺 点 是 很 明 显 的, 按 钮 的 大 小 没 法 改 变, 如 果 要 装 别 的 字 儿 按 钮 就 又 得 重 新 设 计 一 张 图 后 来 人 们 又 发 明 了 更 加 聪 明 的 做 法, 将 按 钮 分 割 成 如 图 3.23 所 示 的 三 个 部 分 图 3.22 Web 1.0 时 代 的 按 钮 图 3.23 分 割 图 片 以 自 适 应 左 右 两 个 部 分 使 用 两 个 单 独 的 标 记 ( 如 span), 并 分 别 设 置 它 们 的 背 景, 中 间 的 部 分 在 水 平 方 向 是 重 复 的, 因 此 可 以 垂 直 切 出 一 绺 一 像 素 的 图, 然 后 使 用 background-repeat:repeat-x 将 中 间 部 分 重 复 堆 叠, 这 样 其 内 的 文 字 可 以 实 现 自 适 应 背 景 重 复 技 术 被 广 泛 用 于 网 页 顶 栏 背 景 纹 理 和 按 钮 进 度 条 等 设 计 需 求 这 种 方 法 的 缺 点 也 很 明 显, 你 得 使 用 三 个 标 签 才 能 实 现 一 个 按 钮 iphone 出 现 后, 圆 角 矩 形 的 设 计 更 是 泛 滥 了 整 个 UI 设 计 界 按 钮 图 片 框 和 文 本 框 我 们 所 能 见 到 的 网 页 处 处 充 斥 着 圆 角 还 好 CSS 3 提 供 了 border-radius 这 个 强 大 的 属 性, 让 圆 角 变 得 如 此 简 单 : div { border: 1px solid #aaa; border-radius: 12px; /* 指 定 圆 角 半 径 为 12px */ width: 71px; 110

24 height: 71px; 一 个 标 准 的 72 72( 不 要 忘 了 边 框 的 1 像 素 )ipad 图 标 诞 生 了, 如 图 3.24 所 示 可 以 看 到 border-radius 用 法 非 常 简 单 和 padding 等 属 性 类 似, border-radius 也 可 以 指 定 多 个 值 以 分 别 对 左 上 右 上 右 下 和 左 下 的 圆 角 半 径 进 行 设 置 : 图 3.24 border-radius border-top-left-radius: 2px; border-top-right-radius: 20px; border-bottom-right-radius: 50%; border-bottom-left-radius: 2em; 和 padding margin 一 样, 可 以 简 写 为 : border-radius: 2px 20px 50% 2em; 如 图 3.25 所 示 更 加 有 趣 的 是,border-radius 不 仅 仅 可 以 指 定 圆 角 半 径, 还 可 以 在 前 面 的 值 的 基 础 上, 以 斜 线 分 割 指 定 第 二 组 值 ( 也 是 1~4 个 值 构 成 ), 进 而 得 到 一 段 椭 圆 的 弧 ( 第 二 组 值 仅 指 定 垂 直 方 向 上 的 半 径 ): border-radius: 2px / 20px; 如 图 3.26 所 示 图 3.25 border-radius 分 别 设 值 ` 图 3.26 以 椭 圆 弧 度 设 置 圆 角 看 一 个 复 杂 点 的 例 子 : border-radius: 10px 20px 60px 100px / 40px 20px 30px 50px; 运 行 效 果 如 图 3.27 和 图 3.28 所 示 善 用 圆 角 值 可 以 搭 配 出 各 种 类 型 的 边 框 效 果 在 背 景 方 面 (background),css 3 也 有 许 多 人 性 化 的 增 强,background 是 网 页 设 计 中 最 重 要 的 技 术, 利 用 它 可 以 将 设 计 元 素 ( 颜 色 光 影 和 图 像 ) 与 页 面 元 素 连 接 起 来 background 可 以 设 置 多 达 八 个 种 类 的 值, 可 以 将 它 们 简 写 至 background 属 性 之 中 : 111

25 第 1 篇 HTML 5 移 动 Web 开 发 基 础 图 3.27 椭 圆 圆 角 图 3.28 两 组 值 的 详 细 标 注.topbanner { background: url("topbanner.png") #00D repeat-y -10px -40px fixed; 这 八 个 种 类 的 详 情 可 以 看 表 3-4 所 示 表 个 种 类 的 属 性 属 性 功 能 CSS 3 新 增? background-color 设 置 背 景 色 background-image background-position 设 置 背 景 图 片 设 置 背 景 图 片 位 置 background-size 设 置 背 景 缩 放 大 小 是 background-repeat background-attachment 背 景 重 复 模 式 背 景 附 着 方 式 ( 如 fixed 表 示 背 景 固 定 不 动,scroll 则 随 页 面 滚 动 而 滚 动 ) background-clip 背 景 裁 剪 起 始 区 域 是 background-origin 背 景 绘 制 起 始 区 域 是 CSS 2 中 定 义 的 background 属 性 我 们 应 该 都 很 熟 悉 了, 现 在 我 们 着 重 讲 一 下 CSS 3 新 增 的 几 个 属 性 background-size 是 一 个 非 常 棒 的 功 能, 它 可 以 方 便 地 设 置 背 景 图 的 大 小 以 实 现 图 片 拉 伸 效 果 :.div1 { background-size: 300px 100px; /* 设 置 背 景 为 固 定 大 小, 不 管 背 景 图 原 始 大 小 */.div2 { background-size: 40% 80%; /* 宽 度 和 高 度 分 别 是 容 器 元 素 的 40% 和 80% */ background-size 属 性 还 有 两 个 非 常 有 用 的 关 键 字 预 设 值 :cover 和 contain cover 用 于 112

26 等 比 扩 展 图 片 来 填 满 元 素, 即 用 图 片 覆 盖 (cover) 住 元 素 contain 则 是 等 比 缩 小 图 片 来 适 应 元 素, 即 让 元 素 容 纳 (contain) 整 个 图 片 图 3.29 展 示 了 两 者 的 区 别 图 3.29 background-size 预 设 关 键 字 background-origin 和 background-clip 是 一 对 不 能 分 割 的 情 侣, 甚 至 他 们 的 取 值 选 项 都 是 一 样 的 background-origin 用 于 指 定 背 景 绘 制 时 的 起 始 区 域, 它 可 以 指 定 border-box padding-box 和 content-box 这 几 个 值 : div{ background: url('logo4w.png') no-repeat; width:800px; height:100px; padding: 20px; border:10px dotted #aaa; 与 框 模 型 对 应,border-box 指 从 边 框 开 始 计 算 背 景 起 始 位 置, 其 效 果 如 图 3.30 所 示 background-origin: border-box; content-box( 排 除 所 有 边 框 和 内 边 距 ) 的 效 果, 如 图 3.31 所 示 图 3.30 background-origin:border-box 图 3.31 background-origin:content-box 113

27 第 1 篇 HTML 5 移 动 Web 开 发 基 础 background-clip 则 用 于 指 定 背 景 从 何 处 裁 剪, 取 值 也 是 border-box content-box 和 padding-box 前 面 关 于 background-origin 的 第 一 个 例 子 如 果 将 background-clip 设 置 为 content-box 则 会 呈 现 图 3.32 的 效 果 图 3.32 background-clip 示 意 background-origin 和 background-clip 在 很 多 场 景 下 都 是 非 常 方 便 的 工 具 例 如, 指 定 控 件 ( 如 按 钮 ) 的 背 景 时, 因 为 行 高 的 原 因, 你 可 能 并 不 想 背 景 覆 盖 住 元 素 padding 渐 变 和 阴 影 渐 变 和 阴 影 可 能 是 PhotoShop 软 件 中 最 火 的 两 种 设 计 元 素 了 得 益 于 CSS 3, 渐 变 和 阴 影 终 于 被 落 实 在 了 标 准 文 档 里 更 重 要 的 是, 现 代 浏 览 器 都 支 持 它 们! 1. 渐 变 在 PhotoShop 中, 渐 变 工 具 提 供 了 五 种 类 型 的 渐 变, 分 别 是 线 性 渐 变 径 向 渐 变 角 度 渐 变 对 称 渐 变 和 菱 形 渐 变 在 CSS 中, 渐 变 没 有 PhotoShop 里 那 么 复 杂, 但 是 通 过 适 当 的 组 合 依 然 可 以 获 得 非 常 惊 艳 的 效 果 CSS 3 中 渐 变 数 据 类 型 ( 和 颜 色 rgba 等 函 数 类 似 ) 是 以 函 数 形 式 实 现 的 例 如, 线 性 渐 变 就 是 一 个 名 为 linear-gradient() 的 函 数, 该 函 数 会 返 回 一 个 <gradient> 数 据 类 型 ( 同 时 可 以 看 作 是 CSS 中 image 的 子 类 型 ), 如 : background: linear-gradient(to bottom, black, white) 就 构 建 了 一 个 从 上 至 下, 从 黑 到 白 的 线 性 渐 变, 如 图 3.33 所 示 截 止 到 本 书 撰 写 时,webkit 内 核 的 浏 览 器 还 没 有 去 掉 其 前 缀 -webkit-, 语 法 也 和 新 标 准 语 法 不 太 一 样 要 在 Chrome 或 Safari 图 3.33 linear-gradient 114

28 中 实 现 上 面 的 渐 变 效 果, 需 要 如 下 的 代 码 : background: -webkit-linear-gradient(top, black, white); 在 webkit 中,to 方 向 的 语 法 被 简 洁 地 实 现 为 (from) 方 向, 除 了 top 这 个 关 键 字 外, 聪 明 的 你 应 该 很 容 易 想 到 还 有 bottom left 和 right 几 个 值, 如 图 3.34 所 示 图 3.34 bottom left 和 right 的 渐 变 除 了 这 四 个 方 向, 也 可 以 通 过 指 定 具 体 的 角 度 数, 单 位 为 deg( 度 ), 如 图 3.35 所 示 图 3.35 指 定 角 度 的 渐 变 #div1 { background: -webkit-linear-gradient(45deg, black, white); #div2 { background: -webkit-linear-gradient(-45deg, black, white); #div3 { background: -webkit-linear-gradient(120deg, black, white); 第 一 个 参 数 省 略 时 渐 变 默 认 从 上 往 下 渲 染, 同 时 你 也 可 以 指 定 两 种 以 上 的 颜 色, 如 图 3.36 所 示 图 3.36 多 颜 色 渐 变 #div1 { background: -webkit-linear-gradient(black, white, gray); #div2 { background: -webkit-linear-gradient(gray, black, white); 115

29 第 1 篇 HTML 5 移 动 Web 开 发 基 础 #div3 { background: -webkit-linear-gradient(gray, black, white, gray); 每 一 个 逗 号 分 割 开 来 的 颜 色 值 也 可 以 紧 跟 一 个 颜 色 终 止 值 (color stops), 通 常 可 以 指 定 为 一 个 百 分 比 : background: -webkit-linear-gradient(top, black 20%, white 80%); 运 行 后 的 效 果 如 图 3.37 所 示 如 果 没 指 定, 则 颜 色 终 止 会 取 设 定 颜 色 的 中 位 值 ( 即 颜 色 变 化 均 匀 分 布 的 ), 如 果 为 矩 形 渐 变 设 置 了 角 度, 则 颜 色 的 起 始 位 置 和 终 止 位 置 的 计 算 将 进 行 相 应 的 变 化, 变 化 过 程 具 体 如 何 可 以 参 见 图 3.38 所 示 图 3.37 color stops 图 3.38 带 角 度 渐 变 的 计 算 附 上 线 性 渐 变 的 语 法 : linear-gradient( [ <angle> to <side-or-corner>,]? <color-stop> [, <color-stop>]+ ) <side-or-corner> = [left right] [top bottom] <color-stop> = <color> [ <percentage> <length> ]? 注 意 : 如 果 你 经 常 使 用 mozilla developer network 或 者 查 阅 W3C 的 文 档, 你 会 发 现 上 文 这 种 语 法 格 式 非 常 常 见, 这 是 一 种 标 准 的 语 法 文 档 格 式, 和 正 则 表 达 式 的 文 法 非 常 类 似 :* 表 示 0 个 或 多 个,+ 表 示 1 个 或 多 个,? 表 示 0 或 一 个,[] 表 示 可 选 的 分 组, 表 示 或, 尖 括 号 (<>) 括 起 来 表 示 一 种 CSS 类 型, 否 则 表 示 字 面 量 CSS 3 中 的 另 一 种 渐 变 是 径 向 渐 变 径 向 渐 变 是 以 圆 心 为 起 始 点, 向 外 发 散 的 一 种 渐 变, 如 图 3.39 所 示 图 3.39 径 向 渐 变 116 background-image: -webkit-radial-gradient(circle, black, white);

30 径 向 渐 变 和 线 性 渐 变 类 似, 也 可 以 指 定 不 同 的 方 向 和 多 个 颜 色 ( 及 终 止 值 ):.div1 { background-image: -webkit-radial-gradient(top, circle, black, white);.div2 { background-image: -webkit-radial-gradient(circle, black, white 20%, gray);.div3 { background-image: -webkit-radial-gradient(bottom, circle, black, gray 20%, black 40%,white 60%); 运 行 后 的 效 果 如 图 3.40 所 示 图 3.40 径 向 渐 变 circle 类 型 的 径 向 渐 变 表 示 渐 变 呈 正 圆, 相 应 的 也 有 ellipse 类 型 的 渐 变, 适 合 在 非 正 方 形 的 盒 内 使 用 :.div1 { background-image: -webkit-radial-gradient(ellipse, red, yellow 10%, #1E90FF 50%, white);.div2 { background-image: -webkit-radial-gradient(circle, red, yellow 10%, #1E90FF 50%, white); 运 行 后 的 效 果 如 图 3.41 所 示 图 3.41 ellipse 和 circle 此 外, 径 向 渐 变 的 尺 寸 还 可 以 用 farthest-corner( 最 远 的 角 ) 和 closest-side( 最 近 的 边 ) 两 个 关 键 字 来 控 制 :.div1 { background-image: -webkit-radial-gradient(circle farthest-corner, red, 117

31 第 1 篇 HTML 5 移 动 Web 开 发 基 础 yellow 10%, #1E90FF 50%, white);.div2 { background-image: -webkit-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); 运 行 后 的 效 果 如 图 3.42 所 示 图 3.42 径 向 渐 变 尺 寸 径 向 渐 变 和 线 性 渐 变 都 不 会 自 动 重 复, 还 好 有 repeating-linear-gradient 和 repeating-radial-gradient 属 性 提 供 了 重 复 渐 变, 这 样 可 以 轻 松 实 现 条 纹 的 效 果 :.div1 { background-image: -webkit-repeating-linear-gradient(-45deg, black, black 5px, white 5px, white 10px);.div2 { background-image: -webkit-repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px); 运 行 后 的 效 果 如 图 3.43 所 示 图 3.43 利 用 重 复 渐 变 实 现 条 纹 组 合 使 用 多 个 渐 变 甚 至 可 以 实 现 华 丽 的 床 单 效 果 : background-image: -webkit-repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), -webkit-repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, 118

32 rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), -webkit-repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), -webkit-repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); 运 行 后 的 效 果 如 图 3.44 所 示 图 3.44 条 纹 床 单 2. 阴 影 说 完 渐 变, 再 来 说 说 阴 影 CSS 阴 影 一 般 说 来 包 括 两 类, 一 类 是 文 字 阴 影, 另 一 类 是 盒 阴 影 文 字 阴 影 由 text-shadow 属 性 来 设 置, 白 色 的 字 套 上 简 单 的 一 层 带 高 斯 模 糊 的 黑 色 阴 影 就 可 以 产 生 常 见 的 立 体 字 效 果 : text-shadow:1px 1px 4px gray; 运 行 后 的 效 果 如 图 3.45 所 示 其 中, 第 一 和 二 个 值 表 示 阴 影 在 X 和 Y 方 向 上 的 位 移, 第 三 个 值 表 示 模 糊 (blur) 的 半 径, 最 后 一 个 表 示 阴 影 的 颜 色 同 样 的 文 字 可 以 设 置 多 个 阴 影, 每 组 阴 影 值 由 逗 号 隔 开, 通 过 多 个 阴 影 的 配 合, 可 以 实 现 一 些 有 趣 的 效 果 比 如 组 合 四 个 不 同 方 向 的 阴 影, 可 以 实 现 空 心 字 的 效 果 : text-shadow:-1px 0px 0px gray, 1px 0px 0px gray, 0px 1px 0px gray, 0px -1px 0px gray; 运 行 后 的 效 果 如 图 3.46 所 示 119

33 第 1 篇 HTML 5 移 动 Web 开 发 基 础 图 3.45 text-shadow 图 3.46 多 个 text-shadow 除 了 文 本 阴 影, 还 有 一 种 阴 影 是 盒 阴 影 (box-shadow) 盒 阴 影 和 文 本 阴 影 非 常 类 似, 不 过 它 的 作 用 对 象 不 是 文 字 而 是 页 面 中 的 框 ( 可 以 是 行 内 框 也 可 以 是 块 框 ):.div1 { display: inline; box-shadow:3px 2px gray;.div2 { box-shadow:3px 2px 5px gray; 运 行 后 的 效 果 如 图 3.47 所 示 盒 阴 影 的 形 状 与 盒 子 的 形 状 有 关, 而 且 加 上 inset 关 键 字 可 以 实 现 内 阴 影 : border-radius: 5em/2em; box-shadow: 1px 1px 5px gray, -1px -1px 5px gray inset; 运 行 后 的 效 果 如 图 3.48 所 示 图 3.47 盒 阴 影 图 3.48 内 阴 影 光 说 不 练 假 把 式, 还 是 来 一 个 使 用 渐 变 和 阴 影 的 真 实 案 例 吧! 渐 变 在 视 觉 上 可 以 产 生 强 烈 的 透 视 感 和 空 间 感, 被 广 泛 用 在 各 种 设 计 场 景 中, 比 如 最 最 常 见 的 立 体 按 钮 :.btn { /* 渐 变 函 数 返 回 css image 类 型 */ background-image: -webkit-linear-gradient(top, #adda4d, #86b846); text-shadow: 0 1px 0px rgba(255,255,255,.3); /* 加 上 亮 色 的 半 透 文 字 阴 影, 可 以 让 文 字 有 内 凹 感 */ border: 1px solid #6d8f29; color: #3e5e00!important; min-width: 56px; width: auto; border-radius:8px; -webkit-appearance: none; /* 去 掉 webkit 内 核 预 定 义 的 控 件 样 式 */ display:inline-block; padding:4px 8px; 120

34 运 行 后 的 效 果 如 图 3.49 所 示 如 果 为 按 钮 加 上 一 点 内 外 阴 影, 立 体 效 果 会 更 加 显 著 : box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,0 1px 0 rgba(0,0,0,.2); 为 了 确 保 它 在 尽 可 能 多 的 浏 览 器 中, 如 图 3.50 所 示 图 3.49 按 钮 图 3.50 按 钮 一 个 能 被 按 下 的 按 钮 的 设 计 自 然 不 应 少 了 被 按 下 的 状 态 :.btn:active { /* 在 背 景 颜 色 上 变 深, 渐 变 幅 度 变 小, 以 及 一 定 程 度 的 内 阴 影 可 以 实 现 按 钮 被 按 下 的 光 影 效 果 */ background: -webkit-linear-gradient(top, #9ac244, #78a53e); box-shadow: 0 1px 2px rgba(0,0,0,.3) inset; 运 行 后 的 效 果 如 图 3.51 所 示 图 3.51 按 钮 状 态 注 意 : 渐 变 和 阴 影 虽 然 在 移 动 设 备 上 被 广 泛 支 持, 但 是 由 于 阴 影 和 渐 变 的 渲 染 非 常 的 耗 费 CPU 资 源, 因 此 对 于 移 动 应 用 应 该 尽 量 少 用 这 些 设 计 元 素 自 定 义 字 体 之 所 以 把 自 定 义 字 体 单 独 拿 出 来 讲, 是 因 为 现 在 自 定 义 字 体 除 了 能 丰 富 网 站 阅 读 体 验, 更 重 要 的 是 可 以 很 大 程 度 上 替 代 图 片 的 使 用 早 几 年 间, 无 论 是 软 件 还 是 网 站 的 图 标 设 计 都 走 的 是 拟 物 化 和 卡 通 化 路 线, 如 图 3.52 所 示 近 两 年 图 标 设 计 界 中 流 行 元 素 越 来 越 趋 向 于 简 洁 和 扁 平 化, 如 图 3.53 所 示 图 3.52 早 年 间 的 图 标 设 计 图 3.53 近 两 年 的 图 标 设 计 121

35 第 1 篇 HTML 5 移 动 Web 开 发 基 础 正 是 这 样 的 流 行 趋 势 使 得 自 定 义 字 体 能 在 网 页 设 计 中 大 放 异 彩, 比 如 github 所 有 的 图 标 都 是 使 用 自 定 义 字 体 实 现 的, 如 图 3.54 所 示 用 自 定 义 字 体 实 现 图 标 有 几 个 明 显 的 好 处 : 字 体 文 件 小, 相 比 图 片 更 省 网 络 资 源 字 体 是 矢 量 元 素, 且 尺 寸 和 颜 色 都 可 以 使 用 CSS 控 制, 可 以 更 加 高 效 方 便 地 构 建 皮 肤 系 统 同 是 矢 量 的 原 因, 图 标 缩 放 自 如, 完 美 适 图 3.54 github 的 图 标 配 retina 屏 幕 兼 容 性 好 ( 甚 至 包 括 IE 6) 那 么 如 何 实 现 呢? 绘 制 图 标 和 制 作 字 体 的 过 程 你 可 能 需 要 用 到 PhotoShop illustrator 和 FontLab 等 软 件, 这 是 属 于 设 计 师 们 的 工 作, 在 这 里 不 做 更 多 详 细 说 明 假 设 我 们 现 在 有 这 样 一 个 ttf 格 式 的 icon.ttf 字 体 文 件, 那 么 我 们 先 要 利 规 则 (rule) 声 明 一 种 字 体 { /* 指 定 字 体 的 名 字 */ font-family: 'myfont'; /* 指 定 字 体 文 件 的 路 径 */ src: url('/icon.ttf'); 声 明 好 字 体 后, 便 可 以 在 各 种 地 方 使 用 它 了 : h2 { font-family: 'myfont'; 如 果 元 素 中 出 现 了 定 义 的 字 体 中 没 有 的 字 符, 那 么 会 fallback 到 系 统 默 认 字 体 进 行 显 示 自 定 义 字 体 在 用 作 图 标 时, 更 多 是 配 合 伪 元 素 content 属 性 来 实 现 :.icon-home { display: inline-block; width:16px; height:16px; /* 元 素 本 身 设 置 宽 高 用 于 占 位 */.icon-home:after { font-family: 'myfont'; width:16px; height:16px; /* 元 素 本 身 设 置 宽 高 用 于 占 位 */ margin-left: -16px; /* 向 左 移 动 16px, 使 得 字 符 正 好 填 充 原 始 元 素 */ content: '\f24f'; /* 这 里 可 以 使 用 unicode 编 码, 也 可 以 使 用 具 体 的 字 符, 这 取 决 于 你 字 体 文 件 中 字 形 的 具 体 字 符 是 什 么 */ 对 于 大 部 分 前 端 工 程 师 而 言, 并 没 有 太 多 功 夫 或 者 能 力 去 设 计 和 制 作 自 己 想 用 的 字 体 图 标, 得 益 于 开 源 世 界 的 馈 赠 几 乎 绝 大 部 分 在 开 发 一 个 网 站 或 应 用 所 会 用 到 的 图 标, 都 有 合 适 的 且 免 费 的 方 案, 在 这 里 推 荐 一 个 github 上 热 门 的 字 体 项 目 Font Awesome, 它 包 含 了 所 有 bootstrap 项 目 中 的 图 标 和 其 他 额 外 总 计 249 个 图 标, 甚 至 还 包 含 附 赠 一 些 带 有 动 画 效 果 的 字 体 样 式, 如 图 3.55 所 示 122

36 图 3.55 font awesome 项 目 更 多 关 于 font awesome 的 内 容 可 参 见 注 意 : 自 定 义 字 体 的 文 字 多 用 于 广 告 海 报 艺 术 字 和 标 题 字 等 设 计 场 景, 欧 美 国 家 在 字 体 设 计 方 面 有 着 先 天 的 优 势 英 文 字 母 一 共 就 26 个, 即 便 算 上 大 小 写 数 字 特 殊 字 符 也 才 一 共 100 来 个 字 形 ( 其 他 西 欧 文 字 也 类 似 ) 而 对 于 以 咱 们 国 家 ( 以 及 其 他 使 用 CJK 文 字 的 国 家 ) 为 代 表 的 象 形 文 字 因 为 字 符 集 庞 大, 动 辄 上 万 字 的 字 符 量 使 得 开 发 一 种 新 字 体 的 工 作 量 会 异 常 巨 大, 所 以 时 至 今 日 中 文 字 体 也 没 有 太 多 品 种 可 供 选 择, 万 幸 的 是 现 在 已 经 有 越 来 越 多 的 能 人 志 士 认 识 到 字 体 排 印 工 作 的 重 要 性 并 投 身 到 其 中 来, 中 文 字 体 的 兴 盛 相 信 也 指 日 可 待 3.5 CSS 3 布 局 之 道 布 局 是 CSS 中 经 久 不 衰 的 话 题, 从 过 去 的 table 布 局 到 浮 动 布 局 再 到 而 今 的 响 应 式 布 局, 这 些 布 局 技 术 或 者 技 巧 的 研 究 总 是 能 掀 起 网 页 开 发 的 一 股 股 潮 流 随 着 移 动 互 联 网 的 发 展 以 及 和 传 统 互 联 网 的 进 一 步 融 合, 掌 握 多 环 境 下 的 布 局 技 术 对 前 端 开 发 人 员 越 来 越 重 要 CSS 3 自 然 不 会 逆 着 历 史 洪 流 而 行,CSS 3 中 提 供 了 许 多 新 技 术 用 于 页 面 ( 乃 至 其 他 媒 体 ) 的 布 局 炒 冷 饭 负 边 距 与 浮 动 浮 动 布 局 大 概 是 Web 世 界 最 被 广 泛 使 用 的 布 局 方 式 了, 配 合 负 边 距 的 使 用, 能 实 现 许 多 自 适 应 强 易 扩 展 的 效 果 著 名 的 有 双 飞 翼 布 局 ( 又 称 圣 杯 布 局 ): <div id="page"> <div id="hd"> <p>header</p> </div> <div id="bd"> <div class="main"> <div class="main-wrap"> <p>main</p> </div> </div> 123

37 <div class="sub"> <p>sub</p> </div> <div class="extra"> <p>extra</p> </div> </div> <div id="ft"> <p>footer</p> </div> </div> 第 1 篇 HTML 5 移 动 Web 开 发 基 础 对 于 上 面 的 文 档 结 构, 要 实 现 的 效 果 是 sub 和 extra 区 域 固 定 宽 度,main 区 域 出 现 在 中 间 且 随 窗 口 尺 寸 自 动 变 化 双 飞 翼 布 局 的 基 本 思 路 是 让 三 个 盒 子 都 向 左 浮 动, 同 时 将 sub 盒 向 左 移 动 距 离 ( 即 margin-left: -100%), 这 样 sub 将 会 重 叠 在 main 盒 上 面 并 紧 贴 父 元 素 左 边 缘,extra 盒 也 做 同 样 的 处 理, 不 过 只 向 左 移 动 230px, 这 样 就 让 extra 紧 贴 父 元 素 的 右 边 缘 放 置,main-wrap 盒 再 施 以 合 适 的 左 右 边 距, 便 可 以 实 现 图 3.56 所 示 的 布 局 效 果 图 3.56 双 飞 翼 布 局 这 种 布 局 可 以 保 证 主 要 内 容 (main) 在 整 个 文 档 中 靠 前 出 现, 这 样 在 网 速 比 较 慢 时 重 要 内 容 也 能 率 先 渲 染 出 来 此 外, 该 布 局 能 够 随 屏 幕 尺 寸 变 化 自 动 伸 缩 主 区 域, 而 且 其 布 局 思 想 也 可 以 轻 易 扩 展 到 左 右 两 栏 的 场 景 栅 格 系 统 与 多 列 布 局 从 上 面 的 例 子 可 以 看 出, 利 用 浮 动 可 以 很 方 便 地 实 现 栅 格 系 统, 进 而 实 现 多 列 布 局 比 如 一 个 简 单 的 960 像 素 宽 的 4 列 栅 格 系 统 :.row { width: 960px;.row:after { clear: left; content: ''; display: table; /* 清 除 行 中 浮 动 */ [class^="col"] { float: left; 124

38 .col1 { width: 25%;.col2 { width: 50%;.col3 { width: 75%; 很 简 单 对 吧? 使 用 它 也 非 常 简 单 : <div class="row"> <div class="col1">.col1 </div> <div class="col2">.col2 </div> <div class="col1">.col1 </div> </div> 最 终 效 果 类 似 于 图 3.57 所 示 图 3.57 简 单 栅 格 系 统 同 样 的 原 理, 可 以 轻 易 扩 展 到 8 12 列 甚 至 16 列 的 栅 格 系 统 栅 格 系 统 虽 然 可 以 实 现 按 列 布 局, 但 是 却 不 能 实 现 分 栏 布 局, 分 栏 布 局 多 见 于 纸 质 出 版 物 CSS 3 中 提 出 了 多 列 布 局 模 块 (Multi-column Layout Module) 可 以 满 足 这 一 需 求 : #paragraph { /* 列 数 */ -webkit-column-count: 2; /* 指 定 每 列 固 定 宽 度, 但 列 的 实 际 宽 度 和 容 器 宽 度 也 有 关 系 */ -webkit-column-width: 10em; /* 列 与 列 中 间 的 空 隙 */ -webkit-column-gap: 5em; /* 列 中 间 的 分 割 线, 类 似 border 的 值 */ -webkit-column-rule: 6px solid blue; 放 在 段 落 里 的 内 容 最 后 的 布 局 如 图 3.58 所 示 图 3.58 多 列 布 局 CSS 3 多 列 布 局 模 块 在 一 定 程 度 上 增 强 了 HTML 文 档 的 表 现 力, 也 使 得 HTML 相 关 技 术 能 应 用 在 更 广 的 场 景, 如 电 子 出 版 领 域 125

39 第 1 篇 HTML 5 移 动 Web 开 发 基 础 弹 性 盒 布 局 (Flexible Box) Flexible 在 英 文 中 的 本 意 是 可 弯 曲 的 柔 韧 的 不 得 不 赞 叹 的 是,CSS 3 中 Flexible Box 所 呈 现 出 的 特 性 无 比 契 合 它 柔 韧 的 本 意 先 试 想 这 样 一 种 再 常 见 不 过 的 需 求 : 在 一 个 页 面 的 header 里 存 在 一 些 导 航 按 钮, 页 面 要 适 应 各 种 屏 幕 分 辨 率 ( 包 括 手 持 设 备 ), 要 求 这 些 按 钮 能 均 匀 排 满 整 个 页 面 ( 且 只 有 一 行 ) <div class="header"> <a class="a" href="/home"> 主 页 </a> <a class="b" href="/about"> 关 于 </a> <a class="c" href="/archive"> 存 档 </a> </div> 可 能 你 的 脑 海 里 会 立 马 蹦 出 来 浮 动 两 字 儿 嗯, 没 错, 利 用 浮 动 加 上 相 对 父 元 素 百 分 比 的 宽 度 可 以 实 现 这 一 点 :.header {.clearfix; /* 伪 代 码, 清 除 header 的 浮 动 */ a { /* 浮 动 加 百 分 比 宽 度 */ float: left; width: 33.33%; display: block; text-align: center; outline: 1px solid gray; 运 行 后 的 效 果 如 图 3.59 所 示 图 3.59 浮 动 实 现 这 时 候 棘 手 的 问 题 来 了, 要 是 这 些 导 航 按 钮 的 数 目 不 是 固 定 的, 怎 么 办? 仔 细 想 想, 似 乎 可 以 将 A 标 签 display 为 inline-block, 然 后 text-align:justify? 思 路 不 错, 可 惜 jusify 本 来 是 用 来 做 文 字 排 版, 对 于 单 行 的 情 况, 将 失 去 分 散 对 齐 的 作 用, 即 便 使 用 伪 元 素 硬 生 生 在 其 后 插 入 一 行, 也 不 能 解 决 容 器 高 度 增 长 的 问 题 纯 CSS 已 经 没 辙 了, 看 来 只 能 借 助 于 JavaScript, 当 导 航 栏 里 面 的 按 钮 数 目 变 化 时, 动 态 计 算 其 width 应 该 是 多 少 但 用 JavaScript 来 做 排 版 用 总 归 有 点 麻 烦, 要 是 这 时 候 再 提 出 需 要 鼠 标 hover 时 自 动 按 比 例 增 长 相 应 条 目 愿 上 天 保 佑 你 的 产 品 经 理 想 象 力 贫 乏 不 堪 不 过 也 不 要 怕, 救 星 来 了, 看 看 用 flexible box 怎 么 实 现 上 面 这 些 奇 葩 需 求 : 126.header { /* 容 器 */ display: -webkit-flex; a { text-align: center;

40 -webkit-flex: 1; a:hover { /* 鼠 标 移 入 时 变 宽 一 点 点 */ width: 160px; 运 行 后 的 效 果 如 图 3.60 所 示 图 3.60 弹 性 盒 实 现 什 么? 已 经 好 了? 没 错, 已 经 完 美 实 现 上 面 的 需 求 弹 性 盒 就 是 这 样 神 奇 的 东 西, 且 听 我 在 下 文 细 细 道 来 弹 性 盒 和 表 格 定 位 块 (display:block) 等 一 样 是 一 种 针 对 元 素 框 的 布 局 模 式 (layout mode), 它 专 为 不 同 尺 寸 和 不 同 设 备 的 元 素 排 布 而 设 计, 可 以 说 它 就 是 为 移 动 而 生 的 强 大 技 术 弹 性 盒 利 用 弹 性 盒 实 现 以 往 需 要 多 种 技 术 配 合 才 能 实 现 的 常 规 布 局 将 变 得 异 常 容 易, 也 无 须 考 虑 浮 动 塌 陷 和 边 距 折 叠 等 恼 人 的 问 题 从 上 例 可 以 看 到, 弹 性 盒 非 常 易 于 使 用, 利 用 display:flex 可 以 定 义 一 个 弹 性 盒 (flexbox) 容 器, 在 这 个 容 器 内 的 子 元 素 能 够 以 水 平 方 向 排 列, 其 子 元 素 的 flex 属 性 设 置 为 1 表 示 每 个 子 元 素 都 占 据 父 元 素 水 平 方 向 的 一 份 空 间, 这 样 其 尺 寸 能 够 自 动 填 充 适 应 其 可 显 示 的 空 间, 也 可 以 单 独 为 每 个 子 元 素 设 置 它 所 占 父 元 素 的 比 例 :.A,.C { -webkit-flex: 1;.B { -webkit-flex: 2; 这 种 情 况 父 元 素 将 被 分 成 四 等 分,B 元 素 占 两 份, 如 图 3.61 所 示 图 3.61 弹 性 盒 的 空 间 划 分 当 然, 弹 性 盒 能 做 的 远 不 止 此, 容 器 内 的 子 元 素 其 实 可 以 按 任 意 方 向 ( 水 平 或 者 垂 直 ) 分 布, 宽 高 的 比 例 也 可 以 自 由 调 整, 甚 至 元 素 显 示 的 顺 序 也 可 以 随 意 指 定 真 正 做 到 最 终 渲 染 与 源 码 无 关 可 以 大 言 不 惭 的 说, 几 乎 所 有 能 够 用 大 脑 想 到 的 页 面 布 局 弹 性 盒 都 能 胜 任, 而 且 在 代 码 层 面 可 以 做 到 十 分 优 雅 要 深 刻 理 解 弹 性 盒, 必 须 先 将 弹 性 盒 与 其 他 盒 子 完 全 分 开 来 对 待, 它 和 inline 和 block 元 素 都 不 再 是 一 路 人, 各 种 文 档 流 浮 动 定 位 规 则 也 都 不 再 适 用 于 它, 如 图 3.62 所 示 对 照 这 幅 图 需 要 理 解 这 样 几 个 核 心 概 念 1. 弹 性 容 器 (flex container) display 属 性 为 flex 或 者 inline-flex 的 元 素 将 会 变 成 一 个 弹 性 容 器 如 果 是 flex, 那 么 127

41 第 1 篇 HTML 5 移 动 Web 开 发 基 础 对 于 容 器 外 的 元 素 它 将 表 现 得 和 block 类 似, 占 据 一 整 行 空 间, 边 距 也 会 与 其 他 元 素 发 生 折 叠, 而 inline-flex 则 表 现 得 和 inline-block 类 似 图 3.62 弹 性 盒 核 心 概 念 2. 弹 性 项 (flex item) 弹 性 容 器 内 的 子 元 素 将 自 动 成 为 可 供 布 局 的 弹 性 项, 如 果 弹 性 容 器 中 包 含 子 文 本 节 点, 则 这 些 文 本 节 点 会 被 包 裹 进 匿 名 弹 性 项 中 ( 和 匿 名 行 框 类 似 ) 3. 轴 线 (Axis) 默 认 情 况 下 弹 性 容 器 中 的 子 元 素 将 在 水 平 方 向 上 排 布, 这 是 因 为 弹 性 容 器 的 主 轴 线 (main axis) 在 未 指 定 的 情 况 下 是 基 于 行 (row) 的, 与 主 轴 线 垂 直 相 交 的 自 然 是 副 轴 线 (cross axis) 主 轴 线 可 以 通 过 给 弹 性 容 器 设 置 flex-flow 属 性 来 改 变 : <div class="flex-box"> <div class="a"> A </div> <div class="b"> B </div> <div class="c"> C </div> </div> 虽 然 源 码 中 是 按 A B C 排 列, 通 过 将 flex-flow 设 置 为 column-reverse 实 现 按 列 逆 序 排 列 :.flex-box { display: -webkit-flex; /* flex-flow 可 以 被 设 为 row row-reverse column 和 column-reverse 四 种 值 */ -webkit-flex-flow: column-reverse; 128

42 运 行 后 的 效 果 如 图 3.63 所 示 元 素 在 弹 性 容 器 里 的 排 布 和 轴 线 方 向 是 一 致 的, 对 于 从 左 至 右 的 书 写 环 境 (wrting mode), 主 轴 线 若 被 设 置 为 row, 则 其 开 始 方 向 (main start) 是 容 器 的 左 边 缘 结 束 方 向 (main end) 在 右 边 缘 如 果 是 column-reverse, 则 开 始 方 向 将 变 成 容 器 下 边 缘 副 轴 线 类 似 的 也 有 开 始 方 向 (cross start) 和 结 束 方 向 (cross end) 图 3.63 按 列 逆 向 排 布 除 了 定 义 弹 性 项 的 排 布 方 向, 轴 线 对 弹 性 项 在 轴 线 方 向 上 的 对 齐 (align) 也 有 很 大 影 响 flex-direction: 实 际 上 flex-flow 属 性 是 flex-direction 和 flex-wrap 的 快 捷 方 式, flex-direction 定 义 了 排 布 是 按 行 还 是 按 列 也 就 是 说 定 义 了 主 轴 线 的 方 向 flex-wrap 可 以 控 制 在 弹 性 项 宽 度 ( 或 者 高 度 ) 超 过 主 轴 线 长 度 时 是 否 折 行 justify-content: 对 于 弹 性 项 没 有 填 满 弹 性 容 器 的 情 况,justify-content 定 义 了 弹 性 项 们 在 主 轴 线 上 如 何 对 齐, 可 以 左 右 对 齐 (flex-start 或 flex-end), 也 可 以 居 中 (center), 分 散 对 齐 有 两 种 情 况, 一 种 是 space-around, 元 素 会 均 匀 分 布 : 另 一 种 是 space-between, 两 边 的 元 素 会 紧 靠 边 缘 : align-content:justify-content 控 制 元 素 在 主 轴 线 的 排 布,align-content 则 控 制 元 素 在 副 轴 线 上 排 布 当 然 前 提 是 容 器 的 高 度 要 大 于 子 元 素 高 度 才 会 生 效, 可 取 的 值 有 flex-start flex-end center space-between space-around stretch 相 比 于 129

43 第 1 篇 HTML 5 移 动 Web 开 发 基 础 justify-content 多 了 一 种 stretch, 此 时 会 将 元 素 拉 伸 成 和 容 器 一 样 高 : align-items: 在 元 素 高 度 不 一 致 时 ( 或 者 说 在 副 轴 线 方 向 的 尺 寸 不 一 致 时 ) 的 对 齐 方 式 4. 方 向 (Directions) 除 了 flex-direction 可 以 指 定 主 轴 线 的 方 向 (*-reverse 反 向 ), 对 每 个 弹 性 项 应 用 order 属 性 可 以 指 定 一 个 元 素 在 主 轴 线 上 出 现 的 顺 序 :.A { -webkit-order: 2;.B { -webkit-order: 3;.C { -webkit-order: 1; 运 行 后 的 效 果 如 图 3.64 所 示 图 3.64 指 定 顺 序 显 示 5. 尺 寸 (Dimensions) 弹 性 项 的 具 体 尺 寸 通 常 来 讲 是 不 可 知 的, 且 不 再 被 成 为 宽 和 高, 而 是 成 为 主 尺 寸 (main size) 和 副 尺 寸 (cross size) 对 具 体 弹 性 项 应 用 flex 属 性 可 以 调 整 该 项 的 尺 寸 flex 属 性 实 际 是 下 面 三 个 属 性 的 简 写 flex-basis: 指 定 弹 性 项 的 基 准 尺 寸, 可 以 是 任 意 长 度 单 位, 默 认 情 况 下 是 auto, 这 时 弹 性 项 的 具 体 尺 寸 由 flex-grow flex-shrink 属 性 和 容 器 的 尺 寸 共 同 决 定 flex-grow: 指 定 一 个 自 然 数, 以 容 器 主 轴 线 的 份 数 来 定 义 弹 性 项 的 主 尺 寸 flex-shrink: 同 样 是 自 然 数, 指 定 弹 性 项 的 收 缩 因 子 (flex shrink factor), 这 意 味 130

44 着, 当 指 定 了 弹 性 项 的 基 准 尺 寸 但 容 器 的 尺 寸 却 小 于 所 有 弹 性 项 基 准 尺 寸 的 和 时, 就 以 flex-shrink 指 定 的 份 数 来 分 配 空 间, 反 之 则 使 用 flex-grow 的 值 来 分 配 空 间 ( 如 果 没 有 指 定 flex-basis 的 值,flex-shrink 的 值 不 会 起 作 用 ) 由 于 弹 性 盒 是 一 种 全 新 的 布 局 模 式, 因 此 应 用 了 flex 相 关 属 性 的 元 素 将 不 再 受 float clear vertical-align 等 和 定 位 相 关 属 性 的 影 响 ( 也 包 括 column-* 相 关 属 性 ), 这 一 点 请 务 必 切 记 此 外, 截 止 到 撰 稿 时 弹 性 盒 被 大 多 数 现 代 浏 览 器 ( 不 包 括 IE 9) 部 分 支 持, 如 果 你 想 要 在 ios 和 Android 平 台 使 用 都 是 没 有 问 题 的, 但 是 记 得 加 -webkit- 前 缀, 对 于 实 现 了 老 版 本 弹 性 盒 的 浏 览 器,CSS 的 写 法 可 能 会 有 些 许 不 同 (-webkit-flex 属 性 可 能 会 写 作 -webkit-box 属 性 ) 3.6 动 起 来 jquery 如 此 广 泛 流 行 的 一 个 重 要 原 因 就 是 其 功 能 强 大 而 使 用 简 单 的 动 画 方 法, 然 而 网 页 设 计 对 动 画 要 求 越 来 越 高, 基 于 JavaScript 的 动 画 效 果 无 论 从 实 现 上 还 是 性 能 上 对 于 开 发 者 来 讲 都 是 巨 大 的 考 验 CSS 3 动 画 相 关 模 块 的 提 出 解 放 了 JavaScript 程 序 员, 配 合 CSS 3 的 变 形 模 块, 设 计 人 员 可 以 轻 易 实 现 复 杂 绚 丽 的 动 画 效 果 本 节 内 容 将 简 单 介 绍 CSS 变 形 和 动 画 相 关 的 内 容 CSS 变 形 (CSS transform) 对 于 最 终 显 示 在 浏 览 器 中 的 HTML 元 素 ( 文 字 或 者 图 片 ) 而 言, 它 们 本 质 上 都 是 绘 制 到 屏 幕 上 的 图 形,CSS 3 变 形 模 块 提 供 了 对 页 面 上 文 字 和 图 片 进 行 旋 转 缩 放 倾 斜 和 移 动 的 能 力 transform 和 transform-origin 是 CSS 变 形 最 主 要 的 两 个 属 性,transform 指 定 要 对 元 素 进 行 哪 些 变 形,transform-origin 则 指 定 变 形 的 起 始 位 置 最 基 本 的 变 形 是 旋 转 (rotate): #div1 { background: yellow; width :200px; -webkit-transform: rotate(20deg); 运 行 后 的 效 果 如 图 3.65 所 示 除 了 rotate 函 数, 变 形 函 数 还 有 skewx( 倾 斜 ) translate( 位 移 ) 和 scale( 缩 放 ) 几 种 基 本 变 形 函 数, 他 们 的 效 果 如 图 3.66 所 示 通 过 设 置 transform-origin 可 以 指 定 元 素 变 形 基 于 的 原 点, 比 如 : 图 3.65 基 本 变 换 旋 转 131

45 第 1 篇 HTML 5 移 动 Web 开 发 基 础 图 3.66 常 见 变 形 函 数 #div1 { -webkit-transform-origin: top left; #div2 { -webkit-transform-origin: center 140px; 运 行 后 的 效 果 如 图 3.67 所 示 图 3.67 改 变 变 形 的 默 认 原 点 transform-origin 最 多 接 受 三 个 值, 分 别 是 x y 和 z 三 个 轴 向 的 偏 移 量, 其 语 法 是 : transform-origin: [ <percentage> <length> left center right top bottom] [ [ <percentage> <length> left center right ] && [ <percentage> <length> top center bottom ] ] <length>? 既 然 transform-origin 都 拥 有 z 轴 偏 移, 那 transform 自 然 没 理 由 不 支 持 3D 变 形 相 比 与 前 面 介 绍 的 2D 变 形 函 数, 其 实 也 就 多 了 3d 的 后 缀 而 已 : body { -webkit-perspective: 100px;.div1 { 132

46 /* 参 数 前 三 个 值 分 别 表 示 旋 转 时 基 于 的 x y 和 z 轴 的 坐 标, 取 值 为 number */ -webkit-transform: rotate3d(1, 2.0, 3.0, 10deg);.div2 { /* 三 个 参 数 表 示 元 素 基 于 x y 和 z 轴 移 动 的 长 度 值, 其 中 z 轴 上 的 移 动 在 视 觉 上 依 赖 于 页 面 透 视 空 间 的 深 度 */ -webkit-transform: translate3d(10px, -20px, -10px);.div3 { /* 同 样 针 对 x y 和 z 轴 进 行 缩 放, 要 注 意 z 轴 的 缩 放 和 元 素 在 z 轴 上 的 位 置 相 关 */ -webkit-transform: scale3d(0.8, 1.2, 2) translatez(5px); 运 行 后 的 效 果 如 图 3.68 所 示 图 d 变 形 1. 透 视 (perspective) 要 理 解 3d 变 形, 关 键 是 理 解 透 视 这 个 概 念 在 上 面 的 例 子 中, 我 们 给 body 设 置 了 perspective 属 性, 它 表 示 了 某 元 素 的 深 度, 比 如 现 在 要 实 现 一 个 六 面 体 : <div class="cube"> <div class="middle"></div> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> 然 后 对 六 个 面 进 行 变 形 :.cube > div { display: block; position: absolute; width: 100px; height: 100px; 133

47 第 1 篇 HTML 5 移 动 Web 开 发 基 础 line-height: 100px; font-size: 60px; color: white; text-align: center;.middle { /* middle 用 来 展 示 基 准 面 */ border: 1px dashed black; background: transparent;.front { border: none; background: rgba( 0, 0, 0, 0.3 ); -webkit-transform: translatez( 50px );.back { background: rgba( 0, 255, 0, 1 ); -webkit-transform: translatez( -50px );.right { background: rgba( 196, 0, 0, 0.7 ); -webkit-transform: rotatey( 90deg) translatez( 50px );.left { background: rgba( 0, 0, 196, 0.7 ); -webkit-transform: rotatey(-90deg) translatez( 50px );.top { background: rgba( 196, 196, 0, 0.7 ); -webkit-transform: rotatex( 90deg) translatez( 50px );.bottom { background: rgba( 196, 0, 196, 0.7); -webkit-transform: rotatex( -90deg) translatez( 50px ); 如 果 我 们 没 有 设 置 任 何 透 视 属 性, 那 么 最 终 的 结 果 是 没 有 结 果, 如 图 3.69 所 示 图 3.69 失 败 的 六 面 体 为 cube 元 素 加 上 透 视 现 在 我 们 为 cube 元 素 加 上 透 视 :.cube { width: 200px; height: 200px; /* 透 视 深 度 */

48 -webkit-perspective: 250px; /* preseve-3d 指 定 元 素 的 子 元 素 在 3d 空 间 内 定 位 */ -webkit-transform-style: preserve-3d; /* 指 定 用 户 从 哪 个 方 向 看 过 来 的 */ -webkit-perspective-origin: -100% -50%; 运 行 后 的 效 果 如 图 3.70 所 示 图 3.70 成 功 的 六 面 体 注 意 : 无 论 是 3D 还 是 2D 变 形, 其 实 从 本 质 上 而 言 都 是 矩 阵 变 换 (matrix transform) 的 结 果 CSS 中 也 提 供 了 更 加 底 层 的 matrix 和 matrix3d 函 数,skew translateh 和 translate3d 等 函 数 其 实 都 是 matrix 和 matrix3d 函 数 的 特 例, 理 解 矩 阵 变 换 如 何 作 用 于 元 素 需 要 一 定 的 线 性 代 数 和 三 角 函 数 相 关 知 识, 囿 于 篇 幅 和 主 题 原 因 本 书 也 不 再 展 开 讲 解, 有 兴 趣 的 读 者 可 以 自 行 研 究 CSS 过 渡 (CSS Transitions) 页 面 动 画 在 很 长 一 段 时 间 里 都 是 JavaScript 的 专 利, 写 一 个 div 在 hover 时 向 右 移 动 100px 的 动 画 效 果 可 能 得 这 样 : <html> <head> <title></title> <style> #div1 { width: 40px; height: 40px; position: relative; background: #ccc; padding: 5px; </style> </head> <body> <div id="div1"> hover 135

49 第 1 篇 HTML 5 移 动 Web 开 发 基 础 右 移 </div> <script> var div = document.getelementbyid('div1'), timer1, timer2 div.onmouseover = function (e) { clearinterval(timer2) timer1 = setinterval(function () { var curleft = parseint(div.style.left) 0 if (curleft > 100) { clearinterval(timer1) else { div.style.left = curleft + 1, 2) div.onmouseout = function (e) { clearinterval(timer1) var timer2 = setinterval(function () { var curleft = parseint(div.style.left) 0 if (curleft <= 0) { clearinterval(timer2) else { div.style.left = curleft - 1, 2) </script> </body> </html> 代 码 冗 长 不 堪, 不 支 持 动 画 时 长 和 缓 动 等 效 果, 而 且 还 有 潜 在 的 性 能 问 题 利 用 jquery, 代 码 可 以 简 化 许 多, 最 终 可 能 是 这 样 : $('#div1').mouseenter(function (e) { $(this).stop().animate({'left': 100) ).mouseleave(function (e) { $(this).stop().animate({'left': 0) ) 而 利 用 CSS 3 transition, 可 以 不 写 一 行 JavaScript 代 码 实 现 上 面 的 动 画, 而 且 效 果 完 美 : #div1 { transition: all 0.8s; #div1:hover { left: 100px; transition 动 画 的 关 键 在 于 元 素 状 态 的 变 迁, 如 果 没 有 设 置 transition 动 画, 则 两 个 状 态 的 变 迁 是 瞬 时 的, 如 果 设 置 了 transition 动 画, 则 两 个 状 态 之 间 的 中 间 状 态 将 会 被 自 动 计 算, 并 以 动 画 形 式 进 行 状 态 变 迁 举 例 来 说, 我 们 给 一 张 图 片 设 置 如 下 CSS: img { /* 匹 配 的 img 元 素 在 width 或 height 发 生 改 变 时 会 以 动 画 形 式 变 化, 且 动 画 时 长 为 一 秒 */ transition: width 1s, height 1s; 如 果 它 在 起 始 状 态 下 的 尺 寸 是 , 我 们 通 过 JavaScript 将 其 尺 寸 的 结 束 状 态 设 置 为 : 136

50 var img = document.getelementbyid('img1') img.style.width = 180 img.style.height= 90 这 时 候 图 片 会 动 态 改 变 其 尺 寸 大 小, 如 图 3.71 所 示 图 3.71 CSS transition 原 理 示 意 可 以 应 用 transition 的 属 性 非 常 多,width margin color background-color opacity 甚 至 transform 属 性 也 可 以 被 动 画 化 :.box { width: 100px; height: 100px; background-color: #0000FF; -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;.box:hover { /* 鼠 标 hover 时 放 大 并 变 色, 同 时 旋 转 180 度 */ width:200px; height:200px; background-color: #FFCCCC; -webkit-transform:rotate(180deg); 如 果 配 合 3D transform, 用 CSS 就 可 以 实 现 3D 动 画 了 transition 是 一 个 复 合 属 性, 由 以 下 属 性 构 成 transition-property: 应 用 动 画 的 属 性, 如 果 使 用 关 键 字 all, 那 么 只 要 支 持 动 画 的 属 性 在 状 态 变 迁 时 都 会 以 动 画 过 渡 transition-duration: 动 画 过 渡 的 时 长, 使 用 秒 (s) 或 者 毫 秒 (ms) 作 单 位 transition-timing-function: 缓 动 函 数, 默 认 是 ease( 先 慢 后 快 然 后 再 慢 ), 你 也 可 以 设 置 ease-in( 先 慢 后 快 ) ease-out( 先 快 后 慢 ) 和 linear( 线 性 ) 等 等 预 设 函 数, 甚 至 还 有 steps 函 数 可 以 对 动 画 设 置 固 定 数 量 的 关 键 帧 如 果 你 熟 悉 三 次 贝 塞 尔 曲 线 (cubic Bezier curve) 的 基 本 原 理, 还 可 以 使 用 强 大 的 cubic-bezier 函 数 创 作 出 更 复 杂 缓 动 效 果 transition-delay: 动 画 开 始 前 的 延 迟 时 间 如 果 你 想 对 应 用 了 动 画 的 元 素 进 行 更 多 的 控 制, 可 以 在 JavaScript 侦 听 元 素 事 件 来 实 现 目 前 只 有 一 个 transitionend 事 件 在 动 画 结 束 后 触 发, 且 需 要 加 上 webkit 前 缀 : el.addeventlistener("webkittransitionend", updatetransition, true); 配 合 JavaScript, 实 现 一 些 有 趣 的 效 果 也 变 得 非 常 容 易, 下 面 给 出 一 个 小 球 跟 随 鼠 标 单 击 的 示 例 : 137

51 第 1 篇 HTML 5 移 动 Web 开 发 基 础 <html> <head> <style> #foo { border-radius:50px; width:50px; height:50px; background:#c44; position:absolute; top:0; left:0; -webkit-transition: all 1s; </style> </head> <body> <div id="foo"></div> <script> var f = document.getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.left = (ev.clientx-25)+'px'; f.style.top = (ev.clienty-25)+'px';,false); </script> </body> </html> CSS 动 画 (CSS Animations) transition 动 画 固 然 方 便, 但 它 也 有 一 些 难 以 克 服 的 缺 点 由 于 transition 只 针 对 两 个 状 态 之 间 的 变 化 进 行 动 画, 超 过 两 个 状 态 就 无 力 再 续 如 果 你 想 要 实 现 一 个 元 素 按 某 个 路 径 或 者 序 列 进 行 变 化,transition 就 无 法 实 现 你 的 需 求 还 好 CSS 3 中 提 供 了 Animations 模 块, 同 样 用 于 实 现 动 画 效 果, 但 提 供 了 相 比 transition 更 加 强 大 的 功 能 一 个 完 整 CSS Animations 由 两 部 分 组 成, 一 部 分 是 一 组 定 义 的 动 画 关 键 帧, 另 一 部 分 是 描 述 该 动 画 的 CSS 声 明 来 看 一 个 元 素 滑 动 入 场 的 动 画 slidein { from { margin-left: 100%; to { margin-left: 0%; /* div1 会 在 页 面 加 载 好 后 自 动 从 屏 幕 右 侧 滑 入 */ #div1 { -webkit-animation: slidein 3s; 可 以 看 到 我 们 使 规 则 (at-rule) 定 义 了 一 个 名 为 slidein 的 动 画, 使 用 了 它 的 元 素 的 状 态 会 从 左 边 距 100% 变 迁 到 也 可 以 使 用 百 分 比 来 控 制 动 画 的 时 间 轴 状 态 slidein { /* from 和 to 关 键 字 其 实 就 是 0% 和 100% 的 字 母 版 */ 138

52 from { margin-left: 100%; 70% { width: 60px; height: 60px; font-size: 150%; to { margin-left: 可 以 设 置 多 个 关 键 帧, 这 样 动 画 的 绚 丽 程 度 只 受 制 于 想 象 力 而 不 受 制 于 技 术 了 animation 属 性 用 于 指 定 具 体 的 动 画 以 及 动 画 的 时 长 等 行 为 和 transition 属 性 类 似, animation 也 是 N 多 子 属 性 的 简 写 版, 这 些 子 属 性 大 部 分 和 transition 也 类 似 animation-delay: 动 画 开 始 前 的 延 迟 animation-direction: 动 画 方 向, 设 置 为 reverse 的 话 就 会 从 to 移 动 到 from, 如 果 设 置 为 alternate 则 会 往 复 运 动, 类 似 还 有 alternate-reverse animation-duration: 动 画 时 长 animation-iteration-count: 动 画 重 复 的 次 数, 设 置 为 infinite 可 以 无 限 地 动 下 去 animation-name: 要 使 用 的 动 画 名 animation-play-state: 通 常 这 个 属 性 用 于 查 询 元 素 的 动 画 状 态 是 paused 还 是 running 的, 当 然 也 可 以 用 JavaScript 直 接 设 置 这 个 属 性 以 暂 停 或 恢 复 动 画 animation-timing-function: 缓 动 函 数, 和 transition 一 样, 可 以 设 置 任 意 合 法 的 timing-function 类 型 animation-fill-mode: 正 常 情 况 下 动 画 结 束 后 元 素 会 恢 复 至 动 画 开 始 前 的 初 始 状 态, 通 过 将 animation-fill-mode 设 置 为 forwards backwards 和 both 可 以 将 元 素 最 终 状 态 设 置 为 动 画 的 起 始 或 结 束 状 态 (forwards 等 属 性 的 具 体 效 果 还 要 依 赖 于 animation-direction 和 animation-iteration-count 的 值 ) 比 如 上 面 的 例 子 如 果 这 样 写, 那 么 会 使 元 素 滑 入 后 又 滑 出 : #div1 { -webkit-animation-name: slidein; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; -webkit-animation-fill-mode: forwards; 注 意 :CSS transition CSS Animations 和 其 他 CSS 技 术 一 样, 仅 仅 用 文 字 和 图 片 来 描 述 是 难 以 让 读 者 领 会 其 精 髓 的, 古 人 有 云 : 实 践 出 真 知, 这 话 在 计 算 机 技 术 相 关 领 域 尤 其 不 假, 建 议 读 者 多 多 在 真 实 的 浏 览 器 环 境 里 实 验 这 些 技 术, 体 会 各 种 差 异 和 transition 类 似,animation 也 提 供 了 一 些 事 件 用 以 控 制 动 画, 不 过 相 对 而 言 animation 的 事 件 种 类 更 加 丰 富 animationstart: 动 画 开 始 时 触 发 animationend: 动 画 结 束 时 触 发 animationiteration: 动 画 每 迭 代 一 次 触 发 一 次 该 事 件 139

53 第 1 篇 HTML 5 移 动 Web 开 发 基 础 这 三 种 类 型 的 事 件 对 象 中 都 有 一 个 elapsedtime 属 性, 它 表 示 距 离 动 画 开 始 已 经 过 去 了 多 少 时 间 <html> <head> <style type="text/css">.slidein { -webkit-animation-duration: 3s; -webkit-animation-name: slidein; -webkit-animation-iteration-count: 3; -webkit-animation-direction: slidein { from { margin-left:100%; to { margin-left:0%; </style> </head> <body> <div id="div1"> 飘 动 </div> <ul id="output"> </ul> <script> function listener(e) { var l = document.createelement("li"); switch(e.type) { case "webkitanimationstart": l.innerhtml = "Started: elapsed time is " + e.elapsedtime; break; case "webkitanimationend": l.innerhtml = "Ended: elapsed time is " + e.elapsedtime; break; case "webkitanimationiteration": l.innerhtml = "New loop started at time " + e.elapsedtime; break; document.getelementbyid("output").appendchild(l); function setup() { var e = document.getelementbyid("div1"); e.addeventlistener("webkitanimationstart", listener, false); e.addeventlistener("webkitanimationend", listener, false); e.addeventlistener("webkitanimationiteration", listener, false); e.classname = "slidein"; setup() </script> </body> </html> 这 个 页 面 最 终 输 出 结 果 如 图 3.72 所 示 140

54 图 3.72 Animation Events 何 时 使 用 何 时 不 用? 相 比 于 传 统 的 JavaScript 动 画, 基 于 CSS 的 动 画 有 这 样 一 些 优 点 (1) 易 于 使 用 :transition 和 animation 的 用 法 都 非 常 简 单, 创 建 动 画 甚 至 都 不 需 要 学 习 JavaScript (2) 效 果 平 滑 : 使 用 JavaScript 产 生 的 动 画 通 常 都 表 现 不 佳, 容 易 产 生 掉 帧 卡 顿 等 现 象, 而 CSS 动 画 即 便 在 较 低 的 系 统 负 载 下 也 可 以 运 行 的 平 滑, 而 且 渲 染 引 擎 还 可 以 使 用 跳 帧 (frame-skipping) 等 技 术 来 进 一 步 优 化 动 画 效 果 (3) 性 能 优 异 : 交 由 浏 览 器 控 制 的 动 画 序 列 意 味 着 浏 览 器 本 身 可 以 针 对 动 画 做 更 多 的 优 化 比 如 在 标 签 页 没 有 被 显 示 的 情 况 下, 浏 览 器 可 以 降 低 动 画 的 fps 甚 至 暂 停 DOM 重 绘 来 节 省 系 统 开 销 虽 然 CSS 动 画 优 点 多 多, 但 在 使 用 CSS 一 定 要 谨 慎 : (1) 即 便 性 能 优 异, 但 在 计 算 资 源 捉 襟 见 肘 的 移 动 设 备 上, 能 不 用 动 画 就 尽 量 不 用 (2)Android 设 备 尤 其 要 注 意, 浏 览 器 整 体 的 渲 染 性 能 都 远 差 过 ios 设 备 (3) 即 使 在 桌 面 上, 动 画 也 不 能 滥 用, 诸 如 背 景 整 体 移 动 这 样 的 动 画 效 果 很 可 能 会 导 致 页 面 的 滚 动 和 鼠 标 的 移 动 有 延 迟 现 象 (4)CSS 动 画 适 宜 用 在 一 些 页 面 细 节 设 计 或 者 转 场 设 计 上 面, 比 如 高 亮 链 接 LOGO 特 效 和 翻 页 转 场 等 等, 如 果 有 复 杂 的 长 时 间 的 动 画 的 需 求, 应 该 采 用 绘 图 效 率 更 优 的 canvas 技 术 注 意 :3.6 节 介 绍 的 所 有 技 术 截 止 到 撰 稿 时 都 还 在 实 验 阶 段, 相 关 标 准 还 处 于 比 较 早 期 的 阶 段, 但 是 浏 览 器 厂 商 们 的 跟 进 速 度 非 常 快, 因 此 不 用 担 心 支 持 问 题, 唯 一 要 担 心 的 是 恼 人 的 前 缀 (-o- -webkit- 和 -moz-), 无 论 是 属 性 还 是 事 件 在 使 用 时 都 不 要 忘 了 加 上 它 们 3.7 响 应 式 设 计 基 础 过 去 有 人 说, 一 个 人 如 果 连 IE 6 都 能 兼 容, 那 么 世 界 已 经 阻 止 不 了 他 了 而 今, 面 对 下 面 一 大 桌 设 备 的 时 候, 兼 容 IE 6 恐 怕 已 经 算 不 得 什 么 了, 如 图 3.73 所 示 响 应 式 Web 设 计 (Responsive Web Design) 是 ethan marcotte 在 2010 年 五 月 提 出 的 一 个 概 念, 他 在 Responsive Web Design 一 文 中 阐 述 了 在 不 同 尺 寸 的 屏 幕 下 如 何 做 不 同 的 布 局, 141

55 第 1 篇 HTML 5 移 动 Web 开 发 基 础 从 此 以 后 响 应 式 设 计 一 发 不 可 收 拾 近 几 年 整 个 前 端 开 发 领 域 这 个 概 念 被 炒 了 又 炒, 持 续 不 断 的 成 为 前 端 开 发 与 网 页 设 计 上 的 热 点 图 3.73 纷 繁 的 移 动 设 备 对 于 大 部 分 开 发 者 来 讲, 响 应 式 设 计 可 能 只 停 留 在 桌 面 版 和 移 动 版 共 享 一 套 代 码 这 个 层 面, 但 这 几 年 移 动 Web 的 飞 速 发 展 产 生 了 非 常 多 的 最 佳 实 践, 我 认 为 广 义 上 的 响 应 式 设 计 其 实 包 含 非 常 多 的 内 容, 从 前 端 技 术 角 度 而 言, 通 常 包 含 这 样 一 些 内 容 : 使 用 流 式 布 局 (fluid layout) 或 响 应 式 栅 格 (Responsive fluid grid) 以 适 应 不 同 屏 幕 宽 度 使 用 CSS 3 media queries 技 术 针 对 不 同 尺 寸 甚 至 不 同 类 型 屏 幕 实 现 一 套 代 码 多 套 布 局 或 者 进 行 样 式 微 调 使 用 流 式 图 片 (fluid images) 以 充 分 利 用 屏 幕 空 间 配 合 后 端 抽 象 出 HTML 模 块, 输 出 针 对 不 同 类 型 设 备 适 配 后 的 模 板 CSS JavaScript 或 者 其 他 资 源 接 下 来 让 我 们 来 详 细 看 看 这 些 技 术 分 别 都 是 些 什 么, 能 做 什 么 从 两 栏 布 局 开 始 说 起 六 年 前, 两 栏 或 三 栏 布 局 可 能 是 这 个 星 球 上 使 用 最 广 泛 的 页 面 布 局 方 式 了 当 iphone 席 卷 地 球 六 年 后 的 今 天, 网 页 的 布 局 方 式 已 经 是 一 栏 和 多 栏 布 局 平 分 天 下 了, 那 么 依 然 纠 缠 于 两 栏 布 局 的 你, 应 该 思 考 下 怎 么 向 一 栏 布 局 转 化 了 对 同 一 套 HTML 代 码 在 不 同 宽 度 的 屏 幕 上 实 现 图 3.74 中 两 套 布 局 可 能 是 响 应 式 布 局 中 最 最 基 础 的 示 例 了, 要 做 到 这 一 点 关 键 在 于 媒 体 查 询 (media queries) 的 使 用 针 对 不 同 设 备 应 用 不 同 的 CSS 不 过, 在 讲 media queries 之 前, 有 些 可 能 你 并 不 陌 生 但 却 有 不 甚 清 楚 的 概 念 我 们 需 要 重 新 审 视, 这 样 对 深 刻 理 解 媒 体 查 询 大 有 益 处 142

56 图 3.74 布 局 的 变 换 1.CSS 像 素 (CSS pixel) 与 设 备 像 素 (device pixel) 像 素 就 是 我 们 在 写 CSS 时 经 常 见 到 的 px, 随 着 retina 屏 幕 的 兴 起, 设 备 像 素 和 CSS 像 素 已 经 不 像 过 去 那 样 即 便 混 为 一 谈 也 不 会 导 致 任 何 问 题 设 备 像 素 通 常 指 的 是 屏 幕 上 最 小 的 发 色 单 元, 比 如 在 普 通 的 LCD 屏 幕 上, 任 意 一 个 发 色 单 元 都 由 红 绿 蓝 三 个 发 光 液 晶 单 元 构 成 而 CSS 像 素 通 常 与 屏 幕 分 辨 率 有 关, 比 如 在 一 块 ( 设 备 像 素 点 数 ) 的 24 英 寸 屏 幕 上, 我 们 假 设 屏 幕 的 设 备 像 素 点 是 正 方 形 的, 那 么 一 个 像 素 点 的 边 长 x 与 屏 幕 尺 寸 有 这 样 的 关 系, 如 图 3.75 所 示 图 3.75 计 算 设 备 像 素 点 大 小 计 算 得 出 一 个 像 素 点 x 的 边 长 大 约 为 英 寸 ( 换 算 成 mm 大 概 是 0.28mm), 如 果 在 这 块 屏 幕 上 运 行 的 操 作 系 统 的 分 辨 率 设 置 为 ( 即 ), 那 么 此 时 一 个 CSS 像 素 的 尺 寸 应 该 是 :0.011*1.5= 英 寸 2.PPI 和 设 备 像 素 比 (Device Pixel Ratio) PPI 通 常 被 翻 译 成 像 素 密 度, 其 原 意 是 Pixels per inch, 即 每 英 寸 像 素 数, 这 里 的 像 素 指 的 是 设 备 像 素, 对 于 前 文 提 到 的 例 子, 每 一 个 像 素 的 大 小 是 英 寸, 那 么 每 英 寸 的 像 素 数 大 概 就 是 90 个, 即 其 PPI 为 90 对 于 iphone 4 以 及 后 续 产 品, 其 PPI 达 到 了 326, 此 时 如 果 CSS 像 素 再 和 设 备 像 素 保 持 一 一 对 应, 人 眼 将 很 难 看 清 较 小 的 字 体 或 者 图 案, 因 此 类 似 iphone 4 这 样 的 retina 设 备, 在 系 统 上 采 取 了 折 中 的 办 法, 将 系 统 逻 辑 分 辨 率 调 整 为 物 理 分 辨 率 的 1/2 或 者 2/3, 或 者 说 使 物 理 分 辨 率 是 逻 辑 分 辨 率 的 2 倍 或 1.5 倍, 这 样 就 能 使 肉 眼 既 能 得 到 很 好 的 视 觉 体 验, 也 不 会 因 为 视 觉 单 元 太 小 而 疲 劳 此 时 的 2 或 者 1.5 被 称 为 设 备 像 素 比 通 过 设 备 像 素 比 可 以 简 单 地 判 断 设 备 是 否 是 retina 设 备, 在 JavaScript 里 面 可 以 通 过 访 问 window.devicepixelratio 的 值 来 确 定 143

57 第 1 篇 HTML 5 移 动 Web 开 发 基 础 3. 视 口 (viewport) 视 口 在 桌 面 浏 览 器 时 代 就 有, 它 表 示 的 含 义 是 浏 览 器 窗 口 的 可 视 区 域 视 口 中 的 像 素 指 的 是 CSS 像 素, 视 口 大 小 决 定 了 页 面 布 局 的 可 用 宽 度 ( 为 什 么 在 过 去 960px 是 一 个 比 较 安 全 的 布 局? 因 为 通 常 桌 面 浏 览 器 的 视 口 在 960px 以 上 ) 在 屏 幕 不 那 么 宽 的 移 动 设 备 大 量 出 现 后, 如 果 依 然 以 浏 览 器 的 窗 口 作 为 视 口, 那 么 其 布 局 的 可 用 宽 度 就 会 变 少 很 多 ( 比 如 320px), 如 果 以 前 在 桌 面 上 以 较 宽 的 宽 度 为 基 准 布 局 的 页 面 在 手 机 上 就 会 显 示 不 完 整, 如 图 3.76 所 示 为 解 决 适 配 桌 面 版 网 站 的 问 题, 移 动 设 备 浏 览 器 定 义 了 两 种 视 口 : 可 见 视 口 (visual viewport) 和 布 局 视 口 (layout viewport) 布 局 视 口 决 定 了 桌 面 版 网 站 的 CSS 在 应 用 时 所 设 置 的 布 局 最 大 宽 度, 可 见 视 口 和 之 前 的 视 口 含 义 一 致 大 多 数 移 动 浏 览 器 将 布 局 视 口 的 宽 度 设 置 为 980px, 这 样 在 可 见 视 口 中 就 能 容 纳 更 多 的 内 容, 桌 面 网 站 的 布 局 也 不 会 乱 掉, 用 户 可 通 过 放 大 的 方 式 来 浏 览 其 中 的 文 字, 如 图 3.77 所 示 图 3.76 手 机 访 问 桌 面 网 站 示 意 图 3.77 布 局 视 口 和 可 见 视 口 144

58 浏 览 器 布 局 视 口 宽 度 可 以 通 过 设 置 meta 标 签 来 覆 盖 : <meta name="viewport" content="width=320px" /> 此 时 整 个 页 面 的 最 大 CSS 宽 度 将 是 320px, 你 的 CSS 布 局 代 码 将 都 会 基 于 这 个 基 础 值 来 进 行 计 算 viewport 元 标 签 可 以 设 定 多 项 用 于 配 置 视 口 的 可 选 属 性 width: 布 局 视 口 宽 度, 可 以 设 置 为 一 个 具 体 的 长 度, 也 可 以 设 置 为 device-width 这 样 的 关 键 字, 此 时 布 局 视 口 和 可 见 视 口 的 宽 度 相 同 ( 注 意, 这 里 的 device-width 并 不 是 屏 幕 实 际 物 理 像 素 的 宽 度, 而 是 指 CSS 像 素 宽 度 ) height: 布 局 视 口 高 度 initial-scale: 初 始 缩 放 比 例, 取 值 范 围 是 (0~10.0) minimum-scale: 最 小 缩 放 比, 取 值 同 样 是 (0~10.0) maximum-scale: 最 大 缩 放 比, 取 值 同 上 user-scalable: 设 定 用 户 是 否 可 以 缩 放, 取 值 为 yes/no, 默 认 为 yes 注 意 : 在 CSS 里 通 规 则 同 样 可 以 设 置 视 口 相 关 属 性, 只 不 过 关 键 字 稍 有 变 化 来 看 一 个 应 用 viewport 元 标 签 的 例 子 : <meta name="viewport" content="width=320"> 此 时 页 面 将 假 设 屏 幕 的 宽 度 就 是 320px, 无 论 是 大 屏 小 屏 横 屏 和 竖 屏 都 会 这 样 渲 染, 因 此 最 终 的 效 果 可 能 是 这 样, 如 图 3.78 所 示 图 3.78 固 定 的 布 局 视 口 宽 度 值 145

59 第 1 篇 HTML 5 移 动 Web 开 发 基 础 可 以 看 到, 页 面 的 文 字 随 着 屏 幕 的 宽 度 变 化 也 变 大 了, 如 果 希 望 文 字 大 小 不 受 viewport 影 响, 那 么 可 以 将 width 设 置 为 device-width, 运 行 后 的 效 果 如 图 3.79 所 示 <meta name="viewport" content="width=device-width" /> 图 3.79 布 局 视 口 与 可 见 视 口 相 同 通 过 设 置 initial-scale 的 值 可 以 使 页 面 在 刚 渲 染 时 就 放 大, 运 行 后 的 效 果 如 图 3.80 所 示 <meta name="viewport" content="width=device-width, initial-scale=2"> 图 3.80 initial-scale 为 2 时 146

60 不 过 一 个 优 化 良 好 的 网 站, 是 不 应 该 让 用 户 需 要 缩 放 才 能 正 常 阅 读 的, 因 此 推 荐 的 元 标 签 是 类 似 这 样 的 : <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 上 面 这 个 meta 标 签 如 果 应 用 到 iphone 这 样 的 移 动 设 备 中, 用 户 将 无 法 用 双 指 来 缩 放 页 面, 且 布 局 视 口 的 宽 度 将 和 可 见 视 口 ( 即 屏 幕 宽 度 ) 相 等, 这 时 候 很 适 合 使 用 非 固 定 宽 度 的 布 局 这 个 模 式 对 于 较 小 的 屏 幕 非 常 有 优 势 了 解 了 设 备 视 口 等 的 基 本 知 识, 我 们 来 看 看 media queries 如 何 帮 助 我 们 实 现 响 应 式 设 计 从 media 到 media queries 从 原 理 上 来 说,media queries 并 不 是 什 么 新 东 西, 早 在 CSS 2.1 时 代, 就 已 经 规 则 了, 不 过 那 时 属 性 只 是 用 来 区 分 媒 体 的 类 型, 它 支 持 下 面 这 些 类 型 的 媒 体 braille: 盲 文 embossed: 浮 雕 排 印 handheld: 手 持 设 备 print: 普 通 打 印 机 projection: 投 影 仪 screen: 屏 幕 speech: 语 音 合 成 器 ( 非 视 觉 ) tty: 电 话 tv: 电 视 机 all: 适 用 于 所 有 情 况 可 以 看 到 CSS 2.1 支 持 非 常 多 的 媒 体 类 型, 比 如 针 对 打 印 机 我 们 可 能 需 要 在 footer 加 上 一 行 版 权 信 息 print {.footer:after { content: " 版 权 所 有, 翻 版 不 一 定 究 " 这 样 只 有 在 打 印 的 时 候 会 出 现 这 行 字 可 以 看 到 媒 体 类 型 里 面 其 实 是 有 一 个 handheld 来 识 别 移 动 设 备 的, 但 是 早 期 手 持 设 备 多 数 都 没 有 支 持 这 个 属 性, 直 接 使 用 了 screen 类 型, 后 来 虽 然 有 的 浏 览 器 开 始 支 持 handheld 类 型, 但 由 于 市 面 上 割 裂 的 支 持 导 致 没 什 么 人 专 门 为 handheld 类 型 写 样 式 表, 所 以 干 脆 也 废 掉 了 handheld 类 型, 直 接 支 持 screen, 这 样 导 致 其 实 没 有 办 法 区 分 移 动 设 备 和 桌 面 设 备 CSS 3 的 media queries 模 块 扩 展 的 应 用 范 围, 使 其 不 仅 能 识 别 媒 体 类 型, 也 能 识 别 媒 体 特 征 比 如 屏 幕 宽 度, 像 素 比 甚 至 设 备 色 彩 等 参 数 media queries 的 语 法 很 简 单,@media 关 键 字 后 跟 一 个 媒 体 类 型, 然 后 再 跟 一 个 或 多 个 147

61 第 1 篇 HTML 5 移 动 Web 开 发 基 础 媒 体 识 别 条 件 的 表 达 式, 每 个 条 件 用 and 来 连 接, 如 果 设 备 满 足 这 些 条 件, 那 么 最 后 就 应 用 其 中 的 CSS 代 码 比 如 识 别 iphone 4 的 一 段 代 码 可 能 是 这 样 的 : all and (max-width:320px) and (-webkit-min-device-pixel-ratio:2){ /* 在 这 里 编 写 针 对 iphone retina 屏 幕 的 代 码 */ 除 了 直 接 写 入 CSS 代 码 这 种 方 式 以 外,media queries 规 则 还 可 以 直 接 写 到 link 元 素 的 media 属 性 中, 这 样 做 的 好 处 是 可 以 按 需 加 载 CSS 文 件 : <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" /> 此 外 还 可 以 使 用 not 关 键 字 对 查 询 结 果 取 反 not screen and (color) { /* 非 显 示 器 屏 幕 且 是 彩 色 的 ( 比 如 彩 电 ) */ only 关 键 字 本 身 没 什 么 特 别 的 用, 但 是 在 不 支 持 only 的 用 户 代 理 ( 浏 览 器 ) 中, 可 以 用 来 隐 藏 样 式 表 : <link rel="stylesheet" media="only screen and (color)" href="example.css" /> 除 了 用 and 来 连 接 表 达 式, 表 达 式 之 间 也 可 以 由 逗 号 来 分 割, 这 时 候 其 语 义 等 价 于 (min-width: 700px), handheld and (orientation: landscape) {... 就 这 个 例 子 而 言, 如 果 使 用 一 个 有 显 示 屏 的 设 备, 且 其 显 示 屏 的 视 口 宽 度 是 800px, 那 么 逗 号 前 的 第 一 个 表 达 式 的 查 询 结 果 将 会 是 true, 整 个 语 句 也 就 是 true 了, 因 此 代 码 将 会 应 用 同 样 的, 如 果 是 横 屏 使 用 一 个 视 口 宽 度 为 400 的 手 持 设 备 时,media 声 明 的 第 一 部 分 会 返 回 false, 而 第 二 部 分 会 返 回 true, 因 此 整 个 查 询 会 返 回 true 从 上 面 的 例 子 中 可 以 看 到, 许 多 media 特 征 都 会 有 min- 或 max- 前 缀, 之 所 以 不 用 > 符 号 是 为 了 避 免 和 HTML 或 者 XML 混 淆 下 面 是 一 些 常 见 的 可 供 查 询 media 的 特 性 color: 设 备 色 彩, 如 果 有 表 示 彩 色 设 备, 如 果 想 进 一 步 查 询 色 彩 深 度, 可 以 通 过 min-color 来 指 定, 比 如 min-color: 4 color-index: 使 用 索 引 色 的 设 备, 可 以 通 过 min-color-index 指 定 查 询 索 引 色 的 色 数 device-width: 设 备 宽 度, 有 max- 和 min- 版 本, 如 果 使 用 px 作 为 单 位, 则 指 的 是 设 备 的 物 理 像 素, 这 和 viewport 中 的 device-width 含 义 是 不 一 样 的 device-height: 设 备 高 度 width: 布 局 视 口 宽 度, 同 样 有 max- 和 min- 版 本 height: 类 似 width resolution: 解 析 度, 依 然 是 有 max- 和 min- 版 本, 单 位 是 DPI(dots per inch) 或 者 DPPX(dots per px unit) DPI 和 PPI 是 类 似 的 单 位, 大 部 分 情 况 下 两 者 是 等 价 的 在 基 于 webkit 的 浏 览 器 上, 可 以 使 用 非 标 准 的 -webkit-min-device-pixel-ratio 来 实 现 同 样 的 查 询, 而 且 更 方 便 1 表 示 普 通 解 析 度 的 屏 幕,2 表 示 retina 屏 幕 当 使 用 dppx 单 位 时, 和 device-pixel-ratia 是 等 价 的

62 orientation: 屏 幕 方 向, 有 landscape( 横 屏 ) 和 portrait( 竖 屏 ) 两 种 选 择 除 了 上 面 介 绍 的 这 些 常 用 的 媒 体 特 性 外,CSS 3 media queries 模 块 还 提 供 了 很 多 其 他 特 性 : 针 对 电 视 机 的 扫 描 方 式 (scan) monochrome( 单 色 ) 屏 幕 grid( 位 图 ) 设 备 和 aspect ratia( 屏 幕 宽 高 比 ) 等, 配 合 使 用 几 乎 能 定 位 出 任 意 两 种 不 同 设 备 的 特 征 在 JavaScript 中 也 可 以 使 用 media queries DOM 中 提 供 了 MediaQueryList 对 象 接 口, 通 过 该 对 象 你 可 以 检 查 媒 体 查 询 是 否 成 功, 甚 至 在 查 询 结 果 变 化 时 还 能 自 动 收 到 通 知 在 浏 览 器 中, 得 到 一 个 MediaQueryList 实 例 的 方 式 是 调 用 window.matchmedia 方 法 : // 当 前 是 否 是 竖 屏 状 态 var mql = window.matchmedia("(orientation: portrait)"); 一 旦 MediaQueryList 对 象 被 创 建, 你 可 以 访 问 它 的 matches 属 性 来 查 看 媒 体 查 询 的 结 果 是 true 还 是 false: if (mql.matches) { /* 此 时 设 备 是 竖 屏 */ else { /* 此 时 设 备 是 横 屏 */ 如 果 你 想 在 横 屏 和 竖 屏 切 换 时 接 收 到 通 知, 可 以 通 过 MediaQueryList 对 象 的 addlistener 方 法 来 订 阅 事 件 ( 不 用 指 定 事 件 名 ), 回 调 函 数 会 传 入 MediaQueryList 的 实 例 : function handleorientationchange(mql) { if (mql.matches) { /* 此 时 设 备 的 当 前 状 态 是 竖 屏 */ else { /* 此 时 设 备 的 当 前 状 态 是 横 屏 */ var mql = window.matchmedia("(orientation: portrait)") mql.addlistener(handleorientationchange) // 先 调 用 一 次 查 询 代 码, 以 便 我 们 知 道 在 代 码 执 行 时 设 备 处 于 哪 种 状 态 handleorientationchange(mql) 去 掉 订 阅 者 的 方 法 是 调 用 removelistener 方 法 : mql.removelistener(handleorientationchange) 响 应 式 栅 格 系 统 在 本 章 3.5 节 中 已 经 介 绍 了 流 式 栅 格 系 统 的 原 理, 响 应 式 栅 格 系 统 其 实 相 比 于 多 了 一 些 媒 体 查 询 的 功 能 而 已, 基 本 原 理 是 没 有 变 化 的 在 设 计 响 应 式 栅 格 系 统 的 时 候, 关 键 在 于 你 需 要 响 应 哪 些 设 备, 可 能 会 根 据 需 要 兼 容 的 设 备 特 性 来 设 定 一 些 宽 度 断 点, 基 于 这 些 断 点 来 构 建 media queries 的 代 码 一 个 较 为 通 用 的 断 点 设 定 如 下 : /* 较 大 的 显 示 器 (min-width: 1200px) {... /* 通 常 是 平 板 电 脑 */ 149

63 第 1 篇 HTML 5 移 动 Web 开 发 基 (min-width: 768px) and (max-width: 979px) {... /* 横 屏 的 手 机 或 者 竖 屏 的 平 板 (max-width: 767px) {... /* 竖 屏 的 手 机 (max-width: 480px) {... 有 了 这 些 断 点, 那 么 就 很 容 易 基 于 之 前 的 栅 格 系 统 来 编 写 我 们 新 的 响 应 式 栅 格 系 统 了 : /* 普 通 屏 幕 使 用 960 的 宽 度 */.row { width: 960px;.row:after { clear: left; content: ''; display: table; /* 清 除 行 中 浮 动 */ [class^="col"] { float: left;.col1 { width: 25%;.col2 { width: 50%;.col3 { width: 75%; /* 屏 幕 设 备 宽 度 大 于 1200px 时 row 宽 度 固 定 为 1170px (min-width: 1200px) {.row { width: 1170px; /* 对 于 平 板 电 脑 每 行 宽 度 为 724px (min-width: 768px) and (max-width: 979px) {.row { width: 724px; /* 横 屏 的 手 机 或 者 竖 屏 的 平 板 将 所 有 列 按 行 排 列 (max-width: 767px) { [class^="col"] { float: none; width: 100%;.row { width: 100%; /* 竖 屏 的 手 机 (max-width: 480px) { 150

64 /* 这 里 是 可 能 一 些 微 调 */ 我 们 将 上 面 的 系 统 应 用 到 一 个 简 单 的 三 栏 布 局 当 中 去 : <div class="container"> <div class="row"> <div class="header">header</div> </div> <div class="row"> <div class="col1"> nav</div> <div class="col2"> main </div> <div class="col1"> aside </div> </div> <div class="row"> <div class="footer">footer</div> </div> </div> 最 终 在 不 同 宽 度 的 视 口 下 得 到 的 结 果 如 图 3.81 所 示 图 3.81 响 应 式 栅 格 著 名 的 bootstrap 框 架 中 也 实 现 了 一 个 类 似 的 12 列 响 应 式 栅 格 系 统 它 的 responsive 相 关 代 码 除 了 布 局 栅 格 外, 还 考 虑 了 非 常 多 的 细 节, 如 果 读 者 要 在 真 实 的 项 目 中 应 用 响 应 式 栅 格,bootstrap 无 疑 是 一 个 非 常 好 的 选 择 移 动 优 先 (mobile first) 理 念 响 应 式 栅 格 系 统 能 解 决 部 分 的 布 局 问 题, 但 是 不 一 定 对 所 有 场 景 都 适 用, 在 桌 面 网 页 设 计 中 一 些 常 见 的 元 素, 如 固 定 的 导 航 条 相 册 展 示 和 被 文 字 环 绕 的 图 片 等 等 这 些 应 用 在 较 小 屏 幕 上 应 该 如 何 显 示, 这 些 都 是 设 计 师 以 及 前 端 工 程 师 需 要 仔 细 考 虑 的 问 题 在 过 去 大 多 网 站 都 是 以 传 统 的 桌 面 为 主, 如 果 有 兼 容 手 机 等 移 动 设 备 的 需 求, 也 是 先 制 作 好 桌 面 版, 然 后 向 小 屏 设 备 进 行 移 植, 如 图 3.82 所 示 图 3.82 桌 面 优 先 ( 优 雅 降 级 ) 151