我們在進行網頁布局時經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，實現這一過程就是寬高自適應。
元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置、不同視窗和不同解析度下顯示。
當塊狀元素不寫寬度的時候，預設的寬度是100%（即相對于父元素的寬度，始終跟父元素同寬），所以可以通過定義百分比代替具體值來設定寬度。在此前提下如果給塊元素加了絕對定位或者固定定位，元素寬度就不以100%顯示，同時也不會跟父元素同寬，而是跟裡面的內容同寬，如果元素裡面沒有內容，有沒有定義寬高，這個時候，元素不會顯示。
值得注意的是，通過定義百分比設定寬時（之後的高度相對視窗自適應也與之相同），元素都是參考當前位置最近的父元素來計算百分比的對應值(百分比顯示大小的參照物就是當前元素的最近父元素）。
1、相對視窗自適應：
這種情況類似之前所描述性的寬度自適應，也是通過定義百分比代替具體值來設定寬度，一般用在當前頁面只有一豎屏顯示高度的情況下。值得注意的是在當前情況下我們需要給html與body設定高度100%。如下：
2、相對元素或者內容自適應：
當頁面不是一屏顯示時，我們又該怎麼做呢？這是我們要做的就是相對元素或者內容進行自適應，下面我將介紹兩種實現方法：
1）非浮動元素的父元素高度自適應
a）不設定高度，或者高度設定成 ： height:auto；
b）通過定義最小高度實現 ：
c）給需要高度自適應的元素新增這些屬性：
注：帶有!important；關鍵字過濾器的屬性，要寫到相同屬性之前；
2）浮動元素的父元素高度自適應
不知讀者是否遇到過這種情況：當父元素不設定高度的時候，第一級子元素浮動後，父元素高度就消失了（即高度塌陷），解決這個問題就可以實現浮動元素的父元素高度自適應。
a）給父元素新增overflow：hidden；
弊端：只要裡面的內容或者元素超出父元素以外，就會被隱藏；
b）在浮動元素的下方新增乙個空標記，並且給設定屬性為：
弊端：會新增很多空標記，增加結構負擔，產生**冗餘；
c）給父元素新增display：table：
弊端：會改變當前元素的元素型別；寬高自適應
網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應 元素自適應在網頁布局中非常重要，他能夠使網頁顯示更加靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...
寬高自適應
寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...
寬高自適應
寬高自適應可以使得網頁更加靈活，適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下，不新增定位時 寬度自適應的比例，是參照父元素的寬度進行顯示的，也就是說，如果元素的父元素是整個頁面的話，顯示的時候就是鋪滿整個螢幕 如果當父...