第8天筆記寬高自適應(yīng)

寬高自適應(yīng)

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

（1）寬度自適應(yīng)

元素寬度設(shè)置為100%。（塊元素寬度默認(rèn)為100%） 或者不設(shè)置寬度（width）;（寬度是父元素的寬度）

（2）高度自適應(yīng)

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

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

min-height屬性：最小高度；(IE6瀏覽器不識(shí)別該屬性) 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及以下版本不識(shí)別該組屬性。

過濾器(filter)

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

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

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

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

（4）浮動(dòng)元素父元素高度自適應(yīng)（高度塌陷）

hack1：給父元素添加聲明overflow:hidden;(觸發(fā)一個(gè)BFC)

hack2:在浮動(dòng)元素下方添加空div,并給該元素添加 聲明：div{clear:both; height:0; overflow:hidden;} hack3:萬能清除浮動(dòng)法 選擇符:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

visibility:hidden/隱藏

visibility:hidden;和display:none;的區(qū)別 visibility:hidden;屬性會(huì)使對(duì)象不可見，但該對(duì)象在網(wǎng)頁所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會(huì)使這個(gè)對(duì)象徹底消失不顯示，也不再占用位置。

偽對(duì)象選擇符

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

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

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

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