书名：深入解析CSSpdf/doc/txt格式电子书下载

推荐语：

作者：（美）基思·J.格兰特,黄小璐,高楠等译

出版社：人民邮电出版社有限公司

出版时间：2020-04-01

书籍编号：30618077

ISBN：9787115533760

正文语种：中文

字数：347756

版次：1

所属分类：计算机-网页设计

版权信息

书名：深入解析CSS

作者：[美] 基思 • J. 格兰特

译者：黄小璐　高楠

ISBN：978-7-115-53376-0

版权声明

Original English language edition, entitled CSS In Depth by Keith J. Grant, published by Manning Publications. 178 South Hill Drive, Westampton, NJ 08060 USA. Copyright © 2018 by Manning Publications.

Simplified Chinese-language edition copyright © 2020 by Posts & Telecom Press. All rights reserved.

本书中文简体字版由Manning Publications授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。

版权所有，侵权必究。

盒模型和border-box

盒模型指的是网页元素的结构。当指定一个元素的宽度或高度时，便设置了元素内容的尺寸——任何内边距（padding）、边框（border）、外边距（margin）都会基于它叠加。

给元素设置 box-sizing: border-box会改变盒模型，使其获得更好的可预测性。指定宽度或高度时，会设置整个元素尺寸，包括内边距和边框。

第3章介绍如何给整个网页设置border-box，以及其他重要概念，如：

• 让内容居中
  
• 创建等高列
  
• 控制元素的间距

译者序

作为有多年工作经验的前端开发者，我深切地体会到CSS的重要性，同时也感受到精通CSS的难度之高。CSS的世界过于庞大，而且近几年涌现的新特性越来越多。虽然初学者可以快速上手CSS，但是要达到精通的境界则需要投入大量的时间。

而我正是因为工作方面遇到了急需解决的问题，无意中接触到了本书。我原本只是想随便翻开看看，没想到一翻开就合不上了，书中不仅解答了我原有的疑惑，还大大地拓展了我的视野。我想，这么好的书，应该让更多人看到，于是便有了翻译此书的念头。由于工作实在繁忙，便拉上自己的同事高楠一起翻译。我翻译了序言、前言、致谢、关于本书、第1～8章及附录A，高楠翻译了第9～16章及附录B。

言归正传，回到本书。本书作者在CSS这一概念提出之初，就已经自学了HTML和CSS的相关知识。他对前端和后端的工作都十分了解，并拥有十余年CSS实战经验。在就职过的每一家公司，他都是非常重要的CSS导师。对于想要精通CSS的人而言，本书就是一张宝贵的“地图”。本书覆盖了CSS世界的大部分“疆土”，从CSS基础知识开始（如层叠、优先级、继承、相对单位、盒模型等），到多种布局（如浮动布局、Flexbox、网格布局、响应式设计等），再到大型应用程序中的CSS（如模块化CSS和模式库），最后是关于CSS的高级话题（如背景、阴影和混合模式，对比、颜色和间距，以及排版、过渡、变换、动画等）。

不管你是CSS新手，还是有一定基础，但在CSS领域遇到了瓶颈的开发人员，你都可以从本书中获益。本书不仅有讲解透彻的文字介绍，而且还有详细的分步示例，手把手教你学习CSS。本书图文并茂，帮助你用科学的方法进行CSS实战训练，将理论融入实践，达到事半功倍的学习效果。

最后，由于译者水平有限，难免会有翻译不当之处。如有问题，欢迎读者批评指正。同时感谢人民邮电出版社图灵公司的领导和编辑们，他们为本书的出版付出了宝贵的时间和精力。

黄小璐

序

“只需一分钟就能学会，却要用一辈子的时间去精通”，这句话现在略显老套，但我还是很喜欢。这句话在现代作为《黑白棋》（Othello）游戏的标语而得到普及。在《黑白棋》游戏中，玩家轮流在棋盘上放置白色或者黑色的棋子。如果在下了一个白棋后，导致一行黑棋被两个白棋夹在中间，那么所有黑棋将被替换为白棋，整行棋子就变成了白色。

