CSS中的裁剪

1. overflow 剪裁界线border box

  当子元素内容超出容器宽度高度限制的时候，剪裁的边界是border box的内边缘。
  overflow对absolute元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow 属性剪裁，尤其当overflow 在绝对定位元素及其包含块之间的时候。
  上面这句话是官方文档的直译，似乎还是有些拗口，我们再换一种方法表述就是：如果overflow 不是定位元素，同时绝对定位元素和overflow 容器之间也没有定位元素，则overflow 无法对absolute 元素进行剪裁。
因此下面 HTML 中的图片不会被剪裁：

<div style="overflow: hidden;">
  <img src="1.jpg" style="position: absolute;">
</div>

overflow 元素父级是定位元素也不会剪裁，例如：

<div style="position: relative;">
 <div style="overflow: hidden;">
   <img src="1.jpg" style="position: absolute;">
 </div>
</div>

但是，如果 overflow 属性所在的元素同时也是定位元素，里面的绝对定位元素会被剪裁：

<div style="overflow: hidden; position: relative;">
  <img src="1.jpg" style="position: absolute;"> <!-- 剪裁 -->
</div>

如果overflow 元素和绝对定位元素之间有定位元素，也会被剪裁：

<div style="overflow: hidden;">
  <div style="position: relative;">
    <img src="1.jpg" style="position: absolute;"> <!-- 剪裁 -->
  </div>
</div>

如果overflow 的属性值不是hidden 而是auto 或者scroll，即使绝对定位元素高宽比overflow 元素高宽还要大，也都不会出现滚动条。
例如，下面的HTML 和CSS 代码：

<div class="box">
  <img src="1.jpg">
</div>

.box {
  width: 300px; height: 100px;
  background-color: #f0f3f9;
  overflow: auto;
}
.box > img {
  width: 256px; height: 192px;
  position: absolute;
}

图片高度256px 比容器.box 高度100px 明显高出了一截，但是，没有滚动条出现。

2. clip属性裁剪

clip: rect(top right bottom left)