Name: 从0到1.CSS进阶之旅 (莫振杰) (Z-Library)
Author: Unknown Author

Page 1

源自阅读量 破600万的 人气教程 分类建议：计算机 / 前端技术 人民邮电出版社网址：www.ptpress.com.cn CSS进阶之旅 关注职场研究社 可获取配套资源 FM 从0到1CSS进阶之旅.indd 3 2020/5/8 上午9:54

Page 2

人 民 邮 电 出 版 社 北 京 CSS进阶之旅 FM 从0到1CSS进阶之旅.indd 4 2020/5/8 上午9:54

Page 3

内 容 提 要 本书作者根据自己多年的前后端开发经验，详尽介绍了 CSS 的进阶知识和高级开发技巧。 本书的正文部分共 12 章，分别讲解了 CSS 的基础知识、CSS 规范、盒子模型、display 属性、 文本效果、表单效果、浮动布局、定位布局、CSS 图形、性能优化、CSS 技巧，以及 CSS 的一些 重要概念。除了正文部分，本书还包括两个附录，附录 1 介绍了 HTML 的进阶知识，附录 2 是作 者结合实际工作和前端面试经验，精心挑选的前端面试题。 本书还配备了所有案例的源代码和 PPT 教学课件，以方便学校老师教学。本书适合作为前端 开发人员的参考书，也可以作为大中专院校相关专业的教材及教学参考书。 著 莫振杰 责任编辑 罗 芬 责任印制 马振武 人民邮电出版社出版发行 北京市丰台区成寿寺路 11 号 邮编 100164 电子邮件 315@ptpress.com.cn 网址 https://www.ptpress.com.cn 三河市君旺印务有限公司印刷 开本：7871092 1/16 印张：17.25 字数：475 千字 2020 年 6 月第 1 版 印数：1 – 2 500 册 2020 年 6 月河北第 1 次印刷 定价：49.80 元 读者服务热线：(010)81055410 印装质量热线：(010)81055316 反盗版热线：(010)81055315 广告经营许可证：京东工商广登字 20170147 号

Page 4

如果你想要快速上手前端开发，又岂能错过“从 0 到 1”系列？ 这是一本非常有个性的书，学起来非常轻松！当初看到这本书时，我们很惊喜，简直像是 发现了新大陆。 你随手翻几页，就能看出来作者真的是用“心”去写的。 作为忠实的读者，很幸运能够参与本书的审稿及设计。事实上，对于这样一本难得的好 书，相信你看了之后，也会非常乐意帮忙将它完善得更好。 ——五叶草团队

Page 5

前言 一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而 全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。 本书和“从 0 到 1”系列中的其他图书，大多是源于我在绿叶学习网分享的超人气在线教程。 由于教程的风格独一无二、质量很高，因而获得累计超过 100000 读者的支持。更可喜的是，我收 到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。 我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者 的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己 多年的学习和前端开发经验，完全站在初学者的角度来编写本书。我相信，本书会非常适合零基础 的读者轻松地、循序渐进地展开学习。 之前，我问过很多小伙伴，看“从 0 到 1”这个系列图书时是什么感觉。有人回答说：“初恋般 的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。 配套习题 每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前 端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案 放于本书的配套资源中，具体下载方式见下文。 配套网站 绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为 大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术 “大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加下列 QQ 群讨论交流： 519225291、593173594（只能加一个 QQ 群）。 配套资源下载及使用说明 本书的配套资源包括源码文件和配套 PPT 教学课件。扫描下方二维码，关注微信公众号“职 场研究社”并回复“53590”，即可获得资源下载方式。 职场研究社

Page 6

从 0 到 1 系列图书 前言2 特别鸣谢 本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们 的帮助本书才得以顺利出版。 感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量 时间对本书进行细致的审阅，并给出了诸多非常棒的建议。 最后要感谢我的挚友郭玉萍，她为“从 0 到 1”系列图书提供了很多帮助。在人生的很多事情 上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。 由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以 发送电子邮件至 lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www. lvyestudy.com），了解更多前端开发的相关知识。 作者

