重学CSS（11）—— overflow属性详解，利用CSS实现锚点定位

1.overflow的裁剪界线——border-box

overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。

<div style="width: 200px;height: 200px;overflow: hidden;border: 10px solid #ccc;padding: 20px">
    <img src="../小和尚.jpg">
</div>

裁切部分的留白似乎不是很符合我们的预期，如果想要实现元素裁切同时四周留白的话，可以利用透明边框，此时padding属性时无能为力的！

2.overflow与滚动条

HTML中有两个标签是默认可以产生滚动条的，一个是跟元素html，还有一个是文本标签textarea，只有这两个标签的默认overflow是auto属性，其他都是visible。关于浏览器的滚动条，有以下两个结论：

（1）在PC端，无论什么浏览器，默认滚动条均来自html，而不是body，这点可以由浏览器下body的默认margin不为零，但当内容高度超过100%的时候，滚动条离浏览器不会有间隙（body的默认margin）可以得出结论。上述结论只针对PC端有效！

（2）在PC端，滚动条出现就一定会占用容器的可用宽度/高度，也就是你本来布局非常准确的200像素宽度，在加入右侧滚动条后，可能会导致子元素的像素计算出现偏差，由于父容器的右侧挤入了一个不速之客——滚动条。因此在考虑PC端带滚动条布局的时候，可以减少子元素的实际可用宽度，通常情况下，浏览器滚动条所占的宽度是17px（并不是绝对的），因此可以考虑子元素在右侧留白>17px。注意本条定律也仅针对PC端有效，由于移动端的屏幕分辨率本来就低，因此滚动条一般以悬浮的方式出现，并不会占用实际宽度。

（3）既然滚动条在CSS布局中有如此重要的地位，因此其样式也是可以自定义的，在chrome浏览器中的属性如下：

• 整体部分，::-webkit-scrollbar;

• 两端按钮，::-webkit-scrollbar-button;

• 外层轨道，::-webkit-scrollbar-track;

• 内层轨道，::-webkit-scrollbar-track-piece;

• 滚动滑块，::-webkit-scrollbar-thumb;

• 边角部分，::-webkit-scrollbar-corner;

overflow除了和滚动条是PY关系，还有一些衍生属性也要依赖overflow