所有分类
  • 所有分类
  • 机械工业
  • 人民邮电
  • 清华大学
  • 电子工业

CSS世界

CSS世界插图

本书从前端开发人员的需求出发,以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS 知识点。同时,作者结合多年的从业经验,通过大量的实战案例,详尽解析CSS 的相关知识与常见问题。作者还为本书开发了专门的配套网站,进行实例展示、问题答疑。作为一本CSS 深度学习的书,书中介绍大量许多前端开发人员都不知道的CSS 知识点。本书语言通俗易懂,内容深入浅出,并结合实战经验,更适合对CSS 有所了解的前端开发人员阅读。通过阅读本书,读者会对CSS 世界的深度和广度有一个全新的认识。

目 录
第 1 章 概述……………………………………………………………………………………………………………………… 1
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
2 目录
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
目录 3
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
4 目录
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 的最小化影响原则……………………………………………………………………….. 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
目录 5
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
6 目录
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

资源下载此资源下载价格为3积分立即购买,VIP免费
客服QQ:453187836
资源下载
下载价格3 积分
客服QQ:453187836
0

评论0

请先

显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码