[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); } ```