CSS overflow特性及總結

2021-07-09 04:48:48 字數 1417 閱讀 1809

1.      overflow-x與overflow-y

如果兩值不同,其中一值為visible,另一值為 hidden、scroll、auto,則visible被重置為auto,自動重置。所以給乙個寬高都大於容器的內容div設定overflow-x:hidden; 會使得其x方向隱藏,y方向出現滾動條。

2.      滾動條一般17px。

3.      如果設定內容器寬度為100%,可能出現滾動條,如果想自適應,最好不要加width屬性。

4.      預設滾動條來自html元素。

5.      獲取滾動高度

var st=document.documentelement.scrolltop||document.body.scrolltop;

6.      overflow會有padding-bottom缺失現象,會導致滾動高度不同。

7.      滾動條寬度

占用容器寬度,容器寬度- 子元素.clientwidth=滾動條寬度

8.      如果使用overflow:auto ,可能出現水平居中container因為滾動條的出現而跳動。解決方案如下:

(1)      html{

overflow-y:scroll;

(2)  .container{

padding-left: calc(100vw-100%);

其中 100vw 指瀏覽器寬度,100%指可用內容寬度

9.      可以觸發bfc(塊級格式化上下文)的overflow值:auto、hidden、scroll。

10.  特性

(1)      內部浮動無影響(除visible)

(2)避免margin穿透問題(除visible)

(3)實現兩欄自適應布局

這樣實現兩欄自適應布局好處:浮動元素的兄弟元素clear:both;不受影響

上圖中,給藍色div設定clear:both 狗狗不會向下移動,因為藍色div overflow

:hidden 以後bfc化,不受外部浮動元素影響。這樣實現的兩欄自適應布局更加健壯。

都不好,推薦在浮動元素上寫兩元素間距

11.  overflow失效

當overflow元素在絕對定位元素與其有定位的父元素或者body之間時,overflow屬性失效。

如何避免overflow元素失效:(1)overflow元素自己作為有定位的那個父級元素;(2)overflow的子元素作為有定位的父級元素(3)任意合法transform宣告作為有定位的父級元素。

12.  overflow與其他屬性配合使用

13.  overflow選項卡技術

12月25日為本月最後乙個周五,按照慣例,圖書館將進行內部學習。12月25日(周五)下午閉館,晚上5點照常開放,望廣大師生讀者周知。

merge into的用法及10g新特性總結

merge into 的作用 將源資料 於實際的表,檢視,子查詢 更新或插入到指定的表中 必須實際存在 依賴於on條件,好處是避免了多個insert 和update操作。merge是乙個目標性明確的操作符,不允許在乙個merge 語句中對相同的行insert或update操作。這個語法僅需要一次全表...

matplotlib及pandas使用總結

1.import matplotlib.pyplot as plt import seaborn as sns 畫子圖 plt.subplot m,n m,n 個子圖 fig,ax1,ax2 plt.subplot 1,2,1 第乙個子圖 控制畫圖的大小 plt.figure figsize m,n...

STL特性總述 寫在前面

所謂的容器,見名知意,容納其他資料的 器具 特點 1 支援泛型 2 儲存副本 本質上傳入物件的拷貝。3 記憶體託管 構建物件於堆,無需人工干預,自動管理記憶體的生存週期。stl容器記憶體結構總述 stl 容器的分類與記憶體結構相關的。記憶體結構即分類標準 分類 從上圖示中,可以看出,總共分為三大類,...