clip属性

---

clip属性介绍

前沿

CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是此属性实际应用较少。大概由以下三个原因导致的：

1. 首先是理解上有些门槛
2. 使用率低
3. 此属性功能效果有不少替代方案

clip属性介绍

根据Dreamweaver的自动提示，clip有如下可用属性关键字：

1. auto: 即不剪切之意

2. inherit：据说IE浏览器是不支持的

3. rect(top right bottom left)：分别指最终剪裁可见区域的上边，右边，下边与左边，而所有的数值都表示位置，且是相对于原始元素的左上角而言的。最后有必要说明下：clip:rect矩形剪裁只能作用于position:absolute的元素上。
   点击跳转至demo

兼容性

相同与不同

相同点

1. rem与em皆由font-size来决定的。

不同点

1. rem是根据html跟元素的font-size为基数确定的，字体大小可能首先来自浏览器设置（16px）；em是根据使用em单位的元素的字体大小决定的（注：由于字体具有继承性，所以有时会被误认为父元素font-size来决定的，实际不然）；

总结

1. rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

2. em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。