CSS核心技术详解
  • 推荐0
  • 收藏3
  • 浏览1.7K

CSS核心技术详解

肖志华 (作者) 

  • 书  号:978-7-121-31330-1
  • 出版日期:2017-05-10
  • 页  数:328
  • 开  本:16(185*235)
  • 出版状态:上市销售
  • 维护人:黄爱萍
纸质版 ¥59.00
本书一共有13章,第1章主要解答一些在CSS中常见的问题,以及常用的CSS技巧。第2~6章讲解了CSS的核心技术,其中第2章是最为核心的内容,所以相对于其他章节理解起来会比较难一点。第3~6章主要介绍案例,每个代码片段都有一些案例,配合第2章阅读会轻松很多。本书每个章节都是独立的,因此如果某些章节看不懂,可以跳过去,先看其他章节。第7~13章讲解的是关于CSS 3的内容。虽然本书讲解的是CSS的核心基础内容,但并不代表基础的内容就容易理解,因为都是CSS中最核心的技术,用于提高CSS开发水平。
前言



看似简单的CSS,却暗藏玄机,那是我们摸爬滚打好长时间后悟出的真理。

在很长的一段时间里,我并没有重视CSS,觉得CSS很简单,无非就是一些属性,后来才发现自己小看了CSS,对CSS了解的实在是太少,尤其是对其核心概念的理解太模糊,实际上它有很多神奇的地方并不为大家所知。对于一个新手来说,只知道一些理论但在实际开发中不会使用是不行的,于是萌生了写作本书的最初想法。

市面上介绍CSS基础的书已经有很多了,已经没有必要再去重复,但是一些核心的内容还是很有必要写出来的,因为我发现很多前端朋友对CSS都不太重视。我认为做前端的必须要掌握好CSS的基础内容,而且只掌握好CSS的基础内容也还是远远不够的,还要懂得怎样把这些基础的内容灵活运用到实际开发中。如果对一个技术只停留在了解的层面而不会使用,那和不会有什么区别?所以本书将实用放在第一位,大量的例子都来自于我在实际开发中所遇到的,将这些实际的例子拿来讲解才更有说服性,同时也更易于读者的理解。

本书的第1章主要解答一些在CSS中常见的问题,以及常用的CSS技巧。第2~6章讲解了CSS的核心技术,其中第2章是最为核心的内容,所以相对于其他章节理解起来会比较难一点。第3~6章主要介绍案例,每个代码片段都有一些案例,配合第2章阅读会轻松很多。本书每个章节都是独立的,因此如果某些章节看不懂,可以跳过去,先看其他章节。第7~13章讲解的是关于CSS 3的内容。虽然本书讲述的是CSS的核心基础内容,但并不代表基础的内容就容易理解,因为都是CSS中最核心的技术,用于提高CSS开发水平。

本书举例时用到了很多关于CSS 3的属性,所以读者在测试时需要使用高级浏览器,这里推荐使用Chrome,书中的例子主要也是在Chrome中测试的。另外本书并不会过多地涉及兼容性的问题,因为花太多时间讨论兼容性是不太值得的。书中有一些个人看法,由于才疏学浅,不免会有疏漏,如果发现错误,还请指出,不吝赐教,在此深表谢意,可发邮件至:c776@foxmail.com,一定一一回复并乐此不疲,因为这是我的工作,和你们交流也是我的快乐。

本书的出版要特别感谢电子工业出版社的黄爱萍和张童编辑,感谢他们在选题策划和书稿编辑方面做出的大量工作,同时对伯乐在线黄利民大哥的大力支持深表谢意。





肖志华
2017年3月28日

目录