Page 7

目录 第 1章　基础知识… ……………………1 1.1　CSS进阶简介… ………………………… 1 1.1.1　你真的精通CSS吗… ………………… 1 1.1.2　进阶教程简介… ………………………… 2 1.2　CSS单位… ……………………………… 3 1.2.1　绝对单位… ……………………………… 3 1.2.2　相对单位… ……………………………… 3 1.3　CSS特性………………………………… 11 1.3.1　继承性… ………………………………… 11 1.3.2　层叠性… ………………………………… 13 1.4　CSS优先级……………………………… 15 1.4.1　引用方式冲突… ………………………… 15 1.4.2　继承方式冲突… ………………………… 16 1.4.3　指定样式冲突… ………………………… 16 1.4.4　继承样式和指定样式冲突… …………… 19 1.4.5　!important………………………………20 1.5　CSS引用方式……………………………22 1.5.1　外部样式表… ……………………………23 1.5.2　内部样式表… ……………………………23 1.5.3　行内样式表… ……………………………24 1.6　CSS选择器………………………………25 1.6.1　后代选择器… ……………………………26 1.6.2　子代选择器… ……………………………27 1.6.3　兄弟选择器… ……………………………28 1.6.4　相邻选择器… ……………………………29 1.7　:first-letter 和 :first-line… ………………32 1.7.1　:first-letter 选择器… …………………32 1.7.2　:first-line 选择器… ……………………32 第 2章　CSS规范… ………………34 2.1　CSS规范简介… …………………………34 2.2　命名规范……………………………………34 2.2.1　CSS文件命名… ………………………35 2.2.2　id 和 class 命名… ……………………35 2.3　书写规范……………………………………38 2.4　注释规范……………………………………40 2.4.1　顶部注释… ………………………………40 2.4.2　模块注释…………………………………40 2.4.3　简单注释………………………………… 41 2.5　CSS…reset… …………………………… 41 2.5.1　什么是CSS…reset… ………………… 41 2.5.2　为什么要用CSS…reset… ……………42 2.5.3　如何使用CSS…reset… ………………42 第 3章　盒子模型… …………………45 3.1　CSS盒子模型……………………………45 3.2　深入 border… ……………………………48 3.2.1　性能差异… ………………………………48 3.2.2　兼容差异…………………………………48 3.3　深入 padding… …………………………48 3.4　外边距叠加…………………………………50 3.4.1　外边距叠加的 3种情况………………… 51 3.4.2　外边距叠加的意义………………………53 3.5　负margin 技术……………………………54 3.5.1　负margin 简介… ………………………54 3.5.2　负margin 技巧…………………………57 3.6　overflow… ………………………………64 第4章　display 属性… ……………67 4.1　块元素和行内元素… ………………………67 4.1.1　块元素… …………………………………67 4.1.2　行内元素… ………………………………68

Page 8

