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

2021-09-24 08:58:29 字數 2006 閱讀 5181

一、寬高自適應

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

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

(1)寬度自適應

塊元素寬度預設為auto

(2)高度自適應

元素/高度不寫

二、浮動元素父元素高度自適應(父元素不寫高度時,子元素寫了浮動後,父元素會發生高度塌陷)

解決高度塌陷的方法(清除浮動的方法):

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

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

(缺點:在結構裡增加了空的標籤,不利於**可讀性,且降低了瀏覽器的效能)

hack3:萬能清除浮動法

選擇符:after

父容器選擇符/*為了相容ie6,ie7*/

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

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

如:div:after

div:after

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

如:div:before

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作為過濾器來相容ie6和其它標準瀏覽器。

語法:選擇符

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

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

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

3)*/+屬性過濾器

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

語法:選擇符

4)擴充套件內容

\9:ie9以下的 語法:選擇符

\0:ie8及以上 語法:選擇符

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

設定方法:html,body

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

擴充套件:七、標籤 框架

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

滾動條:scrolling="yes/no/auto"yes:有 no:無 auto:自動

好程式設計師web前端分享邏輯運算

一門計算機語言,程式設計的核心在於邏輯思想,當我們在編寫程式的時候,邏輯是否通順,是能否正確寫出程式的關鍵,可以說如果你掌握了邏輯,那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...

好程式設計師web前端分享CSS學習 HSLA顏色模式

好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度,值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣,只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...

好程式設計師web前端教程分享Date物件

好程式設計師web前端教程分享date物件,什麼是date物件乙個內建物件date 型別使用自 utc coordinated universal time,國際協調時間 1970 年 1 月 1 日午夜 零時 開始經過的毫秒數來儲存日期。date 型別儲存的日期能夠精確到 1970 年 1 月 1...