第8天筆記寬高自適應

寬高自適應

網(wǎng)頁布局中經(jīng)常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據(jù)窗口或子元素自動調(diào)整，這就是自適應。 自適應的優(yōu)點： 元素自適應在網(wǎng)頁布局中非常重要，它能夠使網(wǎng)頁顯示更靈活，可以適應在不同設備、不同窗口和 不同分辨率下顯示。

（1）寬度自適應

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

（2）高度自適應

1)自適應元素高度 ：height:auto;或者不設置;（是子元素撐開父元素的高度） 2)元素高度自適應窗口高度 設置方法：html,body{height:100%;} 注：如果設置子元素的高度跟隨父元素的高度變化而變化，那么父元素必須有高度。

(3)元素具備最小高度的自適應

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及以下版本不識別該組屬性。

過濾器(filter)

1）_ 下劃線屬性過濾器 當在一個屬性前面增加了一個下劃線后，由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明，但是在IE6及更低版本瀏覽器中會繼續(xù)解析這個規(guī)則。 語法：選擇符{ _屬性：屬性值；} 此方法是區(qū)分IE6瀏覽器和其他瀏覽器的方法；

2）!important關鍵字過濾器 它表示所附加的聲明具有最高優(yōu)先級的意思。被瀏覽器優(yōu)先顯示。（IE6不識別此寫法） 語法：選擇符{屬性：屬性值!important;}

3） 屬性過濾器 當在一個屬性前面增加了后，該屬性能被IE7及以下瀏覽器識別，其它瀏覽器忽略該屬性的作用。 語法：選擇符{*屬性：屬性值；}

4）\9 ： IE版本識別；其他瀏覽器都不識別 語法：選擇符{屬性：屬性值\9;} 5）\0 : IE8及以上版本識別；其他瀏覽器都不識別 語法：選擇符{屬性：屬性值\0；}

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

hack1：給父元素添加聲明overflow:hidden;(觸發(fā)一個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;的區(qū)別 visibility:hidden;屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會使這個對象徹底消失不顯示，也不再占用位置。

偽對象選擇符

1）、::after : 與content屬性一起使用，定義在對象后的內(nèi)容。 語法：選擇符：:after{content:”文字”;} 選擇符：:after{content:url(圖片路徑)；} 如：div::after{content:url(logo.jpg);} div::after{content:"文本內(nèi)容";}

2）、::before: 與content屬性一起使用,定義在對象前 的內(nèi)容。 如：div::before{content:"在其前放內(nèi)容";}

3）、::first-letter 定義對象內(nèi)第一個字符的樣式。 說明： *(該偽元素只能用于塊級元素。)

4）、：:first-line:定義對象內(nèi)第一行的樣式。 說明： (該偽元素只能用于塊級元素。) 5）、::selection定義被選中的樣式。 ie6以下版本瀏覽器不支持偽對象選擇符。