从 0 到 1 系列图书 目录2 4.2　display 简介… ……………………………69 4.2.1　block 元素… ……………………………69 4.2.2　inline 元素… ……………………………70 4.2.3　inline-block 元素… …………………70 4.3　display:none… …………………………72 4.3.1　display:none 简介… …………………72 4.3.2　display:none 和 visibility:hidden 的… …………………………………区别………………………………………73 4.4　display:table-cell… ……………………75 4.4.1　图片垂直居中于元素… …………………75 4.4.2　等高布局…………………………………77 4.4.3　自动平均划分元素………………………79 4.5　去除 inline-block元素间距… ……………80 第 5章　文本效果… …………………84 5.1　文本效果简介… ……………………………84 5.2　深入 text-indent…………………………84 5.3　text-align…………………………………87 5.3.1　text-align 起作用的元素………………88 5.3.2　text-align:center; 与 margin:0 ………………………auto;… …………………………………89 5.4　深入 line-height… ………………………89 5.4.1　line-height 的定义… …………………90 5.4.2　深入 line-height… …………………… 91 5.5　深入 vertical-align………………………97 5.5.1　vertical-align 属性取值… ……………97 5.5.2　vertical-align 属性应用… ……………99 第 6章　表单效果… ……………… 104 6.1　表单效果简介… ………………………… 104 6.2　深入 radio 和 checkbox… ………… 105 6.3　深入 textarea… ……………………… 106 6.3.1　固定大小，禁用拖动… ……………… 106 6.3.2　在Chrome（或 Firefox）和 IE 中 ………………………实现相同的外观……………………… 109 6.4　表单对齐………………………………… 110 第 7章　浮动布局… ……………… 113 7.1　正常文档流和脱离文档流… …………… 113 7.1.1　正常文档流… ………………………… 113 7.1.2　脱离文档流… ………………………… 114 7.2　深入浮动………………………………… 116 7.3　浮动的影响……………………………… 118 7.3.1　对自身的影响… ……………………… 119 7.3.2　对父元素的影响……………………… 119 7.3.3　对兄弟元素的影响…………………… 121 7.3.4　对子元素的影响……………………… 125 7.4　浮动的副作用…………………………… 126 7.5　清除浮动………………………………… 128 7.5.1　clear:both… ………………………… 128 7.5.2　overflow:hidden…………………… 130 7.5.3　::after 伪元素… …………………… 131 第8章　定位布局… ……………… 133 8.1　深入定位… ……………………………… 133 8.1.1　子元素相对父元素定位… …………… 133 8.1.2　子元素相对祖先元素定位… ………… 136 8.2　z-index 属性… ……………………… 138 第9章　CSS图形… …………… 141 9.1　CSS图形简介………………………… 141 9.2　三角形…………………………………… 142 9.2.1　CSS实现三角形的原理… ………… 142 9.2.2　带边框的三角形……………………… 145 9.3　圆角与圆………………………………… 148 9.3.1　border-radius 实现圆角… ……… 148 9.3.2　border-radius 实现半圆和圆… … 152 9.3.3　border-radius 的派生子属性… … 154 9.4　椭圆……………………………………… 155 9.5　图标制作………………………………… 156 第 10章　性能优化… …………… 164 10.1　CSS优化简介………………………… 164

Page 9

