好程序員web前端分享高度自適應

好程序員web前端分享高度自適應

1、寬高自適應

網頁佈局中常常要定義元素的寬和高。但不少時候咱們但願元素的大小可以根據窗口或子元素自動調整，這就是自適應。

它可以使網頁顯示更靈活，能夠適應在不一樣設備、不一樣窗口和不一樣分辨率下顯示。

（1）寬度自適應

      塊元素寬度默認爲auto

（2） 高度自適應

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

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

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

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

hack2:在浮動元素下方添加空塊元素,並給該元素添加聲明：clearboth;height:0;overflow:hidden;

（缺點：在結構裏增長了空的標籤，不利於代碼可讀性，且下降了瀏覽器的性能）

hack3:萬能清除浮動法

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

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

3、僞類選擇符/     ::僞元素或叫僞對象

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該僞類只能用於塊級元素。)

4、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做用。

5、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>表示超連接的目標地址在框架中打開。