[toc]
## 使用前提:需要absolute/fixed定位屬性配合
`clip:rect()`屬性需要絕對定位配合才有用
## 裁剪區域
裁剪區域是裁剪出來的一塊區域,這個區域的顯示有`overflow`的值決定,默認為visible,
而裁剪區域以外的區域默認都被裁掉了,也就是隱藏了(且隱藏掉的部分能透出下面的背景)。

### overflow:auto
如果overflow設置為溢出時允許滾動(clip和overflow在同一個元素身上),那么在火狐/Chrome下,被clip隱藏掉的內容也能滾動(只是不會出現滾動條(相較于oveflow:hidden))。
另外,如果clip后的元素作為一個容器中的內容,在**chrome**下clip隱藏掉的部分**也**會**占位**,而firefox下不會占位

### 裁剪區域坐標都是相對于元素(0,0)點
`clip:rect(top,right,bottom,left)`雖然四個參數分別為top,right,bottom,left,但這四個參數都是相對于元素的(0,0)點來說的
(就是相對于設置clip屬性的這個元素**本身**,而不是absolute元素的定位父級,嗯,注意!),
比如這里的第二個參數,即right所處的位置,若填個10px,并不是距離右邊10px,而是距離(0,0)靠右10px,也就是離最左邊10px。
## 裁剪基準
裁剪基準不像oveflow是padding-box,clip的裁剪基準更大,是**border-box**
## 就地隱藏元素
當元素裁剪設置為`0,0,0,0`是隱藏元素的意思,而不是照樣顯示
```
.clip{
position:absolute;
clip:rect(0,0,0,0);
}
```
- 空白目錄
- 未處理
- 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
- 瀏覽器渲染原理
- 移動端