　从0到1系列图书 目录　 3 10.2　属性简写… …………………………… 165 10.2.1　盒模型简写… ……………………… 165 10.2.2　背景简写… ………………………… 167 10.2.3　字体简写… ………………………… 168 10.2.4　颜色值简写… ……………………… 168 10.3　语法压缩… …………………………… 169 10.3.1　空白符… …………………………… 169 10.3.2　结尾分号… ………………………… 169 10.3.3　url() 的引号… ……………………… 170 10.3.4　属性值为 0… ……………………… 170 10.3.5　属性值为“以 0开头的小数”… … 171 10.3.6　合并相同的定义… ………………… 171 10.3.7　利用继承进行合并… ……………… 172 10.4　压缩工具… …………………………… 173 10.5　图片压缩… …………………………… 174 10.5.1　JPEG、PNG和GIF……………… 175 10.5.2　图片压缩… ………………………… 175 10.6　高性能选择器… ……………………… 175 10.6.1　选择器在浏览器中的解析原理… … 176 10.6.2　不同选择器的解析速度… ………… 176 第 11 章　CSS技巧… …………… 178 11.1　水平居中… …………………………… 178 11.1.1　文本的水平居中……………………… 178 11.1.2　元素的水平居中… ………………… 179 11.2　垂直居中… …………………………… 183 11.2.1　文本的垂直居中… ………………… 183 11.2.2　元素的垂直居中… ………………… 185 11.3　CSS…Sprite…………………………… 188 11.4　iconfont 图标… ……………………… 192 11.4.1　iconfont 网站… …………………… 193 11.4.2　iconfont 技术… …………………… 195 第 12章　重要概念… …………… 202 12.1　CSS中的重要概念…………………… 202 12.2　包含块（containing…block）… …… 202 12.2.1　什么是包含块… …………………… 202 12.2.2　包含块的判定以及包含块的范围… 203 12.3　层叠上下文（stacking…context）… … 206 12.3.1　什么是层叠上下文… ……………… 207 12.3.2　什么是层叠级别… ………………… 207 12.3.3　层叠上下文的特点… ……………… 208 12.4　BFC和 IFC…………………………… 210 12.4.1　基本概念… ………………………… 210 12.4.2　什么是BFC………………………… 211 12.4.3　BFC的用途………………………… 213 附录 1　HTML进阶 第１3章　基础知识… …………… 222 13.1　HTML、XHTML和HTML5… …… 222 13.1.1　HTML和 XHTML… ……………… 222 13.1.2　HTML5… ………………………… 223 13.2　div 和 span…………………………… 225 13.3　id 和 class… ………………………… 226 13.3.1　id 属性… …………………………… 226 13.3.2　class 属性… ……………………… 226 13.4　浏览器标题栏小图标… ……………… 227 第 14章　语义化… ……………… 229 14.1　语义化简介… ………………………… 229 14.2　标题语义化… ………………………… 231 14.3　图片语义化… ………………………… 232 14.3.1　alt 属性和 title 属性………………… 233 14.3.2　figure 元素和 figcaption 元素…… 233 14.4　表格语义化… ………………………… 236 14.5　表单语义化… ………………………… 239 14.5.1　label 标签…………………………… 239

Page 10

从 0 到 1 系列图书 目录4 14.5.2　fieldset 标签和 legend 标签… … 241 14.6　其他语义化… ………………………… 242 14.6.1　换行符 <br/>… …………………… 242 14.6.2　无序列表 ul… ……………………… 243 14.6.3　strong 标签和 em标签…………… 244 14.6.4　del 标签和 ins 标签… …………… 245 14.6.5　img标签… ………………………… 246 14.7　语义化验证… ………………………… 246 14.8　HTML5舍弃的标签… ……………… 248 附录 2　前端面试题 选择题………………………………………… 251 问答题………………………………………… 257

Page 11

第 1 章 基础知识 1.1　CSS 进阶简介 1.1.1　你真的精通 CSS 吗 我们都知道，前端技术最核心的 3 大技术是 HTML（Hyper Text Markup Language，超文 本标记语言）、CSS（Cascading Style Sheets，层叠样式表）和 JavaScript，如图 1-1 所示。 HTML 定义网页的结构，CSS 定义网页的外观，而 JavaScript 定义页面的行为。其中 HTML 和 CSS 是前端技术中最基础的东西。 HTML 和 CSS 入门容易，要做到精通却很难，特别是 CSS。“什么？精通很难？我很确定我已经精 通CSS了啊！”这种话往往出自才学了两三个月、技术“半桶水”的人口中，笔者就碰到过不少这样的人。 图 1-1　前端核心技术 对于 HTML 来说，确实没多少东西是可以深入研究的，但是 CSS 却不一样。如果你认为自己 精通 CSS 了，那么可以尝试思考一下以下问题。 什么是外边距叠加？出现外边距叠加的根本原因是什么？ 为了提高可读性和可维护性，命名、书写以及注释都应该怎样去规范？ 说一下 display 这几个属性值的区别：block、inline、inline-block、table-cell。

Page 12

