寬高自適應：（靈活）
網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。
自適應的優點：
元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置、不同視窗和不同解析度下顯示。
一、 相對視窗和父元素的自適應寫法：
寬度：width：100%；
當塊狀元素不寫寬度的時候，預設的寬度就是100%； 是父元素的寬度的100%；也就是始終跟父元素是同寬的。
預設情況下：如果給塊元素加了絕對定位或者固定定位，他的寬度就不在是100%顯示了。也不會跟父元素同寬的，而是跟裡面的內容同寬，如果元素裡面沒有內容，有沒有定義寬高，這個時候，元素就不見了.
高度： html,body
當讓元素的高度相對瀏覽器視窗顯示半分比的值得時候，一定要給html和body設定高度100%；
注：百分比設定寬高的時候，都是相對當前元素最近的父元素得的百分比的值(百分比這個值顯示大小的參照物就是自己最近的父元素)
高度自適應：
1、相對視窗自適應
html,body
（全屏顯示的頁面必須要給 html,body設定高度100%）
注：百分比設定寬高的時候，都是相對當前元素最近的父元素顯得的百分比的值(百分比這個值顯示大小的參照物就是自己最近的父元素)
2、相對元素或者內容自適應：
1）非浮動元素的父元素高度自適應
實現方法：
①不設定高度，或者高度設定成 ： height:auto；
②通過最小高度實現高度自適應 ： min-height:300px;_height:300px;
③給需要高度自適應的元素新增這些屬性：
height:300px; /* 「」 叫做下劃線過濾器，專門來單獨過濾ie6 這個瀏覽器的，加了下劃線過濾器之後，只有ie6 這個瀏覽器識別當前的屬性，其他瀏覽器就都不識別了。 /
height:auto !important; / 具有最高優先順序，有的的瀏覽器都會去識別這具有!important；過濾器的這個屬性；!important; 對於ie6來說，是無效的，ie6不支援*/
height:300px; /* 專門讓ie6識別的 */
浮動元素的父元素高度自適應
注：如果想實現元素高度自適應（相對元素或者是內容）：
說明：當父元素不設定高度的時候，第一級子元素浮動後，父元素高度塌陷；怎麼去解決？（只要解決了高度塌陷的問題，父元素就能實現高度自適應了）
解決方法：
1)可以給固定高度去解決高度塌陷問題，
弊端：不能讓元素高度自適應
2)overflow:hidden; 解決高度塌陷並能實現高度自適應的方法
弊端：只要裡面的元素內容超出父元素以外，就會被隱藏（遵循bfc的顯示原則）
3)在浮動元素的下方新增乙個空元素，並設定以下屬性：
空標記：
clear:both; height:0; overflow:hidden;
弊端：會新增很多空標記，增加結構負擔，產生**冗餘
4)display:table 給父元素新增display:table;讓父元素轉換元素型別，跟**一樣
弊端：會改變當前元素的元素型別
5)萬能清除法：
::after
說明：推薦使用萬能清除法；
弊端：單詞太多，不好記
例：
新增後即可解決高度塌陷的問題
偽物件（元素）選擇符：
(這幾個微元素選擇器前面的冒號可寫一組也可寫兩組；)
1）::after: 與content屬性一起使用，定義在物件後的內容。（必須具有屬性content）
語法：選擇符： :after
選擇符： :after
2）::before: 與content屬性一起使用，定義在物件前的內容
語法：選擇符： :before
選擇符： :before
3) ::first-letter 定義物件內第乙個字元的樣式。
說明：（該偽元素只能用於塊級元素）
4) ::first-line 定義物件內第一行字元的樣式。
說明：（該偽元素只能用於塊級元素）
舉例：
visibility:hidden; 和display:none; 的區別
hidden屬性會使物件不可見，當愛物件在網頁所佔的控制項沒有改變，等於留出了一片空白區域；
而display:none;屬性會使整個物件徹底消失不顯示，也不再占用位置。
說明：visibility：hidden；讓元素隱藏，元素的位置保留；
display：none;讓元素隱藏，元素的位置也不保留；
注：如果想實現元素高度自適應（相對元素或者是內容）：
1、高度能不能設定成固定的值？？
2、高度不能固定，那該怎麼設定呢？？
設定背景圖大小的屬性： background-size:
px 設定兩個值：第乙個值代表的是 寬 ；第二個值高
% 設定兩個值：第乙個值代表的是 寬 ；第二個值高（相對元素大小顯示的百分比大小，）
cover 讓等比例放大或縮小，直到把元素的兩邊都覆蓋滿為止；（覆蓋整個元素）
contain 讓等比例放大或縮小，完全顯示在元素範圍內；（被包含在整個元素內）
min-width: 最小寬度
max-width： 最大寬度
min-height： 最小高度
max-height： 最大高度
注：這組屬性在ie6瀏覽器裡是不支援的；padding和margin顯示百分比顯示值得時候，他的參照物是根據視窗的寬度來顯示的。
padding-top/bottom ;margin-top/bottom;
在設定百分比的時候，百分比大小顯示的參照物是視窗寬度（會根據視窗寬度顯示百分比的值。）
寬高自適應
網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應 元素自適應在網頁布局中非常重要，他能夠使網頁顯示更加靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...
寬高自適應
寬高自適應可以使得網頁更加靈活，適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下，不新增定位時 寬度自適應的比例，是參照父元素的寬度進行顯示的，也就是說，如果元素的父元素是整個頁面的話，顯示的時候就是鋪滿整個螢幕 如果當父...
css image自適應寬高
width 100 height 100 object fit cover 關鍵屬性 object fit fill object fit contain object fit cover object fit none object fit scale down 全域性屬性 object fit ...