8 寬高自適應

網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應。

自適應的優點：

元素自適應在網頁布局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置、不同視窗和不同解析度下顯示。

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

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

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

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

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

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

說明：height屬性在ie6裡就類似min-height作用。 min-height（最小高度） max-height(最大高度) max-height:200px; height:200px!important; min-width(最小寬度) max-width(最大寬度) 注：ie6及以下版本不識別該組屬性。

1）_ 下劃線屬性過濾器當在乙個屬性前面增加了乙個下劃線後，由於符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個宣告，但是在ie6及更低版本瀏覽器中會繼續解析這個規則。語法：選擇符此方法是區分ie6瀏覽器和其他瀏覽器的方法；

2）!important關鍵字過濾器它表示所附加的宣告具有最高優先順序的意思。被瀏覽器優先顯示。（ie6不識別此寫法）語法：選擇符

3）* 屬性過濾器當在乙個屬性前面增加了*後，該屬效能被ie7及以下瀏覽器識別，其它瀏覽器忽略該屬性的作用。語法：選擇符

4）\9 ： ie版本識別；其他瀏覽器都不識別語法：選擇符 5）\0 : ie8及以上版本識別；其他瀏覽器都不識別語法：選擇符

hack1：給父元素新增宣告overflow:hidden;(觸發乙個bfc)

hack2:在浮動元素下方新增空div,並給該元素新增宣告：div

hack3:萬能清除浮動法選擇符:after

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

1）、::after : 與content屬性一起使用，定義在物件後的內容。語法：選擇符：:after

選擇符：:after

如：div::after

div::after

2）、::before: 與content屬性一起使用,定義在物件前的內容。如：div::before

3）、::first-letter 定義物件內第乙個字元的樣式。說明： *(該偽元素只能用於塊級元素。)

4）、：:first-line:定義物件內第一行的樣式。說明： *(該偽元素只能用於塊級元素。)

5）、::selection定義被選中的樣式。 *ie6以下版本瀏覽器不支援偽物件選擇符。

更多專業前端知識，請上

【猿2048】www.mk2048.com

8 寬高自適應

8 寬高自適應

寬高自適應

寬高自適應

相關推薦