从 0 到 1 系列图书 第 1 章　基础知识2 你深入了解过 text-indent、text-align、line-height 以及 vertical-align 这些属性吗？它 们都有哪些高级技巧？ 为什么 overflow:hidden 可以清除浮动？ CSS 都有哪些性能优化技巧？如何使用更高性能的选择器？ 如何使用 CSS 实现各种图形（如三角形、圆、椭圆等）效果？ 解释一下这几个概念：包含块、BFC、IFC 和层叠上下文。 …… 如果以上问题有一半你都答不上来，说明你连“熟悉 CSS”都谈不上，更别说“精通 CSS”了。 因此大家不要学了几个标签就认为自己精通 HTML，也不要学了几个属性就觉得自己精通 CSS 了。 不管是哪门技术，自己都应该深入地去学习，自我满足只会让我们止步不前。 1.1.2　进阶教程简介 本书中的 HTML 进阶的内容只针对 HTML4.01（见本书的附录），而 CSS 进阶的内容只针对 CSS2.1。关于 HTML5 和 CSS3 的内容，可以学习本系列图书中的《从 0 到 1 ：HTML5+CSS3 修炼之道》这本书。 本书介绍的是关于 CSS 的进阶内容，并不适合没有基础的人学习，对于 HTML 和 CSS 入门 相关的知识，可以参考本系列图书中的入门书《从 0 到 1：HTML+CSS 快速上手》，不然在学习本 书的过程中可能会遇到困难。 进阶篇虽然涉及的东西很多，但是书中浓缩的都是精华。有一句话说得好：“干扰因素越少， 越容易专注一件事。”因此，对于书中的技巧，我们会以简单的例子来讲解。我在编写的时候也是字 斟句酌，该展开的会详细展开，不重要的东西一定会一笔带过。希望大家不要跳跃学习。 此外，进阶教程里很多东西都是比较复杂的，一时半会可能难以消化，我们应该来回多翻几遍，并且 结合自己的实践来理解。古语有言：“书读百遍，其义自见。”CSS 的进阶知识在本书中已经梳理得比较完 善了，小伙伴们还可以来回翻一翻，想当年我们可是连“翻”的份都没有，因为压根儿就没有这样的一本 系统化的进阶类图书供我们翻阅。这本书是我多年的心血，几乎涵盖了 90% 以上的高级开发技巧。 最后给小伙伴一个小小的建议。很多人在接触新技术的时候，喜欢在第一遍学习中把每一个细 节都抠清楚，事实上这是效率最低的学习方法。在第一遍学习时，如果有些东西我们实在没办法理 解，那就直接跳过，等学到后面或者看第二遍的时候，自然而然就懂了。本书介绍的高级技巧和重 要概念等内容都是相当复杂的，甚至你在实际开发中碰到类似情况时，还需要再回头翻一遍书，经 过反复思考和实践，才有可能真正掌握。 在本书的学习过程中，一定要下载这本书的源代码，一边查看源代码学习，一边测试效果。 【解惑】 想要深入学习 CSS，除了这本书，还有什么推荐的学习渠道吗？ 不管是学习什么技术，我们都应该养成阅读官方文档的习惯。在 Web 技术中，虽然官方 文档都是英文版本，但这些都是重要的参考资料。而翻译过来的资料，很多都是带有译者个 人理解的，并不一定准确，甚至还会误导读者。阅读官方文档，不仅可以更深入地理解技术 本质，还可以顺便提高一下英文水平。

Page 13

