簡述PC端的寬高自适應問題

PC端的寬高自适應

寬度自适應（了解）：元素的寬預設是跟随父元素的， 盡量不要規定死；不寫預設是100%的父元素的寬度；

後續：寬度100%，根據視窗的寬度不同，作出不同結構變換的響應式網頁；

高度自适應；

高度自适應第一種情況：内容撐開父元素

主要針對内容塊；（考慮一些版塊後期會不會經常性修改）

需求一：當元素的height不去設定或者是設定成auto是（預設），那麼height是被内容撐開的；

需求二、當内容特别少的情況下，讓容器有一個最小高度；------>min-height:

拓展：(IE低版本不支援min-height)但是IE6預設的把height解析成最小高度；

如果想讓高版本和IE6裡面效果完全一緻（一般開發不考慮IE6使用者，但是這裡體會一下處理相容性問題的思路）

如果同時使用min-height 和 height，高版本浏覽器執行結果是height的固定高度

方法1、使用過濾器：min-height:300px; _height:300px（下劃線過濾器，隻有IE6能識别帶有下劃線的屬性）

方法2、使用!importan ----> min-height:300px; height:auto!important; height:300px;

高版本浏覽器會執行min-height:300px;同時，height:auto;的權重高優先執行，滿足了效果；

IE6不識别min-height,同時也不認識!important ，不會認為height:auto;權重高，則會執行height:300px;同時将height當做最小高度執行，滿足内容撐開高度，且有最小高度的需求

那麼需要考慮：如果高度自适應的版塊内的子元素添加了浮動，會有怎樣的影響？怎麼處理？

父元素添加min-height，子元素添加了浮動，子元素無法撐開父元素的高度，依舊是最小高度；

但如果不給父元素設定高度，會出現高度塌陷！如果想滿足子元素即有浮動而且父元素還能實作高度自适應的需求。就需要解決高度塌陷問題；

解決高度塌陷：

​ 方法1、給出現高度塌陷的元素添加overflow：hidden----->觸發BFC（一種布局邏輯）

​ BFC規定：計算BFC高度的時候，浮動元素也會參與計算。

​ 弊端：會隐藏掉定位在元素外圍的内容；

​ 方法2、增加一個帶有clear:both;且高為0的盒子

​ clear:both;浮動的清除，給最下面的0高度的元素添加閉合浮動，就不會因為上面浮動的元素不占據空間而上去； 可以了解把這個元素釘在這，不因上面高度塌陷上去占據空間；滿足了高度自适應的同時還能給子元素添加浮動的情況；

​ 弊端：代碼備援，代碼内會出現很多空元素，對浏覽器不友好；

​ 方法3、萬能清除法； 所有情況全考慮，需要時，加上類名就行；

​ 僞類： .clear_fix:after {

contene:".";

clear:both;

display:block;

height:0;

overflow:hidden;

visibility:hidden;------------------>display:none;是徹底隐藏，不再占據空間，而visibility:hidden；是隐藏 元素但是依舊占據空間；

}

如果IE浏覽器出現高度塌陷問題：

直接-------> .clear_fix{ zoom:1;} 屬于IE浏覽器相容性問題專用

最終效果就是：實作了即使用了浮動讓子元素橫向排列，又利用萬能方法解決了子元素浮動父元素高度自适應帶來的高度塌陷問題；

高度自适應的第二種情況：讓子元素高度随着父元素高度進行改變。

百分比需求：案例---->将一個元素在整個視窗完全平鋪---->需要将body和html的高度設定成100%

html,bdy{height:100%;}

再進行子元素的寬高設定；