高度自適應第一種情況
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;
?
將元素隱藏，占據空間，在頁面上留下一片空白
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45569.html
標籤：Html/Css
上一篇：HTML連載84-添加中部的圖片