3　 1.2　CSS单位　 想要更深入地学习 CSS，建议大家多看看 W3C（World Wide Web Consortium，万维网联 盟）官方文档和 MDN（Mozilla Developer Network，Mozilla 开发者网络）官方文档，因为这两 个是重要的参考资料，两者的官网地址如下。 W3C 官方地址：https://www.w3.org/。 MDN 官方地址：https://developer.mozilla.org/zh-CN/。 注意，这个 W3C 不是 w3cschool，而是国外的一个网站。 1.2　CSS 单位 在 CSS 入门阶段，我们大多使用 px 作为单位。其实在 CSS 中，除了 px，还有很多其他常 用单位。总体来说，CSS 单位可以分为绝对单位和相对单位两大类。 1.2.1　绝对单位 在 CSS 中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素 影响。绝对单位多用于传统平面印刷中，极少用于前端开发。在CSS中，常用的绝对单位如表1-1所示。 表 1-1　CSS 绝对单位 绝对单位 说明 cm 厘米 mm 毫米 in 英寸 pt 磅（point），印刷的点数 pc pica，1pc=12pt 在前端开发中，我们不会用到绝对单位。因此在这里只需要简单了解一下在 CSS 中有绝对单 位的存在就可以了。 1.2.2　相对单位 在 CSS 中，相对单位定义的大小是不固定的，一般是相对其他长度而言。在 CSS 中，常用 的相对单位如表 1-2 所示。 表 1-2　CSS 相对单位 相对单位 说明 px 像素 % 百分比 em 1em 等于“当前元素”字体大小 rem 1rem 等于“根元素”字体大小

Page 14

从 0 到 1 系列图书 第 1 章　基础知识4 除了上表所述单位，CSS 相对单位还有 ex、vw、vh 等。在这里我们只需要认真掌握上表中 的单位，其他的相对单位主要用于移动端开发，在接触移动端开发时，再去学习即可。 1．像素（px） px，全称 pixel（像素），指一张图片中最小的点，或者是计算机屏幕中最小的点。 举个例子，下面有一个新浪图标 , 如图 1-2 所示。如果将这个图标放大 n 倍，则此时的效果如图 1-3 所示。 　 　 　　　　　　　　　　 　　　　　　　　 图 1-2　小图标 图 1-3　放大后的小图标 我们会发现，原来一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素 （px）。如果一台计算机的分辨率是 800px×600px，其实意思就是“其屏幕的宽为 800 个小方点， 高为 600 个小方点”。 严格来说，px 属于相对单位，因为屏幕分辨率不同，1px 的大小也是不同的。例如 Windows 系统的分辨率为每英寸 96px，Mac 系统的分辨率为每英寸 72px。但是如果不考虑屏幕分辨率，我 们也可以把 px 当作绝对单位来看待，这也是为什么很多地方说 px 是绝对单位的原因。 2．百分比（%） 在 CSS 中，支持百分比作为单位的属性很多，大致可以分为 3 类。 width、height、font-size 的百分比是相对于父元素“相同属性”的值来计算的。 line-height 的百分比是相对于当前元素的 font-size 值来计算的。 vertical-align 的百分比是相对于当前元素的 line-height 值决定的。 line-height 和 vertical-align 这两个属性有点特殊，我们在“5.4 深入 line-height”和“5.5 深入 vertical-alian”这两节中会详细介绍。这里拿 width 属性来说，如果父元素 width 为 100px， 子元素 width 为 50%，则表示子元素实际 width 为 50px。如果父元素 font-size 为 30px，子元素 font-size 为 50%，则表示子元素实际 font-size 为 15px。   举例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #father { width:200px;

Page 15

5　 1.2　CSS单位　 height:160px; border:1px solid blue; font-size:30px; } #son { width:50%; height:50%; border:1px solid red; font-size:50%; } </style> </head> <body> <div id="father"> 绿叶学习网 <div id="son">绿叶学习网</div> </div> </body> </html> 预览效果如图 1-4 所示。   分析 width、height、font-size 的百分比是相对于父元素“相同属性”的值来计算的，因此子元 素 最 终 的 width 值 为 200px×50%=100px，height 值 为 160px×50%=80px，font-size 值 为 30px×50%=15px。 当然，我们在浏览器控制台也能直观地看出这些值，如图 1-5 所示。 图 1-5　控制台 3．em 在 CSS 中，em 是相对于“当前元素”的字体大小而言的。其中，1em 就等于“当前元素” 字体大小。这里的字体大小指的是以 px 为单位的 font-size 值。例如，当前元素的 font-size 图 1-4　百分比单位