第1章 遇见未知的CSS / 1
1.1 在CSS中会遇到的问题 / 1
1.1.1 CSS层叠规则 / 4
1.1.2 CSS的命名 / 7
1.2 在CSS中你可能不知道的一些技巧 / 8
1.2.1 使用pointer-events控制鼠标事件 / 8
1.2.2 玩转选择器 / 10
1.2.3 利用padding实现元素等比例缩放 / 13
1.2.4 calc函数 / 16
1.3 从隐藏一个元素开始 / 20
第2章 CSS核心概念 / 25
2.1 CSS解析规则 / 25
2.2 替换元素与非替换元素 / 30
2.3 属性值的计算规则 / 30
2.4 可视化格式模型 / 32
2.5 包含块 / 34
2.6 控制框 / 40
2.7 格式化上下文BFC、IFC / 42
2.7.1 从overflow清除浮动看BFC(块格式化上下文) / 42
2.7.2 块级格式化上下文BFC / 47
2.7.4 折叠外边距 / 56
2.7.5 行内格式化上下文(IFC) / 61
2.7.6 行高的计算 / 64
第3章 CSS单位一日游,它们究竟来自何方 / 70
3.1 百分比究竟为谁 / 70
3.2 探索auto密码 / 85
总结 / 96
3.3 设计响应式网页rem / 97
3.4 vw、vh、vmin、vmax基于视口单位 / 100
3.5 什么是ch / 106
3.6 min、max的巧妙运用 / 108
3.7 一个none引出的大学问 / 110
第4章 那些年我们一起定位过的元素 / 113
4.1 定位的特点 / 113
4.1.1 定位之absolute篇 / 114
4.1.2 定位之relative篇 / 118
4.1.3 当定位遇到定位 / 122
4.1.4 定位之fixed篇 / 126
4.1.5 偶遇定位bug,才知定位的真理 / 127
4.1.6 定位之static篇 / 134
4.2 透彻研究定位隐藏的秘密 / 135
4.3 总结 / 146
第5章 元素的七十二变——元素转换 / 147
5.1 display介绍 / 147
5.2 大块头——block / 148
5.3 我们一起站一排——inline / 148
5.4 inline和block的结合体——inline-block / 154
5.5 行内和块的烦恼 / 157
5.6 dispaly其他的一些属性 / 161
5.7 总结 / 165
第6章 浮动也闹事 / 166
6.1 浮动简介 / 166
6.2 浮动的特点 / 167
6.3 浮动的秘密 / 173
6.4 实现任意形状的文字环绕 / 179
6.4.1 shape-outside设置边界文字环绕时的形状 / 181
6.5 总结 / 194
第7章 再不学这些选择器就老了 / 195
7.1 那些被遗忘的选择器 / 195
7.1.1 相邻兄弟选择器 / 195
7.1.2 利用hover可以不用JS就实现一个下拉菜单 / 198
7.1.3 利用active做一个集能量 / 200
7.1.4 first-letter选中第一个字 / 201
7.1.5 first-line选择首行文字 / 203
7.2 模拟父级选择器 / 205
7.3 强大的新选择器 / 206
7.3.1 :empty / 207
7.3.2 :target选择器 / 208
第8章 CSS图标制作 / 216
8.1 隐藏在边框中的秘密 / 216
8.2 边框的烦恼 / 218
8.3 边框的孪生兄弟——outline / 221
8.4 纯CSS图标制作 / 227
第9章 你今天换背景了吗 / 238
9.1 对背景属性的深入探索 / 238
9.2 新增的背景功能 / 243
9.2.1 改变背景原点--background-origin / 243
9.2.2 背景裁剪--background-clip / 245
9.2.3 设置背景图片大小--background-size / 249
9.3 总结 / 251
第10章 让文字更美一些 / 252
10.1 制作非主流文字 / 253
10.2 新增的文字对齐属性 / 256
10.2.1 文字两端对齐 / 256
10.2.2 末尾文本对齐 / 258
10.2.3 文本书写模式 / 263
10.3 关于文字的一些其他属性 / 265
10.3.1 超出宽度文字隐藏 / 265
10.3.2 字母转换大小写 / 268
10.4 总结 / 268
第11章 内容生成技术——用CSS来计数 / 270
11.1 伪元素 / 270
11.1.1 伪元素和标准元素的区别 / 271
11.2 CSS计数器 / 271
11.3 content的其他用途 / 278
11.4 总结 / 279
第12章 解决让人头疼的布局 / 280
12.1 制作可自适应的布局 / 280
12.1.1 左侧固定,右侧自适应 / 280
12.1.2 右侧固定、左侧自适应 / 282
12.1.3 多列文字垂直居中 / 284
12.2 利用伸缩盒模型来布局 / 289
12.2.1 伸缩盒模型基础 / 291
12.2.2 伸缩盒模型进阶 / 313
12.2.3 伸缩盒模型实战 / 316
第13章 飞越CSS / 320
13.1 它们不是神话,CSS最佳实践 / 320
13.2 纯CSS的世界 / 325
13.2.1 利用checked选择器实tab切换 / 325
13.2.2 利用:target实现遮罩层效果 / 327
13.2.3 scaleY配合animation制作loading / 328
13.2.4 利用hover实现手风琴效果 / 330
13.2.5 利用checked选择器制作星星评分 / 332
13.2.6 使用flex伸缩盒模型实现瀑布流布局 / 333
13.3 结束语 / 336

