元素的寬高自適應

2021-10-03 09:36:32 字數 836 閱讀 9816

寬高自適應:網頁布局中經常要定義元素的寬和高,但很多時候我們希望元素的大小能夠根據視窗或者子元素的大小來自動調整,這時候就要用到自適應了。元素自適應在網頁布局中非常重要,它能夠使網頁顯示更加靈活,可以適應在不同裝置、不同視窗、不同解析度下顯示。下面來介紹下不同情況下自適應的寫法:

一:相對視窗和父元素的自適應寫法

寬度:當塊狀元素不寫寬度的時候 ,預設寬度是100%;是父元素的100%;

也就是始終與父元素同寬。width:100%;如果給塊狀元素加了絕對定位

或者固定定位,他的寬度就不是100%顯示了,而是跟裡面的內容同寬,如

果元素裡面沒有內容,或者沒有定義寬高,這個時候元素就不見了。

高度:讓元素的高度相對瀏覽器顯示百分比的時候,一點要給html和body

設定高度100%,html,body 百分比設定寬高的時候,

都是相對當前元素最近的父元素顯示百分比的值。

二:相對元素或者內容進行自適應:

非浮動元素的父元素高度自適應

1、不設定高度或者高度設定成height:auto;

2、通過設定最小高度來實現高度自適應 min-height:xx px;

3、給需要設定高度自適應的元素新增:min-height:value ;height:auto;

浮動元素的父元素高度自適應

1、給父元素設定固定的高

2、給父元素新增overflow:hidden;

3、在浮動元素下方新增乙個空標籤,並給它設定屬性

clear:both;height:0;overflow:hidden;

4、給父元素新增display:table

寬高自適應 偽元素

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

寬高自適應

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

寬高自適應

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