overflow出现的意义：当盒子的内容超出盒子的范围时，设置overflow的值能够控制当前元素展现的方式
overflow的取值
能够控制展示方式的那些取值：
- visible-默认值，超出当前元素范围时超出部分正常展示
- hidden-超出当前元素范围时，超出部分隐藏
- auto-未超出当前盒子范围正常显示，超出时出现滚动条，滚动查看超出部分内容
- scroll-滚动展示，超不超出都在当前元素上面出现滚动条
overflow超出的判定
盒模型有margin、border、padding、content。那超出当前盒子的哪一部分会发生剪裁（隐藏）效果呢？
答案是：border的内边缘。position为absolute的时候，依据的是padding-box，可以理解成一样。也就是说当内容超出padding的时候，就会发生剪裁行为。这也就是为什么，当内容中有图片的时候，会出现这种效果：
在这种情况下，我们可能就不能够使用padding来做视觉上面的间距效果，不妨尝试使用透明border实现间距效果
overflowX与overflowY
分别代表横向的和纵向的超出盒子部分所采取的措施。
当overflowX: visible | hidden | scroll时，overflowY:visible无效且无意义
我们可以思考一下排版的顺序，当X方向上为上述3个值中的任意一个值，Y方向都不会出现溢出效果。也就是说永远都不可能出现盒子x|y方向上内容溢出，另一个方向内容滚动或者隐藏的情况！（hidden也理解为内容溢出，因为溢出所以剪裁隐藏，即使内容隐藏了，隐藏的那一部分也还是存在）
overflow与滚动条
元素的滚动条：
- 在html标签中，可以默认产生滚动条的一个是html根元素，另一个就是textarea，因为这两个元素的overflow默认是
auto而不是visible- 想要去除元素的滚动条为该元素设置
overflow:hidden即可- PC端元素的滚动条占据实际的宽度，宽度大小为17px左右。
滚动条造成的影响：
- 当
overflow:auto的时候，元素内容超过该元素的范围，出现的滚动条会造成水平方向上的宽度重新计算排列。所以有时候会出现内容闪动的现象。
overflow与锚点
使锚点触发的行为：
- URL地址中的锚链与锚点元素对应，并且有交互行为
- 可focus的元素处于focus状态
锚点行为的本质就是通过改变容器滚动的高度和宽度来实现的（而不是浏览器的滚动高度）
锚点行为的特点：
当普通容器与窗体都发生滚动的时候，会先触发容器的锚点定位，再触发窗体的锚点定位
我们可以通过设置scrollTop来自由控制元素的滚动行为。元素设置了overflow中的auto、scroll、hidden都可以获取滚动高度。（hidden其实也可以发生滚动，只是我们的眼睛看不见而已）
与overflow相关的样式
单行文本溢出，溢出部分呈现3个点的样式：
div{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
多行文本溢出：
display: -webkit-box;
-webkit-line-clamp: 4; // 4行溢出
-webkit-box-orient: vertical;
overflow: hidden;
