08 寬高自適應

2021-10-08 10:08:54 字數 1454 閱讀 3916

寬高自適應

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

自適應的優點:

元素自適應在網頁布局中非常重要,它能夠使網頁顯示更靈活,可以適應在不同裝置、不同視窗和不同解析度下顯示。

寬度自適應

元素寬度設定為100%。(塊元素寬度預設為100%)

或者不設定寬度(width);(寬度是父元素的寬度)

高度自適應

1)自適應元素高度:height:auto;或者不設定;(是子元素撐開父元素的高度)

2)元素高度自適應視窗高度

設定方法:html,body

注:如果設定子元素的高度跟隨父元素的高度變化而變化,那麼父元素必須有高度。

最小高度的自適應

min-height屬性:最小高度;(ie6瀏覽器不識別該屬性)

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

hack2:min-height:value; height:auto!important;height:value;

浮動元素父元素高度自適應(高度塌陷)

當子元素有浮動並且父元素沒有高度的情況下父元素會出現高度塌陷
高度塌陷的解決方法

hack1:給父元素新增宣告overflow:hidden;(觸發乙個bfc)

hack2:在浮動元素下方新增空div,並給該元素新增

宣告:div

hack3:萬能清除浮動法

選擇符:after

visibility:hidden/隱藏

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

visibility:hidden;屬性會使物件不可見,但該物件在網頁所佔的空間沒有改變,等於留出了一塊空白區域,而 display:none屬性會使這個物件徹底消失不顯示,也不再占用位置。

偽物件選擇符

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

語法:選擇符::after

如:div::after

div::after

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

div::before

3)、::first-letter 定義物件內第乙個字元的樣式。

說明:*(該偽元素只能用於塊級元素)

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

*(該偽元素只能用於塊級元素。)

全屏頁面

寬高自適應

網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應 元素自適應在網頁布局中非常重要,他能夠使網頁顯示更加靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...

寬高自適應

寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要,它能夠使網頁顯示更靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...

寬高自適應

寬高自適應可以使得網頁更加靈活,適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下,不新增定位時 寬度自適應的比例,是參照父元素的寬度進行顯示的,也就是說,如果元素的父元素是整個頁面的話,顯示的時候就是鋪滿整個螢幕 如果當父...