Page 16

从 0 到 1 系列图书 第 1 章　基础知识6 值为 10px，则 1em 等于 10px ；当前元素的 font-size 值为 20px，则 1em 等于 20px，依此 类推。 此外需要注意，如果当前元素的 font-size 没有定义，则当前元素会继承父元素的 font-size。 如果当前元素的所有祖先元素都没有定义 font-size，则当前元素会继承浏览器默认的 font-size。 其中，所有浏览器默认的 font-size 值都是 16px。 在 CSS 中，使用 em 作为单位有以下 3 个小技巧。 技巧一：首行缩进使用 text-indent:2em 来实现。 我们都知道，在网页排版中，段落的首行一般会缩进两个字的间距。如果要实现这个效 果，text-indent 值应该是 font-size 值的两倍。此时，我们使用 text-indent:2em 就可以 轻松实现。   举例：首行缩进 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p { font-size:14px; text-indent:2em; width:360px; } </style> </head> <body> <h3>爱莲说</h3> <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖， 中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p> <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同 予者何人? 牡丹之爱，宜乎众矣。</p> </body> </html> 预览效果如图 1-6 所示。 图 1-6　em 作为单位

Page 17

7　 1.2　CSS单位　   分析 在这个例子中，text-indent:2em; 等价于 text-indent:28px;。对于首行缩进，我们使用 em 作为单位会比使用 px 作为单位更好。为什么呢？因为使用 px 作为单位时，如果我们定义 font- size 为 14px，则 text-indent 就应该定义为 28px ；如果我们定义 font-size 为 15px，则 text- indent 就应该定义为 30px，依此类推。但是当我们使用 em 作为单位时，不管 font-size 定义为 多少 px，我们只需要将 text-indent 定义为 2em 即可。这种方式不需要计算，相对来说更加方便。 技巧二：使用 em 作为统一单位。 我们首先要非常清楚一点：所有浏览器默认字体大小都是 16px。 如果在一个页面中，我们想要统一使用 em 作为单位，此时可以从默认字体大小下手。也就 是说，对于任何元素我们都不需要设置 font-size 为多少 px，而是继承根元素的 font-size 值（即 16px），然后再使用 em 换算即可。 如果使用浏览器默认字体大小（16px），其中 em 与 px 对应关系如下。 1em = 16px×1 = 16px 0.75em = 16px×0.75 = 12px 为了简化 font-size 的计算，我们在 CSS 中提前声明 body{font-size:62.5%;}。通过这个声 明，我们可以使默认字体大小变为 16px×62.5%=10px，此时 em 与 px 对应关系如下。 1em = 10px 0.75em = 7.5px 也就是说，我们只需要将原来的 px 值除以 10，然后换上 em 作为单位就行了。这是一个非常 棒的技巧。在实际开发中，如果我们想要统一使用 em 作为单位，都会使用这个技巧。大家仔细琢 磨以下两个实例，认真理解一下 em 的用法。   举例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{font-size:62.5%;} #p1{font-size:1em;} #p2{font-size:1.5em;} #p3{font-size:2em;} </style> </head> <body> <p id="p1">当前字体大小为1em，也就是10px</p> <p id="p2">当前字体大小为1.5em，也就是15px</p> <p id="p3">当前字体大小为2em，也就是20px</p> </body> </html> 预览效果如图 1-7 所示。

Page 18

从 0 到 1 系列图书 第 1 章　基础知识8 图 1-7　em 作为单位 一个 p 元素 width 为 150px，height 为 75px，font-size 为 15px，text-indent 为 30px。如果 我们想要全部使用 em 作为单位，该如何实现呢？请看下面的例子。   举例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{padding:0;margin:0;} html{font-size:62.5%;} p{display:inline-block;border:1px solid silver;} /*使用px作为单位*/ #p1 { font-size:15px; width:150px; height:75px; text-indent:30px; } /*使用em作为单位*/ #p2 { font-size:1.5em; width:10em; height:5em; text-indent:2em; } </style> </head> <body> <p id="p1">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</p> <p id="p2">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</p> </body> </html> 预览效果如图 1-8 所示。   分析 在这个例子中，我们分别使用 px 和 em 作为单位，从而得出对比效果。有些小伙伴可能会疑 惑：使用 em 作为单位时，width 不应该是 15em 吗，为什么是 10em 呢？ height 不应该是 7.5em