就像黑白棋一样，学会CSS的规则并不难。你只需要写一个选择器尝试匹配元素，然后写一些键/值对给元素添加样式即可。即使是新手也能轻松理解该基础语法。但要精通CSS，难在需要知道在何时做何事。

CSS是一种Web语言，但是它与编程并不完全相同。CSS也包含一些逻辑和循环，但它的数学仅限于简单的函数，并且直到最近才拥有变量，更别提安全性了。比起Python，CSS更接近于绘画。你可以尽情使用CSS创造，它不会给出任何错误或者编译失败的提示。

精通CSS，需要学习CSS的所有功能。了解得越多，对CSS的感受就越自然。练习得越多，就越能轻松地想到完美的布局和定位方法。读得越多，就越能从容地应对任何设计。

真正优秀的CSS开发人员不会害怕任何设计。每项工作都变得像解谜游戏一样，能够锻炼你的聪明才智。真正优秀的CSS开发人员对CSS的功能有全面而广泛的了解。本书是你成为真正优秀的CSS开发人员的阶梯，能够让你掌握必要的知识，帮你成功实现目标。

请允许我再打个比方。虽然CSS诞生于几十年前，但它有点像《飙风战警》这部电影，你可以做任何想做的事情，只要事情按照的你预期发展就行。CSS没有任何硬性规定，但正因为全靠自己发挥，没有衡量标准告诉你做得好不好，所以你需要格外小心。一点改动就可能产生巨大的影响。一个样式表也许会像滚雪球一样增长到难以控制的程度。最后，你可能会被自己写的样式吓到！

基思的这本书知识面很广，每一个知识点都能让你成为更优秀的CSS开发人员，助你制服《飙风战警》中的怪博士。你将深入到这门语言本身，掌握CSS的功能。此外，你将围绕这门语言学到很多创意，帮助你在其他方面成长。你将更加高效地写出易理解且高性能的持久的代码。

即使是经验丰富的CSS开发人员也能从本书中获益匪浅。即使你发现读到的是已知的内容，也能助你提升技能，巩固知识。你还能发现一些让自己惊喜的“宝藏”，从而扩展知识面。

Chris Coyier
CodePen联合创始人

前言

CSS在1994年被提出，1996年由Internet Explorer 3首次（部分地）实现。正是在那段时间，我发现了神奇的查看源代码（View Source）按钮，并意识到一个网页的全部秘密就在一份纯文本文件里，等着我去破译。我用一个文本编辑器编码并观察效果，就这样自学了HTML和CSS。这成了我在网上花费大量时间的一个有趣的借口。

同时，我需要找一份真正的工作，于是取得了一个计算机科学的学位。在21世纪初“Web开发人员”的概念出现时，我还不知道它能和CSS扯上关系。

我很早就开始写CSS。即使是在工作中使用，我仍然把CSS当成好玩的游戏。我从事过后端和前端的工作，但无论在哪个团队中，我都是CSS专家。而CSS往往是Web技术栈中最容易被忽视的一部分。但是，一旦你的项目编写了清晰的CSS代码，你就再也离不开它了。每个经验丰富的Web开发者在见识到CSS的神奇效果后，大部分会问：“我该如何学习CSS？”

这个问题没有简单直接的答案，因为学习CSS并不是学习一两个小技巧，而是要理解这门语言的方方面面，并知道它们如何搭配使用。有些书对CSS做了不错的入门介绍，但是很多开发人员已经对CSS的基础有了一定的了解；有些书则教授了许多有用的技巧，但前提是读者已经精通了这门语言。

与此同时，CSS正在加速变化。响应式设计如今已经是事实标准了。Web字体也早已普及。2016年，我们见证了Flexbox的崛起；2017年，网格布局开始兴起，混合模式、盒阴影、变换、过渡、动画也刚刚普及。随着越来越多的浏览器变得“长青”，具备自动升级新版本的功能，新的CSS特性还会源源不断地出现。我们需要关注的知识点太多了。

不管你是入行不久的新手，还是有一定经验，但需要提升CSS技能的开发人员，这本书都能帮助你紧跟CSS发展的步伐。本书选取的知识点具备以下三个特点之一。

