具体描述
本书从前端开发人员的需求出发,以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时,作者结合多年的从业经验,通过大量的实战案例,详尽解析CSS的相关知识与常见问题。作者还为本书开发了专门的配套网站,进行实例展示、问题答疑。
作为一本CSS深度学习的书,书中介绍大量许多前端开发人员都不知道的CSS知识点。通过阅读本书,读者会对CSS世界的深度和广度有一个全新的认识。
作者简介
张鑫旭,前端开发工程师,国内知名前端博客“鑫空间-鑫生活”博主,目前就职于阅文集团用户体验设计部(YUX),担任技术经理。2007年开始接触前端,10年来一直工作在前端开发一线,在HTML/CSS等与交互体验关系密切的领域花了大量的时间学习和研究,有比较多的心得体会。
目录信息
1.1 CSS世界的“世界观” 1
1.2 世界都是创造出来的 3
1.3 CSS完胜SVG的武器—流 4
1.3.1 何为“流” 5
1.3.2 流是如何影响整个CSS世界的 6
1.3.3 什么是流体布局 6
1.4 CSS世界的开启从IE8开始 6
1.5 table自己的世界 7
1.6 CSS新世界—CSS3 7
第 2章 需提前了解的术语和概念 8
2.1 务必了解的CSS世界的专业术语 8
2.2 了解CSS世界中的“未定义行为” 11
第3章 流、元素与基本尺寸 13
3.1 块级元素 13
3.1.1 为什么list-item元素会出现项目符号 15
3.1.2 display:inline-table的盒子是怎样组成的 16
3.1.3 width/height作用在哪个盒子上 16
3.2 width/height作用的具体细节 16
3.2.1 深藏不露的width:auto 17
3.2.2 width值作用的细节 24
3.2.3 CSS流体布局下的宽度分离原则 27
3.2.4 改变width/height作用细节的box-sizing 29
3.2.5 相对简单而单纯的height:auto 33
3.2.6 关于height:100% 33
3.3 CSS min-width/max-width和min-height/max-height二三事 37
3.3.1 为流体而生的min-width/max-width 38
3.3.2 与众不同的初始值 38
3.3.3 超越!important 39
3.3.4 任意高度元素的展开收起动画技术 40
3.4 内联元素 42
3.4.1 哪些元素是内联元素 42
3.4.2 内联世界深入的基础—内联盒模型 42
3.4.3 幽灵空白节点 44
第4章 盒尺寸四大家族 45
4.1 深入理解content 45
4.1.1 content与替换元素 45
4.1.2 content内容生成技术 57
4.2 温和的padding属性 73
4.2.1 padding与元素的尺寸 73
4.2.2 padding的百分比值 77
4.2.3 标签元素内置的padding 79
4.2.4 padding与图形绘制 80
4.3 激进的margin属性 81
4.3.1 margin与元素尺寸以及相关布局 82
4.3.2 margin的百分比值 87
4.3.3 正确看待CSS世界里的margin合并 87
4.3.4 深入理解CSS中的margin:auto 94
4.3.5 margin无效情形解析 97
4.4 border属性 100
4.4.1 为什么border-width不支持百分比值 100
4.4.2 了解各种border-style类型 101
4.4.3 border-color和color 105
4.4.4 border与透明边框技巧 106
4.4.5 border与图形构建 108
4.4.6 border等高布局技术 109
第5章 内联元素与流 111
5.1 字母x—CSS世界中隐匿的举足轻重的角色 111
5.1.1 字母x与CSS世界的基线 111
5.1.2 字母x与CSS中的x-height 112
5.1.3 字母x与CSS中的ex 113
5.2 内联元素的基石line-height 114
5.2.1 内联元素的高度之本—line-height 114
5.2.2 为什么line-height可以让内联元素“垂直居中” 119
5.2.3 深入line-height的各类属性值 121
5.2.4 内联元素line-height的“大值特性” 124
5.3 line-height的好朋友vertical-align 126
5.3.1 vertical-align家族基本认识 127
5.3.2 vertical-align作用的前提 129
5.3.3 vertical-align和line-height之间的关系 131
5.3.4 深入理解vertical-align线性类属性值 135
5.3.5 深入理解vertical-align文本类属性值 141
5.3.6 简单了解vertical-align上标下标类属性值 142
5.3.7 无处不在的vertical-align 143
5.3.8 基于vertical-align属性的水平垂直居中弹框 144
第6章 流的破坏与保护 147
6.1 魔鬼属性float 147
6.1.1 float的本质与特性 147
6.1.2 float的作用机制 151
6.1.3 float更深入的作用机制 154
6.1.4 float与流体布局 155
6.2 float的天然克星clear 157
6.2.1 什么是clear属性 157
6.2.2 成事不足败事有余的clear 158
6.3 CSS世界的结界—BFC 160
6.3.1 BFC的定义 160
6.3.2 BFC与流体布局 160
6.4 结界overflow 164
6.4.1 overflow剪裁界线border box 165
6.4.2 了解overflow-x和overflow-y 166
6.4.3 overflow与滚动条 166
6.4.4 依赖overflow的样式表现 169
6.4.5 overflow与锚点定位 170
6.5 float的兄弟position:absolute 177
6.5.1 absolute的包含块 178
6.5.2 具有相对特性的无依赖absolute定位 184
6.5.3 absolute与text-align 191
6.6 absolute与overflow 193
6.7 absolute与clip 195
6.7.1 重新认识的clip属性 196
6.7.2 深入了解clip的渲染 198
6.8 absolute的流体特性 199
6.8.1 当absolute遇到left/top/right/bottom属性 199
6.8.2 absolute的流体特性 200
6.8.3 absolute的margin:auto居中 202
6.9 position:relative才是大哥 202
6.9.1 relative对absolute的限制 203
6.9.2 relative与定位 203
6.9.3 relative的zui小化影响原则 206
6.10 强悍的position:fixed固定定位 207
6.10.1 position:fixed不一样的“包含块” 207
6.10.2 position:fixed的absolute模拟 208
6.10.3 position:fixed与背景锁定 209
第7章 CSS世界的层叠规则 211
7.1 z-index只是CSS层叠规则中的一叶小舟 211
7.2 理解CSS世界的层叠上下文和层叠水平 212
7.2.1 什么是层叠上下文 212
7.2.2 什么是层叠水平 212
7.3 理解元素的层叠顺序 212
7.4 务必牢记的层叠准则 214
7.5 深入了解层叠上下文 214
7.5.1 层叠上下文的特性 214
7.5.2 层叠上下文的创建 214
7.5.3 层叠上下文与层叠顺序 217
7.6 z-index负值深入理解 219
7.7 z-index“不犯二”准则 223
第8章 强大的文本处理能力 225
8.1 line-height的另外一个朋友font-size 225
8.1.1 font-size和vertical-align的隐秘故事 225
8.1.2 理解font-size与ex、em和rem的关系 227
8.1.3 理解font-size的关键字属性值 229
8.1.4 font-size:0与文本的隐藏 231
8.2 字体属性家族的大家长font-family 232
8.2.1 了解衬线字体和无衬线字体 233
8.2.2 等宽字体的实践价值 234
8.2.3 中文字体和英文名称 236
8.2.4 一些补充说明 237
8.3 字体家族其他成员 238
8.3.1 貌似粗犷、实则精细无比的font-weight 238
8.3.2 具有近似姐妹花属性值的font-style 241
8.3.3 不适合国情的font-variant 242
8.4 font属性 242
8.4.1 作为缩写的font属性 242
8.4.2 使用关键字值的font属性 243
8.4.3 font关键字属性值的应用价值 246
8.5 真正了解@font face规则 247
8.5.1 @font face的本质是变量 247
8.5.2 @font face与字体图标技术 255
8.6 文本的控制 258
8.6.1 text-indent与内联元素缩进 258
8.6.2 letter-spacing与字符间距 261
8.6.3 word-spacing与单词间距 263
8.6.4 了解word-break和word-wrap的区别 264
8.6.5 white-space与换行和空格的控制 265
8.6.6 text-align与元素对齐 267
8.6.7 如何解决text-decoration下划线和文本重叠的问题 271
8.6.8 一本万利的text-transform字符大小写 273
8.7 了解:first-letter/:first-line伪元素 274
8.7.1 深入:first-letter伪元素及其实例 274
8.7.2 故事相对较少的:first-line伪元素 277
第9章 元素的装饰与美化 280
9.1 CSS世界的color很单调 280
9.1.1 少得可怜的颜色关键字 280
9.1.2 不支持的transparent关键字 282
9.1.3 不支持的currentColor变量 282
9.1.4 不支持的rgba颜色和hsla颜色 282
9.1.5 支持却鸡肋的系统颜色 283
9.2 CSS世界的background很单调 285
9.2.1 隐藏元素的background-image到底加不加载 285
9.2.2 与众不同的background-position百分比计算方式 286
9.2.3 background-repeat与渲染性能 287
9.2.4 外强中干的background-attachment:fixed 288
9.2.5 background-color背景色永远是很低的 289
9.2.6 利用多背景的属性hack小技巧 290
9.2.7 渐变背景和rgba背景色的兼容处理 290
第 10章 元素的显示与隐藏 292
10.1 display与元素的显隐 294
10.2 visibility与元素的显隐 296
10.2.1 不仅仅是保留空间这么简单 296
10.2.2 了解visibility:collapse 301
第 11章 用户界面样式 302
11.1 和border形似的outline属性 302
11.1.1 万万不可在全局设置outline:0 none 302
11.1.2 真正的不占据空间的outline及其应用 304
11.2 光标属性cursor 307
11.2.1 琳琅满目的cursor属性值 307
11.2.2 自定义光标 314
第 12章 流向的改变 315
12.1 改变水平流向的direction 315
12.1.1 direction简介 315
12.1.2 direction的黄金搭档unicode-bidi 318
12.2 改变CSS世界纵横规则的writing-mode 320
12.2.1 writing-mode原本的作用 321
12.2.2 writing-mode不经意改变了哪些规则 324
12.2.3 writing-mode和direction的关系 328
· · · · · · (收起)
读后感
1.本书没有很好地目录结构(无任何排版)(不敢相信这个会CSS的人会干出来的),作者基本是想到哪写哪,看的很乱! 2.举个例子我还要扫你的二维码????然后去你的博客看你的广告???? 3.废话很多!!!!! 4.作者很自恋!!(你能好好传播你的知识?少去各种比喻各种用...
看到很多人抱怨,专门注册了个账号来评价一下。 总体来说,我个人觉得这本书真心不错,作者自己的个人经验总结,至于读者能理解吸收多少,那是个人问题,客观评价,干货满满。 不知道读者有没有读前言的习惯,反正我是读了的,前言里面说得很清楚,书中内容是站在作者自己的角...
1.本书没有很好地目录结构(无任何排版)(不敢相信这个会CSS的人会干出来的),作者基本是想到哪写哪,看的很乱! 2.举个例子我还要扫你的二维码????然后去你的博客看你的广告???? 3.废话很多!!!!! 4.作者很自恋!!(你能好好传播你的知识?少去各种比喻各种用...
1.本书没有很好地目录结构(无任何排版)(不敢相信这个会CSS的人会干出来的),作者基本是想到哪写哪,看的很乱! 2.举个例子我还要扫你的二维码????然后去你的博客看你的广告???? 3.废话很多!!!!! 4.作者很自恋!!(你能好好传播你的知识?少去各种比喻各种用...
这书买的冲动啊,如果没写字,我一定退回去。 看了《精通CSS》以后,来看这本《CSS世界》,简直就是在扰乱我的思维,还是进阶书?呵呵。我觉得这本书欺骗了我的感情,兴冲冲的买回来,读起来还得去拨茧抽丝一般去过滤一些大篇幅的毫无用处的文字。曾经看 Head First 的 HTML 那...
用户评价
这本书在处理动画和过渡效果的部分,尤其令人印象深刻。过去,我总觉得复杂的动态效果需要依赖大量的JavaScript库才能实现流畅的交互,但《CSS世界》用纯粹的CSS展示了如何通过`transform`、`transition`以及`animation`属性,创造出媲美专业动效设计师的作品。作者对时间函数的细致讲解,让我明白了“缓动”不仅仅是让动画看起来自然,更是提升用户体验的关键。我试着书中一个复杂的页面切换动画的例子,仅仅是调整了几个关键帧的时间函数和贝塞尔曲线参数,页面的“手感”就完全不一样了,那种丝滑的体验是单纯的线性运动无法比拟的。这本书没有回避CSS的局限性,但它最大化地挖掘了CSS自身的能力,让我认识到,很多时候,我们需要的不是引入更重的工具,而是更深入地理解我们手中已有的工具的全部潜力。这本书真正做到了,将CSS从一个“辅助布局”的工具,提升到了“构建沉浸式体验”的核心技术的高度。
我之前一直觉得,CSS这东西,只要能实现效果就行,代码的可读性和维护性根本不重要,毕竟它不像JavaScript那样承载着复杂的逻辑。然而,当我开始阅读《CSS世界》时,我的看法彻底改变了。这本书花了大量的篇幅讨论了“CSS架构”和“可维护性”,这对我来说简直是醍醐灌顶。作者没有满足于展示如何实现酷炫的视觉效果,而是着重强调了如何用更结构化、更模块化的方式编写样式表,比如BEM命名法、使用预处理器(虽然这本书可能更侧重原生CSS的精髓),以及如何合理利用CSS变量。读完这些章节后,我开始重新审视自己过去写的那些杂乱无章的样式文件,简直不忍直视。现在,我不仅能写出浏览器能识别的代码,更能写出团队里任何一个人都能快速理解和修改的代码。这种从“能用”到“好用”的转变,是这本书带给我最宝贵的财富,它让我从一个单纯的实现者,蜕变成一个注重工程质量的构建者。
对于一个刚接触前端不久的初学者来说,《CSS世界》的难度曲线把握得非常好,它就像一个循序渐进的阶梯。最开始的章节,即便你只懂一点HTML基础,也能跟上节奏,通过大量的图示和简洁的代码块,快速建立起视觉感。但随着深入,尤其是在讲到CSS的渲染流程和浏览器工作原理时,它又毫不留情地展示了深度。我特别欣赏作者在解释一些底层机制时的耐心,比如specificity(优先级)的计算规则,这块内容往往是新手崩溃的起点,但在这本书里,它被拆解成了最基础的“加法”,清晰到让人拍案叫绝。我感觉自己不是在看一本枯燥的技术手册,而是在跟着一位经验丰富的老师进行一次严谨的学术探讨。而且,这本书不局限于主流浏览器的兼容性,它还会探讨一些边缘情况的处理,这为我应对未来工作中可能出现的各种“疑难杂症”打下了坚实的基础。
这本《CSS世界》简直是网页设计的“圣经”,我得说,它完全颠覆了我对前端样式的理解。在接触这本书之前,我对CSS的认知还停留在简单的颜色、字体调整和布局上,总觉得它是个需要靠“猜”和“试错”才能搞定的工具。但这本书,就像一位经验老道的导师,用极其清晰的逻辑和丰富的案例,将那些看似玄乎的属性和选择器一一剖析。特别是关于盒模型和Flexbox布局的章节,作者的讲解深入浅出,让我彻底明白了元素之间的层级关系和空间分配规则。我记得有一次,我在项目中遇到了一个棘手的垂直居中问题,尝试了各种网上的“妙招”都不奏效,翻开这本书的相应章节后,只用了半小时就找到了最优雅的解决方案。这本书的价值不仅仅在于教会你“怎么做”,更在于让你理解“为什么这么做”,这才是真正区分开发者和“代码搬运工”的关键。读完后,我感觉自己不再是被CSS牵着鼻子走,而是真正掌握了这门语言的主动权,代码写起来效率高了不止一个档次。
坦白说,市面上的CSS书籍很多,但很多都停留在“API说明书”的层面,罗列了各种属性及其取值,读起来非常乏味。但《CSS世界》的独特之处在于其强大的“设计哲学”贯穿始终。它不仅仅是教你CSS的语法,更是在传递一种“以结构为先”的设计理念。例如,在讲解Grid布局时,作者没有简单地教你怎么用`grid-template-areas`,而是先让你理解内容与容器之间的关系,如何用网格思维来规划页面布局,这和我们传统上用浮动(float)堆砌页面的思维模式是完全不同的。这种提升思维层面的引导,使得这本书具有了极高的耐读性和复习价值。每次我遇到新的布局挑战时,我都会翻阅几页,总能从中找到新的启发,它不是那种读完就束之高阁的书,而是一本需要时不时拿出来品味的参考书,每一次重温,都能发现新的闪光点。
感觉在 css 的学习道路上迈出了一大步。以前思考 css 仅仅是 key value 的存在,现在可能是流,块级,内联,盒模型等等的组合表现,非常感谢作者提供了一个如此特别的思路去思考 css。
每当我看到槽点一堆的地方想扔书,就又看到一点干货继续读下去了……建议舍去10%的啰嗦片汤话,20%无用还容易误导人的比喻和10%只是来搞笑的配图,这本书就可以四星了
5.查漏补缺。先从自己感兴趣的章节开始读,会发现别有洞天
感觉在 css 的学习道路上迈出了一大步。以前思考 css 仅仅是 key value 的存在,现在可能是流,块级,内联,盒模型等等的组合表现,非常感谢作者提供了一个如此特别的思路去思考 css。
总体上不错,就是表达方式差了一点。