基础

1. CSS教程：介绍和语法、注释

2. CSS教程：CSS和HTML搭配使用的方式（内敛样式、内部样式表、外部样式表）

3. CSS教程：标签的class属性，指定多个样式时，CSS优先级顺序

选择器

1. CSS教程：标签选择器

2. CSS教程：ID选择器

3. CSS教程：类（class）选择器（常用）

4. CSS教程：通用选择器

组合选择器

1. CSS教程：群组选择器（常用）

2. CSS教程：后代选择器（常用）

3. CSS教程：伪类选择器（常用）

4. CSS教程：子代选择器

5. CSS教程：选择器之间，有空格和没有空格的区别

其他

1. CSS：before 选择器

   • CSS：content属性设置特殊符号

2. CSS教程：:nth-child()选择器

样式

CSS教程：常用样式

CSS 颜色值

CSS教程：opacity 透明度

CSS教程：背景图

布局

1. CSS教程：盒子模型

2. CSS教程：块级元素、内联元素（行内元素）、内联块状元素

3. CSS float（浮动）

4. CSS clear清除浮动

5. CSS教程：position属性fixed、relative、absolute

6. CSS教程：z-index

7. CSS实现豆腐块

8. CSS实现导航条

自适应布局

CSS：@media 媒体查询语法、媒体类型

CSS：@media screen实现网页布局的自适应（优先级）

网格布局

CSS教程：网格布局（grid-template-columns、fr单位）

网格自适应布局案例

CSS：@media screen实现自适应网格布局

文字

1. css教程：多行文字，超出显示省略号

2. css教程：text-overflow: ellipsis

图片

1. CSS Sprites 雪碧图

其他

1. css教程：overflow

   • 内部div是float样式时，撑起外部div高度（overflow）

   • 子元素 margin-top 会影响父元素（overflow）

2. css样式：vertical-align垂直方向对齐

   • html css vertical-align baseline 基线对齐

案例

1. CSS案例：京东-加油卡部分

2. CSS案例：京东新闻列表

   • css教程：text-overflow: ellipsis

3. CSS案例：京东-新人福利、PLUS会员按钮

4. CSS案例：实现京东搜索框

5. css案例：下拉菜单

6. CSS案例：京东-我的购物车菜单

动画

1. CSS教程：transition过渡效果

2. CSS教程：transform 2D变形

3. CSS教程：animation动画

怪异模式

1. Quirks(怪癖怪异）模式和Standards（标准）模式

2. input高度和button高度不一致的原因（Quirks怪癖怪异模式）

3. css的box-sizing，以及值：content-box和border-box

原文出处：/show_1IX1FAlZsWEC.html