# 精通CSS: 高級Web標準解決方案
## CSS選擇器
選擇器的特殊性分成4個成分等級: 1000, 100, 10和1.
- 如果樣式是行內樣式, 那么值為1000
- ID選擇器的值為100
- 類, 偽類和屬性選擇器的值是10
- 類型選擇器和偽元素選擇器是1
例如:
| 選擇器 | 特殊性 |
|------------|-----------|
|style = ""| 1000 |
|#wrapper #content {} | 200 |
|#content .datepicker{} | 110 |
|div#content | 101 |
|#content{} | 100 |
|p.comment .datepicker{} | 21|
|p.comment{} | 11 |
|div p{} | 2 |
|p{} | 1 |
|a[target] | 11 |
## 盒子模型
### 總述
在CSS中, width和height指的是內容區域的寬度和高度. 增加內邊距, 邊框和外邊距不會影響內容區域的尺寸, 但是會增加元素框的尺寸.
在IE6中, 在混雜模式下使用的是自己的非標準盒子模型. 它的width和height包括的內邊距和邊框.
### 外邊距疊加
在垂直方向的2個元素的外邊距會發生疊加, 最終只保留大的元素外邊距.
外邊距疊加存在如下3種情況:
1. 當一個元素出現在另一個元素上面時, 第一個元素的底部外邊距和第二個元素的頂部外邊距發生疊加.
2. 當一個元素包含在另一個元素時(假設沒有內邊距或者邊框將外邊距分隔開), 它們的頂和/底部外邊距也會發生疊加.
3. 外邊距升值可以與自身發生疊加. 假設有一個空元素, 它有外邊距, 但是沒有內邊距和邊框. 此時, 頂外邊距與底外邊距就碰到一起了, 它們會發生疊加.
只有在普通文檔流中的垂直外邊距才會發生疊加. 行內框, 浮動框或絕對定位框之間的外邊距都不會疊加.
## 定位概述
CSS中有三種定位機制: 普通流, 浮動流, 絕對定位. 除非專門指定, 否則所有的框都在普通流中. 普通流中的元素的位置是由元素在HTML中的位置決定的.
### 普通流
大多數的框是由顯式定義的元素形成的, 但是, 在將一些文本添加到一個塊級元素(比如div)的開頭時, 這些文本也會被當成塊級元素對待, 它們被稱為: 匿名塊. 如
```html
<div>
Some text
<p> hello world </p>
</div>
```
### 相對定位
如果對一個元素進行相對定位, 它將出現在它所在的位置上. 然后, 可以通過設置垂直或者水平位置(top, left, bottom, right), 讓這個元素"相對于"它的起點移動.
在使用相對定位時, 無論是否移動, 元素仍然占據原來的空間, 因此, 移動元素會導致它覆蓋其他框.
### 絕對定位
相對定位實際上被看起普通流定位模型的一部分, 因為元素的位置是相對于它在普通流中的位置的.
絕對定位使元素的位置與文檔流無關, 因此不占據空間.
絕對定位的元素的位置是相對于距離它最近的那個已定位的祖先元素確定的. 如果元素沒有祖先已定位, 則相對于起始元素(html元素).
### 固定定位
是絕對定位的一種, 只相對于viewport進行定位.
### 浮動
浮動的框可以左右移動, 直到它的外邊緣碰到包含框或另一個浮動框的邊緣. 因為浮動框不在文檔的普通流中, 所以文檔的普通流中的塊框表現得就像浮動框不存在一樣.
- 行框和清理
如果浮動的元素后面有一個文檔流中的元素, 那么這個元素的框會表現得浮動元素根本不存在一樣, 但框的文本內容會收到浮動元素的影響, 會移動留出空間. 即浮動元素旁邊的行框被縮短, 從而給浮動元素留出空間, 因為行框圍繞浮動框.
- 清除浮動
1. 在浮動元素后添加一個空的div, 給div設置`clear:both`
2. 給浮動的父元素設置一個`parent::after`偽類, 設置樣式清除浮動.
```css
.parent::after{
content:'.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
```
- 職業生涯
- 如何提升你的能力?給年輕程序員的幾條建議
- 那些年,那些事
- 阿里巴巴離職DBA 35歲總結的職業生涯
- 人生的四種選擇
- 程序人生的四個象限和兩條主線
- 幾縷代碼與閑思
- 張小龍-學習筆記
- Web前端
- 移動Web手冊
- 精通CSS: 高級Web標準解決方案
- 悟透JavaScript
- 架構設計
- 大型網站技術架構
- 周愛民-大道至簡
- RESTful Web Services Cookbook - 讀書筆記
- 大話設計模式
- Unix編程藝術
- 把程序員修煉之道讀薄
- 學習能力
- 奇特的一生:讀書筆記
- zhh-看源碼那些事
- 一個創業者怎么看待讀書和寫作
- 程序員修煉之道
- 2015/1/5 頭腦風暴
- 書單計劃
- 2014年我讀過的那些書
- 我的后端開發書架2015
- 別人的書單
- 讀書筆記
- 浪潮之巔
- 達內時期自己筆記整理
- Effective Java
- 打造facebook: 讀書筆記
- 面試整理
- 阿里面試的一點感受
- 騰訊的三輪面試
- 三十之惑–面霸
- 前端面試問題匯總
- 八爪網絡面試總結
- 2015面試總結總結
- 找工作流程梳理
- 最全前端面試問題及答案總結
- 前端開發面試題收集
- 百度web前端--2015一面
- 百度web前端--2015二面