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的關係