好程式設計師 web 前端分享 高度自適應

一、寬高自適應

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

它能夠使網頁顯示更靈活，可以適應在不同裝置、不同視窗和不同解析度下顯示。

（ 1）寬度自適應

      塊元素寬度預設為auto

（ 2 ）   高度自適應

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

二、浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動後，父元素會發生高度塌陷）

解決高度塌陷的方法（清除浮動的方法）：

方法 1：給父元素新增宣告overflow:hidden;(缺點：會隱藏溢位的元素)

hack2:在浮動元素下方新增空塊元素,並給該元素新增宣告：clearboth;height:0;overflow:hidden;

（缺點：在結構裡增加了空的標籤，不利於程式碼可讀性，且降低了瀏覽器的效能）

hack3:萬能清除浮動法

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

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

三、偽類選擇符 /     ::偽元素或叫偽物件

1）:after(與content屬性一起使用，定義在物件後的內容。)

如： div:after{content:url(logo.jpg);}

      div:after{content:"文字內容";}

2）:before:與content屬性一起使用，定義在物件前的內容。

如： div:before{content:"在其前放內容";}

3）：first-letter:定義物件內第一個字元的樣式。

4）：first-line:定義物件內第一行的樣式。

說明：

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

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

visibility:hidden;和display:none;的區別：

visibility:hidden;屬性會使物件不可見，但該物件在網頁所佔的空間沒有改變，而 display:none屬性會隱藏內容且空間消失。

元素具備最小高度最小寬度，最大高度，最大寬度的自適應

min-height屬性：最小高度；

min-width:最小寬度

max-height:最大高度

max-width:最大寬度

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

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

五、 Filter:表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或宣告的方法。

本質上講， Filter是一種用來過濾不同瀏覽器的Hack型別。

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

1 ） 下劃線屬性過濾器
    當在一個屬性前面增加了一個下劃線後，由於符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個宣告，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。

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

2）!important關鍵字過濾器
它表示所附加的宣告具有最高優先順序的意思。但由於 IE6及更低版本不能識別它(important)，我們可以利用IE6的這個Bug作為過濾器來相容ＩＥ６和其它標準瀏覽器。

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

相容元素具備最小高度自適應的方法：

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

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

3）*/+屬性過濾器

    當在一個屬性前面增加了*後，該屬性只能被IE7及以下版本瀏覽器識別，其它瀏覽器忽略該屬性的作用。

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

4)擴充套件內容

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

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

六 、元素高度自適應視窗高度

        設定方法：html,body{height:100%;}

        2)自適應元素高度：height:100%;

擴充套件：

七 、 <iframe> 標籤   框架

語法： <iframe   src="規定在 iframe 中顯示的文件的 URL(預設的顯示頁面)" width="" height=""   frameborder="1/0"  name="iframe名稱"     scrolling="yes/no/auto">   </iframe>

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

捲軸： scrolling="yes/no/auto" yes :有   no:無    auto：自動

<a href="" target="iframe的name屬性值"></a>表示超連結的目標地址在框架中開啟 。