[TOC]
## absolute概要
眾所周知absolute能讓一個元素依據它的定位父級進行定位,如果沒有定位父級**則會根據視口來進行定位**。
### absolute與視口
沒有定位父級的時候,絕對定位的元素是以視口為定位基準的而**不是**html。
#### 示例1

### absolute與fixed
fixed定位的祖先元素也能作為absolute的元素的定位基準
#### 示例2

### absolute與display
absolute的元素和float后的元素一樣,瀏覽器都會隱形的將元素轉換成`block`級別

## absolute的伸縮特性
一般我們為一個元素設置寬高無外乎兩種方式:
- 通過`px`直接在元素身上設置
- 通過`%`根據父容器的大小來設置
而利用absolute的伸縮特性,也能幫助我們為元素設置寬高。
### 最大拉伸大小
#### 示例3
如果定位元素的祖先元素沒有定位,最大可拉伸到與視口等大。

#### 示例4
如果定位元素的祖先元素有定位(包括fixed定位),最大只能拉伸到定位祖先元素的寬高。

### absolute、`%`以及子元素
利用`absolute`設置元素大小的元素的**子元素**是可以利用`%`來設置大小的,它的參考標是它的定位父級元素(沒有,則為視口)
>[warning] **注意:** 這一點在父元素高度不明確的情況下(使用min/max-height或不定義高度的情況下),仍然適用。(非定位的話,百分就會失效為auto,也就是看元素自己內容的高度)
#### 示例5

### absolute拉伸的自適應性和塊級元素自適應性的區別
從上面的例子中我們不難看出通過absolute拉伸的元素的寬高都是自適應的,或依據視口大小的改變而改變,或依據定遠父級的大小改變而改變。
有的同學會說,塊級元素不都是如此嗎?
塊級元素所有也有伸縮特性,但只在水平方向,我們仔細觀看上面的例子,不難發現我們通過absolute是元素**在垂直方向也進行了伸縮拉伸**。
除此之外,我們**還能在這個自適應的范圍里進行一些定制**,達到什么三列布局左右邊定寬中間自適應什么的。(會在最后的應用中舉栗)
#### 實例6
以下達到了一個類似于padding但確是自適應父容器content的效果

## absolute(fixed)的跟隨特性
absolute后的元素的位置雖然是以定位祖先元素或則視口為基準的,但是當我們absolute又沒有使用left等移動這個元素時,這個元素仍然在它原本所處的文檔流中的位置上。
我們將以上的表現稱之為absolute的跟隨性(即使祖先元素有定位依然有效)
>[danger] 需要注意的一點是固然absolute后的元素仍然會停留在它原本屬于文檔流時的位置,但它此時已經脫離文檔流,不再占位,故它后面的元素會補位。
### 示例7

## absolute,天元突破!
設置了absolute的元素,在父元素無定位的前提下,能夠突破父元素的限制(中間沒有定位祖先元素,甚至能突破出html元素直到**視口**)
并且在父元素`overflow:hidden`的限制下,`absolute`**仍然有效!** (只要設置overflow:hidden的祖先元素和absolute元素之間沒有定位元素)(非absolute/fixed定位的元素都會被裁剪掉)
也就是說,absolute的元素在設置了overflow:hidden的元素的外部**依然可見。**(其它定位只有`fixed`能達到同樣的效果)
另外如果是`overflow:auto/scroll`,在滿足**設置overflow:\*的祖先元素和absolute元素之間沒有定位元素**這條規則下,即使圖片超過容器大小,也**不**會出現滾動條
如下圖示例,可以在某一個div上模仿類fixed背景效果(fixed只能在視口容器上營造這種效果)

## absolute與text-align
照理說absolute會使元素塊狀化,而塊級元素是不受text-align影響的,**但是!!**
在absolute的**跟隨性**和幽靈空白節點(每個行框盒子在頭部都會產生一個)的共同作用之下,text-align就有效果了。
>[warning] **注意:** 如果要兼容IE低版本(不存在幽靈空白節點),則需要手動創造一個空白字符以供定位,
>
>比如`::before{content:'\2002'}`,其中\2002表示某一種空格
## absolute與clip
clip屬性必須配合absolute/fixed才會有效果,需要注意的是clip裁剪相較于overflow裁剪更加"強力",
體現在這貨裁剪的是`border-box`,而overflow是padding-box
## absolute與margin聯合の應用場景
### hot效果
我們常常將relative和absolute一起配合使用,但有些時候relative并不是必須的,它甚至會限制absolute的發揮——毀掉absolute的跟隨性

### 終極奧義:創世紀·宇宙坍塌
需要配合margin:auto,需要明確在哪個容器中展示此奧義并讓它定位(容器和absolute的元素之間沒有其它定位元素)。

- 空白目錄
- 未處理
- webpack中的css模塊化
- CSS預處理器
- 效果
- 元素裝飾與美化
- 顏色
- checkbox
- img
- background
- clip-path
- 字體
- 文本控制
- text-indent
- letter-spacing
- word-spacing
- word-break和word-wrap
- white-space
- text-align
- text-decoration
- text-transform
- first-letter
- first-line
- 有關CSS百分單位的那些奇葩事兒
- 破壞性、包裹性、塊狀化
- 強大的absolute
- padding
- relative
- 繼承性
- fixed
- float
- BFC
- z-index
- overflow
- clip
- 最佳可訪問性隱藏
- 關于scrollHeight/Width
- 包含塊
- margin
- 布局系統
- 雜
- Flex
- Grid
- 自定義布局系統
- gutter實現思路
- 選擇器
- 偽元素和偽類
- css3
- appearance
- CSS2.1
- tmp
- 未定義行為
- 焦點元素
- outline輪廓
- 替換元素
- 盒子模型
- 塊級元素/盒子
- 標記盒子
- 容器盒子(內在盒子)
- 內聯元素/盒子
- 字母X
- line-height
- vertical-align
- font-size
- 內聯元素盒子模型新解
- line-height定義
- line-height與行內框盒子模型
- line-height與內聯元素的高度機制
- line-height值
- line-height與圖片
- vertical-align支持的屬性值及組成
- vertical-align起作用前提
- vertical-align與圖片
- vertical-align與line-height
- vertical-align前后不一的行為表現
- vertical-align實際應用
- line-height與height
- width/height與auto
- 最小內容寬度
- 最大內容寬度
- min/max-width/height注意事項
- 流:外部尺寸與內部尺寸
- 流體布局下的寬度分離原則
- height:auto
- 瀏覽器渲染原理
- 移動端