简单粗暴理解clip属性
TL;DR
clip其实就是将原盒子想象成一个坐标系，原点在左上角，然后计算出想要显示的矩形左上角和右下角的坐标，如（x1,y1）和（x2,y2）,这样clip的四个值就是（y1,x2,y2,x1），注意不要负号。position: absolute;clip: rect(30px,60px,50px,10px)
细细解释
clip属性，就是跟截图很相似，拿个框截取想要的部分，其他的都不要。 日常用法，截取（即只显示）某个盒子的一部分出来。代码clip:rect(1 2 3 4)，重点就是这四个数字的意思。 首先，做个初中数学题目。 如图，已知：矩形ABCD，长100，宽60，现在另外一个矩形EFGH，长50，宽20，EFGH在ABCD内部，EF距离AB是30，EH距离AC是10，现在求E和G的坐标。
思考~
思考~
思考~
答案揭晓，E(10,-30)，G(10+50,-(30+20))，不带负号的话，E(10,30)，G(10+50,30+20)
现在，在看下clip，你要在哪个盒子上截取，就在哪个盒子上写这个属性，盒子相当于ABCD，想要截取多大的矩形就是EFGH，那四个值怎么得到呢，E(10,30)，G(10+50,30+20) => (10,30,10+50,30+20)，还差点，将第一个值放在最后就可以了E(10,30)，G(10+50,30+20) => (10,30,10+50,30+20) => (30,10+50,30+20,10)，这就可以了！
注意的坑：
- clip的盒子必须有
position:absolute - 必须带单位，如
px em rem等 - 所谓截取出来，就是你看到的部分，其余部分看不见但是仍然占位
- 坐标出来以后，去掉负号，并且将第一个放在最后一个
上面的demo，变成代码试试。
<div style="width: 100px;height: 60px;background: #f69;position: absolute;clip: rect(30px,60px,50px,10px)" ></div> 复制代码
蓝色背景是盒子的实际占位，真实看到的是红色区域。
