从0到1 CSS进阶之旅

目录

第　1 章 基础知识　1

1.1　CSS 进阶简介　1

1.1.1　你真的精通CSS 吗　1

1.1.2　进阶教程简介　2

1.2　CSS 单位　3

1.2.1　绝对单位　3

1.2.2　相对单位　3

1.3　CSS 特性　11

1.3.1　继承性　11

1.3.2　层叠性　13

1.4　CSS 优先级　15

1.4.1　引用方式冲突　15

1.4.2　继承方式冲突　16

1.4.3　指定样式冲突　16

1.4.4　继承样式和指定样式冲突　19

1.4.5　!important　20

1.5　CSS 引用方式　22

1.5.1　外部样式表　23

1.5.2　内部样式表　23

1.5.3　行内样式表　24

1.6　CSS 选择器　25

1.6.1　后代选择器　26

1.6.2　子代选择器　27

1.6.3　兄弟选择器　28

1.6.4　相邻选择器　29

1.7　:first-letter 和:first-line　32

1.7.1　:first-letter 选择器　32

1.7.2　:first-line 选择器　32

第　2 章 CSS 规范　34

2.1　CSS 规范简介　34

2.2　命名规范　34

2.2.1　CSS 文件命名　35

2.2.2　id 和class 命名　35

2.3　书写规范　38

2.4　注释规范　40

2.4.1　顶部注释　40

2.4.2　模块注释　40

2.4.3　简单注释　41

2.5　CSS reset　41

2.5.1　什么是CSS reset　41

2.5.2　为什么要用CSS reset　42

2.5.3　如何使用CSS reset　42

第3　章 盒子模型　45

3.1　CSS 盒子模型　45

3.2　深入border　48

3.2.1　性能差异　48

3.2.2　兼容差异　48

3.3　深入padding　48

3.4　外边距叠加　50

3.4.1　外边距叠加的3 种情况　51

3.4.2　外边距叠加的意义　53

3.5　负margin 技术　54

3.5.1　负margin 简介　54

3.5.2　负margin 技巧　57

3.6　overflow　64

第4　章 display 属性　67

4.1　块元素和行内元素　67

4.1.1　块元素　67

4.1.2　行内元素　68

从0　到2 1 系列图书 目录

4.2　display 简介　69

4.2.1　block 元素　69

4.2.2　inline 元素　70

4.2.3　inline-block 元素　70

4.3　display:none　72

4.3.1　display:none 简介　72

4.3.2　display:none 和visibility:hidden 的

区别　73

4.4　display:table-cell　75

4.4.1　图片垂直居中于元素　75

4.4.2　等高布局　77

4.4.3　自动平均划分元素　79

4.5　去除inline-block 元素间距　80

第5　章 文本效果　84

5.1　文本效果简介　84

5.2　深入text-indent　84

5.3　text-align　87

5.3.1　text-align 起作用的元素　88

5.3.2　text-align:center; 与margin:0

auto;　89

5.4　深入line-height　89

5.4.1　line-height 的定义　90

5.4.2　深入line-height　91

5.5　深入vertical-align　97

5.5.1　vertical-align 属性取值　97

5.5.2　vertical-align 属性应用　99

第6　章 表单效果　104

6.1　表单效果简介　104

6.2　深入radio 和checkbox　105

6.3　深入textarea　106

6.3.1　固定大小，禁用拖动　106

6.3.2　在Chrome（或Firefox）和IE 中

实现相同的外观　109

6.4　表单对齐　110

第7　章 浮动布局　113

7.1　正常文档流和脱离文档流　113

7.1.1　正常文档流　113

7.1.2　脱离文档流　114

7.2　深入浮动　116

7.3　浮动的影响　118

7.3.1　对自身的影响　119

7.3.2　对父元素的影响　119

7.3.3　对兄弟元素的影响　121

7.3.4　对子元素的影响　125

7.4　浮动的副作用　126

7.5　清除浮动　128

7.5.1　clear:both　128

7.5.2　overflow:hidden　130

7.5.3　::after 伪元素　131

第8　章 定位布局　133

8.1　深入定位　133

8.1.1　子元素相对父元素定位　133

8.1.2　子元素相对祖先元素定位　136

8.2　z-index 属性　138

第9　章 CSS 图形　141

9.1　CSS 图形简介　141

9.2　三角形　142

9.2.1　CSS 实现三角形的原理　142

9.2.2　带边框的三角形　145

9.3　圆角与圆　148

9.3.1　border-radius 实现圆角　148

9.3.2　border-radius 实现半圆和圆　152

9.3.3　border-radius 的派生子属性　154

9.4　椭圆　155

9.5　图标制作　156

第　10 章 性能优化　164

10.1　CSS 优化简介　164

　从0 到1 系列图书 目录　3

10.2　属性简写　165

10.2.1　盒模型简写　165

10.2.2　背景简写　167

10.2.3　字体简写　168

10.2.4　颜色值简写　168

10.3　语法压缩　169

10.3.1　空白符　169

10.3.2　结尾分号　169

10.3.3　url() 的引号　170

10.3.4　属性值为0　170

10.3.5　属性值为“以0 开头的小数”　171

10.3.6　合并相同的定义　171

10.3.7　利用继承进行合并　172

10.4　压缩工具　173

10.5　图片压缩　174

10.5.1　JPEG、PNG 和GIF　175

10.5.2　图片压缩　175

10.6　高性能选择器　175

10.6.1　选择器在浏览器中的解析原理　176

10.6.2　不同选择器的解析速度　176

第　11 章 CSS 技巧　178

11.1　水平居中　178

11.1.1　文本的水平居中　178

11.1.2　元素的水平居中　179

11.2　垂直居中　183

11.2.1　文本的垂直居中　183

11.2.2　元素的垂直居中　185

11.3　CSS Sprite　188

11.4　iconfont 图标　192

11.4.1　iconfont 网站　193

11.4.2　iconfont 技术　195

第　12 章 重要概念　202

12.1　CSS 中的重要概念　202

12.2　包含块（containing block）　202

12.2.1　什么是包含块　202

12.2.2　包含块的判定以及包含块的范围　203

12.3　层叠上下文（stacking context）　206

12.3.1　什么是层叠上下文　207

12.3.2　什么是层叠级别　207

12.3.3　层叠上下文的特点　208

12.4　BFC 和IFC　210

12.4.1　基本概念　210

12.4.2　什么是BFC　211

12.4.3　BFC 的用途　213

附录1　HTML 进阶

第１3　章 基础知识　222

13.1　HTML、XHTML 和HTML5　222

13.1.1　HTML 和XHTML　222

13.1.2　HTML5　223

13.2　div 和span　225

13.3　id 和class　226

13.3.1　id 属性　226

13.3.2　class 属性　226

13.4　浏览器标题栏小图标　227

第　14 章 语义化　229

14.1　语义化简介　229

14.2　标题语义化　231

14.3　图片语义化　232

14.3.1　alt 属性和title 属性　233

14.3.2　figure 元素和figcaption 元素　233

14.4　表格语义化　236

14.5　表单语义化　239

14.5.1　label 标签　239

从0　到4 1 系列图书 目录

14.5.2　fieldset 标签和legend 标签　241

14.6　其他语义化　242

14.6.1　换行符
　242

14.6.2　无序列表ul　243

14.6.3　strong 标签和em 标签　244

14.6.4　del 标签和ins 标签　245

14.6.5　img 标签　246

14.7　语义化验证　246

14.8　HTML5 舍弃的标签　248

附录2　前端面试题

选择题　251

问答题　257