CSS世界（文档）

整理完了《高性能JavaScript》这本书，往下就需要快速处理《CSS世界》，这本讲解CSS特性的书非常值得一读，内容完整，重点突出，实战性强，就是语言啰嗦。由于全书内容太多，而且需要一点一点的整理，所以放到了站点上，方便大家查看。

站点地址：前端开发文档
原文链接：CSS世界，豆瓣读书：CSS世界

CSS世界

第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的关系