學習前端的第十三天

2021-10-04 15:23:21 字數 1044 閱讀 3186

一、高度自適應

1.高度不去設定,或者高度設定auto 內容撐開父元素的高度。

2.內容撐開父元素的高度 最小高度的設定 min-height

3.浮動元素新增高度自適應 新增浮動元素的父元素沒有高度,會出現高度塌陷

二、高度塌陷

1.形成原因

當子元素有浮動,父元素沒有高度的時候,父元素會出現高度塌陷

注:浮動的子元素不會撐開父元素的 height 或者是 min-height。

2.解決方法

a.給出現高度塌陷的元素新增:overflow:hidden;

原理:overflow:hidden;觸發了乙個 bfc(布局邏輯)

bfc規定:計算bfc高度時候,浮動元素也參與計算。

弊端:隱藏掉定位在當前元素外圍的內容。

b.在浮動元素的下方(同級)新增乙個空的div,給div設定樣式

div原理:新增的空div新增了clear:both;忽略上方同級新增浮動的元素留出的空間。在父元素最底下顯示,撐開父元素高度。

弊端:形成**的冗餘(出現高度塌陷,新增乙個div)

c.萬能清除法:

.clear_fix:after

.clear_fix

三、萬能清除法

1.clear:both;

當前元素會忽略上方新增浮動的元素 留出來的空間。

2.偽物件選擇符

a.元素選擇符:

:after

說明: 在某個元素的後面用css的形式新增內容(、文字)。

b.元素選擇符:

:before

說明: 在某個元素的前面用css的形式新增內容(、文字)。

c.元素選擇符:

:first-letter

說明:控制第乙個字元的樣式

d.元素選擇符:

:first-line

說明:控制第一行的樣式

3. a.display:none;

將元素徹底隱藏,不再佔據空間

b.visibility:hidden;

將元素隱藏,佔據空間,在頁面上留下一片空白

前端學習 第十三天知識總結

第十三天知識總結 正常專案中 最小高度直接用min height即可。如果考慮相容 min height ie6不相容。ie6預設把height解析成最小高度 注 如果height 和 min height同是出現,執行height固定高度!最小高度的相容設定方法 了解 體會的是解決相容的思路 1 ...

學習Python 第十三天

二叉樹 一,名詞 根邊 樹葉 葉子 沒有兒子 兄弟 具有相同父親的節點 祖父和孫子 路徑路徑的長 深度 從根到該點 高 從該點到葉子 祖先 後裔 真祖先 真後裔 二,樹的實現 class treenode def init self,data,firstchild,nextsibling self....

Java學習第十三天

13.01 常見物件 stringbuffer類的概述 b stringbuffer和string的區別 13.02 常見物件 stringbuffer類的構造方法 b stringbuffer的方法 c 案例演示 13.03 常見物件 stringbuffer的新增功能 public string...