好程序員web前端分享高度自適應(yīng)

好程序員 web 前端分享 高度自適應(yīng)

一、寬高自適應(yīng)

網(wǎng)頁布局中經(jīng)常要定義元素的寬和高。但很多時(shí)候我們希望元素的大小能夠根據(jù)窗口或子元素自動(dòng)調(diào)整，這就是自適應(yīng)。

它能夠使網(wǎng)頁顯示更靈活，可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示。

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

      塊元素寬度默認(rèn)為auto

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

元素 {height:auto;}/高度不寫

二、浮動(dòng)元素父元素高度自適應(yīng)（父元素不寫高度時(shí)，子元素寫了浮動(dòng)后，父元素會(huì)發(fā)生高度塌陷）

解決高度塌陷的方法（清除浮動(dòng)的方法）：

方法 1：給父元素添加聲明overflow:hidden;(缺點(diǎn)：會(huì)隱藏溢出的元素)

hack2:在浮動(dòng)元素下方添加空塊元素,并給該元素添加聲明：clearboth;height:0;overflow:hidden;

（缺點(diǎn)：在結(jié)構(gòu)里增加了空的標(biāo)簽，不利于代碼可讀性，且降低了瀏覽器的性能）

hack3:萬能清除浮動(dòng)法

選擇符 :after{content:".";clear:both;display:block;height:0;visibility:hidden; }

父容器選擇符 {zoom:1;}/*為了兼容IE6,IE7*/

三、偽類選擇符 /     ::偽元素或叫偽對(duì)象

1）:after(與content屬性一起使用，定義在對(duì)象后的內(nèi)容。)

如： 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è)字符的樣式。

4）：first-line:定義對(duì)象內(nèi)第一行的樣式。

說明：

*(:first-letter;:first-line該偽類只能用于塊級(jí)元素。)

四、 visibility:hidden/visible/inherit;隱藏/可見

visibility:hidden;和display:none;的區(qū)別：

visibility:hidden;屬性會(huì)使對(duì)象不可見，但該對(duì)象在網(wǎng)頁所占的空間沒有改變，而 display:none屬性會(huì)隱藏內(nèi)容且空間消失。

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

min-height屬性：最小高度；

min-width:最小寬度

max-height:最大高度

max-width:最大寬度

注： IE6及以下版本不識(shí)別該組屬性。

注： height屬性在IE6里就類似min-height作用。

五、 Filter:表示過濾器的意思，它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。

本質(zhì)上講， Filter是一種用來過濾不同瀏覽器的Hack類型。

-----、過濾器(filter)

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

語法：選擇符 {_屬性：屬性值；}

2）!important關(guān)鍵字過濾器
它表示所附加的聲明具有最高優(yōu)先級(jí)的意思。但由于 IE6及更低版本不能識(shí)別它(important)，我們可以利用IE6的這個(gè)Bug作為過濾器來兼容ＩＥ６和其它標(biāo)準(zhǔn)瀏覽器。

語法：選擇符 {屬性：屬性值!important;}

兼容元素具備最小高度自適應(yīng)的方法：

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

hack2:min-height:value;  height:auto!important;   height:value;(建議使用)

3）*/+屬性過濾器

    當(dāng)在一個(gè)屬性前面增加了*后，該屬性只能被IE7及以下版本瀏覽器識(shí)別，其它瀏覽器忽略該屬性的作用。

語法：選擇符 {*屬性：屬性值；}

4)擴(kuò)展內(nèi)容

\9：IE9以下的        語法：選擇符{屬性：屬性值\9;}

\0:IE8 及以上                語法：選擇符{屬性：屬性值\0;}

六 、元素高度自適應(yīng)窗口高度

        設(shè)置方法：html,body{height:100%;}

        2)自適應(yīng)元素高度：height:100%;

擴(kuò)展：

七 、 <iframe> 標(biāo)簽   框架

語法： <iframe   src="規(guī)定在 iframe 中顯示的文檔的 URL(默認(rèn)的顯示頁面)" width="" height=""   frameborder="1/0"  name="iframe名稱"     scrolling="yes/no/auto">   </iframe>

frameborder="1/0"  1代表有框架邊框 /0代表無框架邊框

滾動(dòng)條： scrolling="yes/no/auto" yes :有   no:無    auto：自動(dòng)

<a href="" target="iframe的name屬性值"></a>表示超鏈接的目標(biāo)地址在框架中打開 。