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也是可以滾動的