Page 19

9　 1.2　CSS单位　 吗，为什么是 5em 呢？ 图 1-8　em 作为单位 很多初学者都会有以上疑问。不过很好解决，我们回过头来看看 em 的定义：“在 CSS 中， em 是相对于‘当前元素’的字体大小而言的。其中，1em 就等于‘当前元素’字体大小。” 稍微琢磨一下，大家都会明白为什么了。其实在这个例子中，当前元素的 font-size 为 10px× 1.5em=15px，如果 width 和 height 也要以 em 为单位，就得以当前元素的 font-size 值（15px）再 计算一次。 width ：150px/15px = 10em height ：75px/15px = 5em 也就是说，在实际开发中，对于 em，我们一般需要计算两次。 第 1 次，当前元素 font-size 属性的 px 值。 第 2 次，当前元素其他属性（如 width、height 等）的 px 值。 技巧三：使用 em 作为字体大小单位。 如果想控制一个页面的字体大小，使用 px 作为单位时可扩展性不好，使用百分比作为单位时 也不符合习惯，最佳选择是使用 em 作为单位来定义字体大小。使用 em 作为单位，当需要改变页 面整体的文字大小时，我们只需要改变根元素字体大小即可，工作量变得非常少。em 这个特点在 跨平台网站开发中有着明显的优势。 4．rem rem，全称 font size of the root element，是指相对于根元素（即 html 元素）的字体大小。 rem 是 CSS3 新引入的单位，目前的主流浏览器，除了 IE8 之外，大部分是支持 rem 的。rem 布 局是移动端最常见的布局方式之一。 我们可以通过这个网址查看 rem 的支持情况：http://caniuse.com/#search=rem。 rem 跟 em 很相似，不过也有明显区别：em 是相对“当前元素”的字体大小，而 rem 是相对“根 元素”的字体大小。这里的 font-size 指的都是以 px 为单位的 font-size 值。   举例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html{font-size:62.5%;} #father

Page 20

从 0 到 1 系列图书 第 1 章　基础知识10 { width:200px; height:160px; border:1px solid blue; font-size:2rem; } #son { width:150px; height:100px; border:1px solid red; font-size:2rem; } </style> </head> <body> <div id="father"> 绿叶学习网 <div id="son">绿叶学习网</div> </div> </body> </html> 预览效果如图 1-9 所示。 图 1-9　rem 作为单位   分析 从这里我们可以看出 rem 是相对根元素（html 元素）的 font-size 而言的。 【解惑】 在实际开发中，CSS 单位用 px 好，还是用 em 好呢？ 国外大部分主流网站都是使用 em 作为单位，而且 W3C 也建议我们使用 em 作为单位。 但是我们发现国内大多数网站，包括三大门户“新浪”搜狐“网易”，都是采用 px 作为单位。 这是为什么呢？ 原来在国外，某些国家的法律规定网站要具有适应性，特别是美国。对于以前版本的 IE，我们无法调整那些使用 px 作为单位的字体大小。虽然现在的 IE 版本几乎都支持，但我 们也推荐读者使用 px 作为单位，因为用 px 作为单位非常便于计算长度。

Tip the Site

从0到1.CSS进阶之旅 (莫振杰) (Z-Library)

从0到1.CSS进阶之旅 (莫振杰) (Z-Library)

Registered users can read the full content for free

AI Reading Assistant

Passage locations

Recommended for You

Tip the Site