CSS世界

实例代码：《CSS世界》demo原型页面索引

第1章 概述

1. 流体布局
2. table
3. CSS3

第2章 术语和概念

1. 未定义行为

第3章 流、元素和基本概念

1. 块级元素
   • 为什么list-item元素会出现项目符号
   • display: inline-table;的盒子是怎样组成的
   • width/height作用在哪个盒子上
2. width/height作用的具体细节
   • 深藏不漏的width:auto
   • width值作用的细节
   • CSS流体布局下的宽度分离原则
   • 改变width/height作用细节的box-sizing
   • 相对简单的height:auto
   • 关于height:100%
3. min-width/max-width和min-height/max-height
   • 为流体而生的min-width/max-width
   • 与众不同的初始值
   • 超越!important，超越最大
   • 任意高度元素的展开收起动画技术
4. 内联元素
   • 哪些元素是内联元素
   • 内联盒模型
   • 幽灵空白节点

第4章 盒尺寸四大家族

1. 深入理解content
   • content与替换元素
   • content内容生成技术
2. 温和的padding属性
   • padding与元素的尺寸
   • padding的百分比值
   • 标签元素内置的padding
   • padding与图形绘制
3. 激进的margin属性
   • margin与元素尺寸以及相关布局
   • margin的百分比值
   • margin合并
   • margin:auto
   • margin无效情形解析
4. 功勋卓著的border属性
   • 为什么border-width不支持百分比值
   • 了解各种border-style类型
   • border-color和color
   • border与透明边框技巧
   • border与图形构建
   • border等高布局技术

第5章 内联元素与流

1. 字母x
   • 字母x与CSS世界的基线
   • 字母x与CSS中的x-height
   • 字母x与CSS中的ex
2. 内联元素的基石line-height
   • 内联元素的高度之本——line-height
   • 为什么line-height可以让内联元素“垂直居中”
   • 深入line-height的各类属性值
   • 内联元素line-height的“大值特性”
3. line-height的好朋友vertical-align
   • vertical-align家族基本认识
   • vertical-align作用前提
   • vertical-align和line-height之间的关系
   • 深入理解vertical-align线性类属性值
   • 深入理解vertical-align文本类属性值
   • 简单了解深入理解vertical-align线性类属性值上标下标类属性值
   • 无处不在的vertical-align
   • 基于vertical-align属性的水平垂直居中弹框

第6章 流的破坏与保护

1. 魔鬼属性float
   • float的本质与特性
   • float的作用机制
   • float更深入的作用机制
   • float与流体布局
2. float的天然克星clear
   • 什么是clear属性
   • 成事不足败事有余的clear
3. CSS世界的结界——BFC
   • BFC的定义
   • BFC与流体布局
4. 最佳结界overflow
   • overflow裁剪界线border box
   • 了解overflow-x和overflow-y
   • overflow与滚动条
   • 依赖overflow的样式表现
   • overflow与锚点定位
5. float的兄弟position:absolute
   • absolute的包含块
   • 具有相对特性的无依赖absolute绝对定位
   • absolute与text-align
6. absolute与overflow
7. absolute与clip
   • 重新认识的clip属性
   • 深入了解clip的渲染
8. absolute的流体特性
   • 当absolute遇到left/top/right/bottom属性
   • absolute的流体特性
   • absolute的margin:auto居中
9. position:relative才是大哥
   • relative对absolute的限制
   • relative与定位
   • relative的最小化影响原则
10. 强悍的position:fixed固定定位
    • position:fixed不一样的“包含块”
    • position:fixed的absolute模拟
    • position:fixed与背景锁定

第7章 层叠规则

1. z-index
2. 层叠上下文和层叠水平
3. 理解元素的层叠顺序
4. 牢记层叠准则
5. 深入了解层叠上下文
   • 特性
   • 创建
   • 层叠上下文与层叠顺序
6. z-index负值深入理解
7. z-index准则

第8章 文本处理能力

1. line-height的另一个朋友font-size
   • font-size和vertical-align的隐秘故事
   • 理解font-size与ex、em和rem的关系
   • 理解font-size的关键字属性值
   • font-size:0与文本的隐藏
2. 字体属性家族font-family
   • 了解衬线字体和无衬线字体
   • 等宽字体的实践价值
   • 中文字体和英文名称
   • 一些补充说明
3. 字体家族其他成员
   • font-weight
   • font-style
   • font-variant
4. font属性
   • 缩写的font属性
   • 使用关键字值得font属性
   • font关键字属性值的应用价值
5. @font face规则
   • @font face的本质是变量
   • @font face与字体图标技术
6. 文本的控制
   • text-indent与内联元素缩进
   • letter-spacing与字符间距
   • word-spacing与单词间距
   • 了解word-break和word-wrap的区别
   • white-space与换行和空格的控制
   • text-align与元素对齐
   • 如何解决text-decoration下划线和文本重叠的问题
   • text-transform字符大小写
7. 了解:first-letter/:first-line伪元素
   • 深入:first-letter伪元素及其实例
   • :first-line伪元素

第9章 元素的修饰与美化

1. color
   • 颜色关键字
   • 不支持的transparent关键字
   • 不支持的currentColor变量
   • 不支持的rgba颜色和hsla颜色
   • 支持却鸡肋的系统颜色
2. background
   • 隐藏元素的background-image到底加不加载
   • 与众不同的background-position百分比计算方式
   • background-repeat与渲染性能
   • 外强中干的background-attachment:fixed
   • background-color背景色永远是最低的
   • 利用多背景的属性hack小技巧
   • 渐变背景和rgba背景色的兼容处理

第10章 元素的显示与隐藏

1. display与元素的显示/隐藏
2. visibility与元素的显示/隐藏
   • 不仅仅是保留空间
   • 了解visibility:collapse

第11章 用户界面样式

1. 和border形似的outline属性
   • 绝不可以在全局设置outline:0 none
   • 真正不占据空间的outline及其应用
2. 光标属性cursor
   • 琳琅满目的cursor属性值
   • 自定义光标

第12章 流向的改变

1. 改变水平流向的direction
   • direction简介
   • direction的黄金搭档unicode-bidi
2. writing-mode
   • writing-mode原来的作用
   • writing-mode改变了哪些规则
   • writing-mode和direction的关系