高度自適應

高度自適應第一種情況

1.高度不去設置，或者高度設置auto 內容撐開父元素的高度。
2.內容撐開父元素的高度 -> 最小高度的設置 min-height
3.浮動元素添加高度自適應 -> 添加浮動元素的父元素沒有高度，會出現高度塌陷

 

解決高度塌陷的方法

(1)給出現高度塌陷的元素添加：overflow:hidden;
原理：overflow:hidden;觸發了一個 BFC(布局邏輯)
BFC規定：計算BFC高度時候，浮動元素也參與計算。
弊端：隱藏掉定位在當前元素外圍的內容。

 

(2)在浮動元素的下方（同級）添加一個空的div，給div設置樣式div{clear:both;}
原理：添加的空div添加了clear：both;忽略上方同級添加浮動的元素留出的空間。在父元素最底下顯示，撐 開父元素高度。
弊端：形成代碼的冗余（出現高度塌陷，添加一個div）

 

(3)萬能清除法：

.clear_fix:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
 zoom:1;
}

 

高度自適應第二種情況

讓子元素高度隨着父元素高度進行改變。

 

讓一個元素在瀏覽器窗口完全鋪滿

前提條件：

body,html{
 height:100%;
}

 

clear

clear:both; 當前元素會忽略上方添加浮動的元素 留出來的空間。
(閉合浮動)
clear的屬性值：

clear:left
clear:right
clear:both

 

偽對象選擇符

1.元素選擇符

::after{
content:"";
}

說明： 在某個元素的后面用css的形式添加內容（圖片、文本）。
2.元素選擇符

::before{
content:"";
}

說明： 在某個元素的前面用css的形式添加內容（圖片、文本）。
3.元素選擇符

::first-letter{

}

說明：控制第一個字符的樣式
4.元素選擇符

::first-line{ }

說明：控制第一行的樣式

display:none;

將元素徹底隱藏，不再占據空間

visibility:hidden;

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