CSS核心技术详解.pdf

CMYCMMYCYCMYK扉.pdf 1 2017/4/20 14:48:01 内 容 简 介 本书共分 13 章，第 1 章主要解答 CSS 中常见的问题，以及常用的技巧。第 26 章讲解了 CSS 的核心技术，其中第 2 章是最为核心的内容，相对于其他章节理解起来会比较难一点。第 36 章主要介绍案例，配合第 2 章阅读会轻松很多。本书每个章节都是独立的，因此如果某些章节看不懂，可以暂且跳过，先阅读其他章节。第 713 章讲解关于 CSS 3 的内容。本书内容精练、实例丰富、通俗易懂，可作为广大 CSS 设计人员和前端开发人员的参考书，同时也非常适合大中专院校师生学习阅读。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据 CSS 核心技术详解/肖志华著.北京：电子工业出版社，2017.6 ISBN 978-7-121-31330-1 .C.肖.网页制作工具.TP393.092.2 中国版本图书馆 CIP 数据核字（2017）第 076255 号 策划编辑：黄爱萍 责任编辑：徐津平 印 刷：北京中新伟业印刷有限公司 装 订：北京中新伟业印刷有限公司 出版发行：电子工业出版社 北京市海淀区万寿路 173 信箱 邮编：100036 开 本：787980 1/16 印张：20.5 字数：409 千字 版 次：2017 年 6 月第 1 版 印 次：2017 年 6 月第 1 次印刷 定 价：59.00 元 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。质量投诉请发邮件至，盗版侵权举报请发邮件至。本书咨询联系方式：（010）51260888-819，。前言 看似简单的 CSS，却暗藏玄机，那是我们摸爬滚打好长时间后悟出的真理。在很长的一段时间里，我并没有重视 CSS，觉得 CSS 很简单，无非就是一些属性；后来才发现自己小看了 CSS，对 CSS 的了解实在是太少，尤其是对其核心概念的理解太模糊，实际上它有很多神奇的地方并不为大家所知。对于一个新手来说，只知道一些理论但在实际开发中不会使用是不行的，于是笔者萌生了写作本书的最初想法。市面上介绍 CSS 基础的书已经有很多了，已经没有必要再去重复，但是一些核心的内容还是很有必要写出来的，因为我发现很多前端朋友对 CSS 都不太重视。我认为做前端的技术人员不仅要掌握好CSS的核心内容，还要懂得怎样把这些内容灵活运用到实际开发中。如果对一门技术只停留在了解的层面而不会使用，那和不会有什么区别？所以本书将实用放在第一位，大量的例子都来自于我在实际开发中所遇到的问题，将这些实际的例子拿来讲解才更有说服力，同时也更易于读者的理解。本书共分 13 章，第 1 章主要解答 CSS 中常见的问题，以及常用的技巧。第 26 章讲解了 CSS 的核心技术，其中第 2 章是最为核心的内容，相对于其他章节理解起来会比较难一点。第 36 章主要介绍案例，每个代码片段都有一些案例，配合第 2 章阅读会轻松很多。本书每个章节都是独立的，因此如果某些章节看不懂，可以暂且跳过，先阅读其他章节。第 713 章讲解关于 CSS 3 的内容。本书举例时用到了很多关于 CSS 3 的属性，所以读者在测试时需要使用高级浏览器，这里推荐使用 Chrome 浏览器，书中的例子主要也是在 Chrome 浏览器中测试的。另外本书并不会过多地讲解兼容性问题，因为花太多时间讨论兼容性是不太值得的。书中有一些个人看法，由于才疏学浅，不免会有疏漏。如果发现错误，还请指出，不吝赐教，在此深表 IVCSS 核心技术详解 谢意，可发邮件至 邮箱，一定一一回复并乐此不疲，因为这是我的工作，和你们交流也是我的快乐。本书的出版要特别感谢电子工业出版社的黄爱萍和张童编辑，感谢他们在选题策划和书稿编辑方面做出的大量工作，同时对伯乐在线黄利民大哥的大力支持深表谢意。肖志华 2017 年 3 月 28 日 轻松注册成为博文视点社区用户（），扫码直达本书页面。提交勘误：提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。与作者交流：与作者交流：在页面下方【读者评论】处留下您的疑问或观点，与作者和其他读者一同学习交流。页面入口：http:/ 目录 第 1 章 遇见未知的 CSS /1 1.1 在 CSS 中会遇到的问题 /1 1.1.1 CSS 层叠规则 /3 1.1.2 CSS 的命名 /5 1.2 CSS 的一些技巧 /6 1.2.1 使用 pointer-events 控制鼠标事件 /6 1.2.2 玩转 CSS 选择器 /8 1.2.3 利用 padding 实现元素等比例缩放 /11 1.2.4 calc 函数 /14 1.3 隐藏元素 /18 第 2 章 CSS 核心概念 /23 2.1 CSS 解析规则 /23 2.2 替换元素与非替换元素 /28 2.3 属性值的计算规则 /28 2.4 可视化格式模型 /30 2.5 包含块 /31 2.6 控制框 /38 2.7 格式化上下文 BFC、IFC /40 2.7.1 从 overflow 清除浮动看 BFC（块格式化上下文）/40 VICSS 核心技术详解 2.7.2 块级格式化上下文 BFC /45 2.7.3 折叠外边距 /54 2.7.4 行内格式化上下文 IFC /58 2.7.5 行高的计算 /61 第 3 章 CSS 单位究竟来自何方 /67 3.1 百分比究竟为谁 /67 3.2 探索 auto 密码 /82 3.3 设计响应式网页 rem /93 3.4 vw、vh、vmin、vmax 基于视口单位 /97 3.5 什么是 ch /102 3.6 min、max 的巧妙运用 /104 3.7 一个 none 引出的大学问 /106 第 4 章 那些年我们一起定位过的元素 /108 4.1 定位的特点 /108 4.1.1 定位之 absolute 篇 /109 4.1.2 定位之 relative 篇 /113 4.1.3 当定位遇到定位 /117 4.1.4 定位之 fixed 篇 /121 4.1.5 偶遇定位 bug，才知定位的真理 /122 4.1.6 定位之 static 篇 /129 4.2 透彻研究定位隐藏的秘密 /130 4.3 总结 /140 第 5 章 元素的七十二变元素转换 /142 5.1 display 介绍 /142 5.2 大块头block /142 5.3 我们一起站一排inline /143 目录VII 5.4 inline 和 block 的结合体inline-block /149 5.5 行内和块的烦恼 /152 5.6 dispaly 的一些其他属性 /155 5.7 总结 /159 第 6 章 浮动趣事 /160 6.1 浮动简介 /160 6.2 浮动的特点 /161 6.3 浮动的秘密 /167 6.4 实现任意形状的文字环绕 /173 6.5 总结 /188 第 7 章 再不学这些选择器就老了 /189 7.1 那些被遗忘的选择器 /189 7.1.1 相邻兄弟选择器 /189 7.1.2 利用 hover 实现一个下拉菜单 /192 7.1.3 利用 active 做一个集能量 /194 7.1.4 用 first-letter 选中第一个字 /195 7.1.5 用 first-line 选择首行文字 /197 7.2 模拟父级选择器 /199 7.3 强大的新选择器 /200 第 8 章 CSS 图标制作 /210 8.1 隐藏在边框中的秘密 /210 8.2 边框的烦恼 /212 8.3 边框的孪生兄弟outline /215 8.4 纯 CSS 图标制作 /220 VIIICSS 核心技术详解 第 9 章 你今天换背景了吗 /232 9.1 对背景属性的深入探索 /232 9.2 新增的背景功能 /237 9.2.1 改变背景原点background-origin /237 9.2.2 背景裁剪background-clip /239 9.2.3 设置背景图片大小background-size /243 9.3 总结 /245 第 10 章 让文字更美一些 /246 10.1 制作非主流文字 /247 10.2 新增的文字对齐属性 /250 10.2.1 文字两端对齐 /250 10.2.2 末尾文本对齐 /252 10.2.3 文本书写模式 /257 10.3 关于文字的一些其他属性 /259 10.3.1 将超出宽度的文字隐藏 /259 10.3.2 字母转换大小写 /262 10.4 总结 /263 第 11 章 内容生成技术用 CSS 来计数 /264 11.1 伪元素 /264 11.2 CSS 计数器 /265 11.3 content 的其他用途 /272 11.4 总结 /273 第 12 章 解决让人头疼的布局 /274 12.1 制作可自适应的布局 /274 12.1.1 左侧固定、右侧自适应的布局 /274 12.1.2 右侧固定、左侧自适应的布局 /276 目录IX 12.1.3 多列文字垂直居中 /278 12.2 利用伸缩盒模型进行布局 /283 12.2.1 伸缩盒模型基础 /285 12.2.2 伸缩盒模型进阶 /296 12.2.3 伸缩盒模型实战 /299 第 13 章 飞越 CSS /303 13.1 CSS 最佳实践 /303 13.2 纯 CSS 的世界 /307 13.2.1 利用 checked 选择器实现 tab 切换 /308 13.2.2 利用:target 选择器实现遮罩层效果 /310 13.2.3 scaleY 配合 animation 制作 loading /311 13.2.4 利用 hover 实现手风琴效果 /313 13.2.5 利用 checked 选择器制作星星评分 /314 13.2.6 使用 flex 伸缩盒模型实现瀑布流布局 /316 13.3 结束语 /318 XCSS 核心技术详解 第 1 章 遇见未知的 CSS 1.1 在 CSS 中会遇到的问题 1在 CSS 中为什么要有层叠 在 CSS 中可能会有多个样式表同时影响同一个元素的某个属性，设计这个功能的主要原因有两个，解决模块化和作者、用户、用户代理样式冲突。（1）模块化 一个页面中的样式可以拆分成多个样式表，代码如下。import url(style/base.css);import url(style/layer.css);但这种方式也会随之产生一个问题，即如果对某个元素的同一个属性设置样式，到底应用谁的呢？（2）作者/用户/用户代理 当作者（写代码的人）和用户（浏览页面的人），以及用户代理（一般指浏览器）都能更改样式表时，也会产生同样的问题：究竟用谁设置的样式，因此 CSS 层叠机制就显得格外重要。2为什么“import”指令需要写在样式表的开头 代码如下。import url(style/layer.css);body background-color:red;“import”指令之所以需要写在样式表的开头，是因为可以使后面的样式能更好地层叠导入进来的样式。2CSS 核心技术详解 3当 CSS 值为 0 时为什么可以省略单位 因为当 CSS 值为 0 时，任何单位的结果都是一样的，就像数学中的 0 乘以任何数都得 0。4margin 垂直外边距折叠的意义是什么 margin 垂直外边距折叠的特性主要来自传统排版，举个例子，代码如下。body,ul,li margin:0;padding:0;ul list-style:none;ulli margin:20px 0;1111111111 2222222222 3333333333 代码的