好程式設計師web前端培訓分享HTMLCSS之寬高自適應

　　好程式設計師 web前端培訓分享 HTMLCSS之寬高自適應， 寬高自適應 ， 網頁佈局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是pc自適應。
自適應的優點：
元素自適應在網頁佈局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置、不同視窗和不同解析度下顯示。

寬度自適應

元素寬度設定為100%。（塊元素寬度預設為100%）
或者不設定寬度（width）;（寬度是父元素的寬度）

高度自適應

1)自適應元素高度： height:auto; 或者不設定;（是子元素撐開父元素的高度）

2)元素高度自適應視窗高度
設定方法： html,body{height:100%;}
注：如果設定子元素的高度跟隨父元素的高度變化而變化，那麼父元素必須有高度。

最小高度的自適應

min-height 屬性：最小高度；(IE6瀏覽器不識別該屬性)

hack1:min-height:value;_height:value;

hack2:min-height:value; height:auto!important;height:value;

浮動元素父元素高度自適應（高度塌陷）

當子元素有浮動並且父元素沒有高度的情況下父元素會出現高度塌陷

高度塌陷的解決方法

hack1：給父元素新增宣告 overflow:hidden; (觸發一個BFC)
hack2: 在浮動元素下方新增空div,並給該元素新增
宣告： div{clear:both; height:0; overflow:hidden;}  

hack3:萬能清除浮動法

選擇符 :after   {

content :   "" ;

clear :   both ;

display :   block ;

height :   0 ;

overflow :   hidden ;

visibility :   hidden ;}

visibility:hidden/隱藏

visibility:hidden; 和 display:none; 的區別：
visibility:hidden; 屬性會使物件不可見，但該物件在網頁所佔的空間沒有改變，等於留出了一塊空白區域，而   display:none 屬性會使這個物件徹底消失不顯示，也不再佔用位置。

偽物件選擇符

1）、::after : 與content屬性一起使用，定義在物件後的內容。
語法：選擇符:：after{content:”文字”;}
選擇符:：after{content:url(圖片路徑)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文字內容";}  
2）、::before: 與content屬性一起使用,定義在物件前 的內容。
div::before{content:"在其前放內容";}
3）、::first-letter 定義物件內第一個字元的樣式。
說明：
*(該偽元素只能用於塊級元素)
4）、::first-line:定義物件內第一行的樣式。
*(該偽元素只能用於塊級元素。)