元素的寬高自適應：（靈活）
網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據窗口或子元素自動調整，這就是pc自適應。
自適應的優點：
元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同設備、不同窗口和不同分辨率下顯示。
一、 相對窗口和父元素的自適應寫法：
寬度：
當塊狀元素不寫寬度的時候，默認的寬度就是100%； 是父元素的寬度的100%；也就是始終跟父元素是同寬的。
width：100%；
默認情況下：如果給塊元素加了絕對定位或者固定定位，他的寬度就不在是100%顯示了。也不會跟父元素同寬的，而是跟里面的內容同寬，如果元素里面沒有內容，有沒有定義寬高，這個時候，元素就不見了
高度：
當讓元素的高度相對瀏覽器窗口顯示半分比的值得時候，一定要給HTML和body設置高度100%；
高度自適應：
1、相對窗口自適應 html,body{height:100%;} （全屏顯示的頁面必須要給 html,body設置高度100%）
注：百分比設置寬高的時候，都是相對當前元素最近的父元素顯得的百分比的值(百分比這個值顯示大小的參照物就是自己最近的父元素)
—————————————————————————————————————————————————
2、相對元素或者內容自適應：
如何實現元素高度自適應？先思考這兩個問題：
a、如果想實現元素高度自適應，高度能不能設置成固定的值？？
b、如果高度不能固定，那該怎么設置呢？？
第一種情況：
1）非浮動元素的父元素高度自適應
實現方法：
1、不設置高度，或者高度設置成 ： height:auto；
2、通過最小高度實現高度自適應 ： min-height:300px;_height:300px;
3、給需要高度自適應的元素添加這些屬性：
min-height:value; height:auto !important;height:value;
注：帶有!important；關鍵字過濾器的屬性，要寫到相同屬性之前；
兼容IE6的寫法：
/*_height:300px;*/ /* “_” 叫做下划線過濾器，加了下划線過濾器之后，只有IE6 這個瀏覽器識別當前的屬性，其他瀏覽器就都不識別了。 */
height:auto !important;/* 具有最高優先級，有的的瀏覽器都會去識別這具有!important；過濾器的這個屬性 ；!important; 對於IE6來說，是無效的，IE6不支持*/
height:300px;/* 專門讓IE6識別的 */
過濾器："_" 叫做下划線過濾器，專門來單獨過濾IE6 這個瀏覽器的。_height:300p;x
“*”、“+” 過濾IE7 及以下瀏覽器的；*height:300px;
"\9" 過濾所有的IE瀏覽器的； height：300px \9;
“ \0 ” 過濾IE8及以上瀏覽器； height：300px \0;
!important； 關鍵字過濾器，具有最高優先級；ie6不支持；
第二種情況：
2）浮動元素的父元素高度自適應
說明：當父元素不設置高度的時候，第一級子元素浮動后，父元素高度塌陷；
怎么去解決？（只要解決高度他顯得問題，父元素就能實現高度自適應了）
1、可以個固定高度去解決解決高度塌陷問題，
弊端：但是不能讓元素高度自適應了 。
2、overflow：hidden; 解決高度塌陷並能實現高度自適應的方法一；（遵循BFC的顯示原則） 弊端：只要里面的內容或者元素超出父元素以外，就會被隱藏；
3、在浮動元素的下方添加一個空元素，並且給他設置一下屬性： 空標記：<div class="clear_fix"></div>
clear:both;height:0;overflow:hidden;
弊端：會添加很多空標記，增加結構負擔，產生代碼冗余；
4、display:table; 給父元素添加display：table；讓父元素轉換元素類型跟表格的特性一樣；
弊端：會改變當前元素的元素類型；
5、萬能清除法：
:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 說明：推薦使用萬能清除法；
弊端：單詞太多，不好記；
偽元素（對象）選擇器：（這幾個偽元素選擇器前面的冒號可寫一組，也可以寫兩組；）
1）、::after : 與content屬性一起使用，定義在對象后的內容。（必須具有屬性content：“”；）
語法：選擇符: ：after{content:”文字”;}
選擇符: ：after{content:url(圖片路徑)；}
2）、::before : 與content屬性一起使用,定義在對象前 的內容。
語法：選擇符: ：before{content:”文字”;}
選擇符: ：before{content:url(圖片路徑)；}
3） ::first-letter 定義對象內第一個字符的樣式。
說明：*(該偽元素只能用於塊級元素)
4） ::first-line:定義對象內第一行的樣式。
說明：*(該偽元素只能用於塊級元素。)
隱藏屬性：visibility:visible 顯示/hidden 隱藏;
visibility:hidden;和display:none;的區別：
visibility:hidden;屬性會使對象不可見，但該對象在網頁所占的空間沒有改變，等於留出了一塊空白區域；
而 display:none屬性會使這個對象徹底消失不顯示，也不再占用位置。
總結： visibility:hidden；讓元素隱藏；元素的位置是保留的；
display:none：讓元素隱藏； 元素的位置不保留，也被隱藏了；