• 基本特性。很遗憾，很多开发人员没有完全理解CSS的众多基础概念，包括层叠、浮动布局的行为，以及定位。本书会深入探讨这些知识点，并解释它们的工作原理。
  
• 新特性。过去几年涌现了许多新特性，甚至还有一些特性刚刚萌芽。本书会介绍CSS的新功能以及那些尚在孵化的特性。本书更关注未来，虽然我会适当给出向后兼容的方案，但是我对当前以及未来的跨浏览器开发十分乐观。
  
• 大部分CSS书没有介绍到的特性。CSS世界很庞大。现代Web应用程序开发的世界里充满了重要的最佳实践以及通用方法。它们不一定属于CSS语言，但是一定属于CSS文化。它们对现代Web开发至关重要。

如何学习CSS呢？你会在本书中找到答案。

致谢

出版一本书需要做大量的工作。我坚信这本书很优秀，也希望读者认同，但是如果一路上没有众人的帮助，它不会达到现在的高度。

首先要感谢我的妻子Courtney。你一直支持我鼓励我，与我分担了这本书的重担，甚至帮我编辑了很多关键部分。没有你，我无法完成这本书。

感谢我的老板Mark Eagle以及洲际交易所的团队伙伴。谢谢你们一路鼓励我，让我可以利用无数个午休时间来写书。

感谢我的策划编辑Greg Wild，你发现了我在网上发表的简陋的初稿并联系了我。感谢Manning的出版人Marjan Bace，你看到了这本书的潜力。出版一本书，尤其是一本由新手写作的书，需要承担风险。感谢你给了这本书一个机会。

好书离不开好编辑。感谢Kristen Watterson给本书质量把关。这本书因你而变得更好。感谢我的技术编辑Robin Dewson，感谢你在这个漫长过程中的耐心和洞察力。

感谢Birnou Sebarté和Louis Lazaris为本书做了最终的全面技术校对。感谢Chris Coyier为本书作序。

还要感谢在本书写作的每个阶段阅读我的稿件并提供反馈的技术审阅者和朋友们：Adam Rackis、Al Pezewski、Amit Lamba、Anto Aravinth、Brian Gaines、Dico Goldoni、Giancarlo Massari、Goetz Heller、Harsh Raval、James Anaipakos、Jeffrey Lim、Jim Arthur、Matthew Halverson、Mitchell Robles Jr.、Nitin Varma、Patrick Goetz、Phily Austria、Pierfrancesco D\'Orsogna、Rafael Cassemiro Freire、Rafael Freire、Sachin Singhi、Tanya Wilke、Trent Whiteley和William E. Wheeler。你们的反馈让我能在写作早期就察觉到不同技能水平的开发人员如何从本书汲取知识。

最后我要对W3C CSS工作组在CSS规范上所做的优秀工作表示无尽的感谢。你们解决了很多难题，为我们开发人员带来了很大的便利。感谢你们的不懈努力，让CSS乃至整个Web世界变得更加美好。

关于本书

CSS日趋成熟。越来越多的Web开发人员意识到自己虽然“知道”CSS，但是理解得还不够深入。近年来，CSS语言不断发展，曾经精通CSS的开发人员现在也可能需要掌握很多新技能。本书旨在达成两个目标：帮你深度掌握CSS语言，并快速了解CSS的新进展和新特性。

本书名叫《深入解析CSS》，但它也是一本关于CSS广度的书。对于某些很难理解或通常被错误理解的CSS概念，我会详细地解释它们的工作原理及其展现某种行为的原因。对于有些话题，我不会面面俱到，但是介绍的内容足以让你高效地运用相关技术，并且会指出进一步学习的方向。总之，这本书能够填补你的知识盲区。

本书有些话题值得另外写一本书去单独介绍，比如：动画、排版，甚至是Flexbox和网格布局。我的目的是帮你扩展知识面、补齐短板，并让你爱上CSS。

本书读者

首先，本书的读者应该是那些疲于跟CSS较劲、想要真正理解CSS工作原理的开发人员。你可以是行业新手，也可以是从业十几年的老手。

本书的读者应该对HTML、CSS以及JavaScript有大致的了解。只要你熟悉CSS的基础语法，就能理解本书。不过，本书主要面向的是那些已经写过

....