day16
1、 min-height ie6不相容問題
正常專案中：最小高度直接用min-height即可。
如果考慮相容：min-height ie6不相容。ie6預設把height解析成最小高度。若height 和min-height同時出現，ie6執行的事height固定高度。
最小高度的相容設定方法：（了解：體會解決問題的思路）
1：min-height:300px;_height:300px;
2:min-height:300px;height:auto!important;height:300px;
a:高版本瀏覽器解析順序：
min-height能識別，也可以識別！important ，所以height：auto；權重最高，這樣就能把把height:300px覆蓋。
b: ie6解析流程：
min-height不能識別，也不能識別！important，後寫的height：300px; 會把height：auto;覆蓋。
過濾器：語法：_屬性：屬性值；
只有ie6能識別帶有下劃線的屬性。
！important （ie6不識別）
語法：屬性：屬性值！important；
屬性過濾器
當在乙個屬性前面增加了後，該屬性只能被ie7識別，其他瀏覽器忽略該屬性的作用。
語法：*屬性：屬性值；
4. \9：ie版本識別；其他瀏覽器都不識別
語法：屬性：屬性值\9;
\0：ie8及以上版本識別；其他瀏覽器不識別
2、 高度塌陷
高度塌陷出現的場景：
當子元素有浮動，父元素沒有高度的時候，父元素會出現高度塌陷。
注：浮動的子元素不會撐開父元素的height 或者是 min-height。
解決高度塌陷的方法：
給出現高度塌陷的元素新增：overflow:hidden;
原理：overflow：hidden；觸發了乙個bfc（block formatting context 布局邏輯）
bfc規定：計算bfc高度的時候，浮動元素也參與計算。
弊端：會隱藏掉定位在當前元素外圍的內容。
在浮動元素下方（同級）新增乙個空的div，給div設定樣式
div原理：新增的空div新增了之後，會忽略上方同級新增浮動的元素流出的空間。
弊端：形成**的冗餘（沒出現乙個高度塌陷，都需要新增乙個div）
clear:both; 當前元素會忽略上方新增浮動的元素留出來的空間。（閉合浮動）
clear的屬性值：
clear:left;
clear:right;
clear:both;
萬能清除法：
.clear_fix:after
.clear_fix 此設定為ie6瀏覽器相容性考慮，可不加。
3、 為物件選擇符：
1． 元素選擇符:after(規範寫法::after)
說明：在某個元素的後面用css的形式新增內容（，文字）
2． 元素選擇符:before(規範寫法::before)
說明：在某個元素的前面用css的形式新增內容（，文字）
3． 元素選擇符:first-letter(規範寫法:: first-letter)
說明：控制第乙個字元的樣式。
4． 元素選擇符:first-line(規範寫法:: first-line)
說明：控制第一行的樣式。
4、 visibility屬性
visibility:hidden;
將元素隱藏，並佔據空間，在頁面上留下需隱藏元素塊的大小的空白。
注：display:none;
將元素徹底隱藏，不會佔據空間。
子元素定位，父元素高度自適應
現象 子元素用了position，脫離文件流，導致父元素沒有高度。解決方案 1.把子元素改成浮動布局，給父元素加上overflow屬性 overflow auto 2.在對應的子元素上，新增相同寬高的兄弟元素，該元素去掉position屬性，把定位元素的top值換成margin或padding值。b...
div根據父元素根據子元素高度自適應高度
切圖時經常遇見一種問題 父級的div高度為0，導致後面緊跟著的元素串位。特別是在使用bootstrap布局的時候 以前都是通過該margin調整 兩種情況 無特殊說明子元素都是指代父元素的第一級子元素 第一種 若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題.第二種 若子元素全是帶有...
CSS 父元素寬度自適應子元素寬度之和
直接新增 width max content 宣告就 ok，之前太單純了。最近碰見這樣乙個需求，要讓橫向排列設定 x 方向的滾動條滾動檢視，原本當直接建立乙個 ifc inline，float 什麼的 就解決了，搞了半天發現搞不定 ifc 也是不能父元素寬度自適應子元素寬度之和的，因為會換行。最後用...