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