overflow · css炼金

[toc] ## 关于padding-bottom 各浏览器厂商在容器可滚动的情况下，对padding-bottom是否保留意见是不同的(其它不为的padding是统一会保留的) ![](https://box.kancloud.cn/1c0ad55ee343c01f4cd3ba68f5c6f0df_815x205.png) ## 关于overflow-x和overflow-y 如果overflow-x和overflow-y属性中的一个值设置为visible，而另外一个设置为scroll、auto或hidden，则visible的样式表现会如同auto。也就是说，除非overflow-x和overflow-y的属性值都是visible，否则visible会当成auto来解析。换句话说，永远不可能实现一个方向溢出裁剪或滚动，另一个方向内容溢出显示的效果。但是scroll、auto和hidden这3个属性是可以共存的。 ## 滚动条 HTML中有两个标签是**默认**可以产生滚动条的，一个是根元素`<html>` 另一个是文本域`<textarea>` 因为这两个标签默认的overflow属性值都不是visible（为auto） ### 默认滚动条均来自`<html>` 不是来自body 所以，如果我们想要去除页面默认滚动条 ``` html{overflow:hidden} ``` ### 滚动条会占用容器的可用宽度或高度（client-\*) 占据的宽度为17px ## overflow与text-overflow ``` .ell{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } ``` ## overflow与锚点 ### 锚点定位行为的触发条件分为如下两种情况 #### URL地址中的锚链与锚点元素对应并有交互行为前提条件：被查找的锚点元素要是处于非隐藏状态 ``` <a href='#1'></a> <h2 id='1'></h2> ``` 也可以使用`location.hash=1`进行跳转 #### 可focus的锚点元素处于focus状态对焦点元素进行定位 ``` document.querySelector('input').focus() ``` #### 区别 URL地址锚链定位是让元素定位在浏览器窗体的上边缘，而focus锚点定位是让元素在浏览器窗体范围内显示即可，不一定是在上边缘 ### 本质与行为表现本质上是通过改变**容器**滚动高度或则宽度来实现的。定位行为的发生是由内而外的，由内而外是指一个锚点元素可能会触发多个滚动容器的定位比如一个div里有一个h2,不仅div会滚动到h2的位置，html容器也会滚动到h2的位置，并且是由内而外触发 ### overflow：hidden也是可以滚动的