一个设置了 overflow:hidden 声明的元素，假设同时存在 border 属性和 padding 属性，类似于下面的 CSS 代码：
// HTML
<div class="box">
<img src="1.jpg" width="256" height="192">
</div>
// CSS
.box {
width: 200px;
height: 80px;
padding: 10px;
border: 10px solid;
overflow: hidden;
}
则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是 border box 的内边缘，而非 padding box 的内边缘。
例子可手戳 -> https://demo.cssworld.cn/6/4-1.php
如果想实现元素剪裁同时四周留有间隙的效果的话，可以试试使用透明边框，此时内间距 padding 属性是无能为力。
探讨一个 overflow 属性的一个很经典不兼容的问题
如果容器可滚动(假设是垂直滚动),则 padding-bottom 也算在滚动尺寸之内， IE 和 Firefox 浏览器忽略 padding-bottom. 而 Chrome 浏览器则会渲染出来。
对于这样的不兼容，我们在实际项目开发中尽量避免滚动容器设置 padding-bottom 的值，除了样式不一样之外，还会导致 scrollHeight 值不一样。
了解 overflow-x 和 overflow-y
overflow-x 和 overflow-y 分别表示单独控制水平或垂直方向上的剪裁规则。
支持的属性和 overflow 属性一模一样
- visible： 默认值
- hidden： 剪裁
- scroll： 滚动条区域一直在
- auto： 不足以滚动时没有滚动条，可以滚动时滚动条出现
误区
认为只要 overflow-x 和 overflow-y 设置了上面的属性值，就一定会是这样的表现。
so～实际彩蛋
overflow-x 和 overflow-y 的属性值都是 visible，否则 visible 会当 auto 来解析。换句话说，永远不可能实现一个方向溢出剪裁或滚动，另一方向内容溢出显示的效果。
html {
overflow-x: hidden;
overflow-y: auto; /*多余*/
}
但是，scroll，auto 和 hidden 这3个属性值是可以共存的。
CSS文本溢出显示省略号
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