读者评论

  • 求代码下载

    gfdsagfdsagfdsa发表于 2023/3/22 11:56:49
  • 请问下各位编辑,代码资源怎么下载?

    雪后初晴er发表于 2020/9/23 8:55:14
  • 怎么下载资源

    zhoubing发表于 2019/12/13 11:59:08
  • p162文中“使用盖不住文本的特性来实现左侧宽度固定,右侧自适应。”的例子有问题,并不能实现自适应布局。该例子在.item文字很多的情况下,会造成文字对.item1的文字环绕。.item2的代码应该修改为:.item2{margin-left:110px;background-color:pink;}。

    duoduo1234发表于 2018/8/8 21:18:30
  • 122页 4.1.5这个例子是什么意思,margin-bottom 35个像素是要表示什么?完全是在误导读者!

    lafeillou发表于 2018/4/18 11:59:28

相关图书

写给大忙人的现代JavaScript

(德国)HORSTMANN, CAY S. (作者) 浙江阿里巴巴聚橙技术发展有限公司 (译者)

本书是一本简明的现代 JavaScript 教程,不仅涵盖函数式编程、JS 语法、JS 库等基础性内容,还介绍了国际化、异步编程、标准模块系统、元编程等较为复杂...

¥109.00

JavaScript 二十年

王译锋 (作者)

本书主要讲述了从 1995 年到 2015 年这20年间,JavaScript在创建、设计和演变方面所经历的过程。全书分为4个部分,每个部分都涵盖了 JavaS...

¥79.00

JavaScript语言精髓与编程实践(第3版)

周爱民 (作者)

本书详细讲述JavaScript作为一种混合式语言的各方面特性,包括过程式、面向对象、函数式和动态语言特性等,在动态函数式语言特性方面有着尤为细致的讲述。本书主...

¥144.00

狼书(卷2):Node.js Web应用开发

桑世龙 (作者)

目前市面的nodejs书籍基于0.10的为多,而基于最新4.X的非常少,本书是唯一一本基于node.js 4.0以上版本的书。而Koa是下一代node web的...

¥69.30

狼书(卷1):更了不起的Node.js

狼叔 桑世龙 (作者)

Node.js开发简单,性能极好,一经发布便成了明星级项目。随着大前端领域的蓬勃发展,跨平台开发、API构建、Web应用开发等场景愈加常见,Node.js也成为...

¥55.30

Koa与Node.js开发实战

Node.js 10已经进入LTS时代!其应用场景已经从脚手架、辅助前端开发(如SSR、PWA等)扩展到API中间层、代理层及专业的后端开发。Node.js在企...

¥49.00