9 寬度自適應和解決浮動塌陷

2021-10-06 07:56:31 字數 2368 閱讀 1154

命名錨點的作用:在同一頁面內的不同位置進行跳轉。

製作錨標記:

1)給元素定義命名錨記名

語法:《標記 id="命名錨記名"> )命名錨記連線

語法:"#命名錨記名稱">

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

自適應的優點:

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

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

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

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

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

設定方法:html,body

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

高度自適應第一種情況:

height不設定 或者 height:auto; 元素的高度是被內容撐開的。

但是height不去設定或者是設定height:auto; 存在問題:當內容極度減少容器的高度不會被撐開,影響整個版式的布局。

上述問題解決方法:當內容沒有或內容極度減少,讓容器保持乙個最小高度

高度自適應第一種情況的需求:

a:當內容增加,要內容撐開容器的高度

b: 當內容極少,要讓容器保持乙個最小高度。

最小高度的設定:

屬性:min-height:;

擴充套件(了解):

min-height:; 現代高版本瀏覽器都能支援,但是ie低版本(ie6)不認min-height

height在現代主流瀏覽器裡面,就是固定高度,但是在ie6裡面預設把height 解析成最小高度。

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

高度塌陷的解決方法

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

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

宣告:div

法三:萬能清除浮動法

選擇符::after

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

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

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

語法:選擇符::after

選擇符::after

如:div::after

div::after

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

div::before

3)、:

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

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

4)、:

:first-line

:定義物件內第一行的樣式。

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

min-height

:; 現代高版本瀏覽器都能支援,但是ie低版本(ie6)不認min-height

height在現代主流瀏覽器裡面,就是固定高度,但是在ie6裡面預設把height 解析成最小高度。

如果考慮ie6相容:最小高度怎麼設定?

a:min-height

:300px;

_height

:300px;

執行邏輯:

非ie6瀏覽器:能識別min-height,不認_height

ie6瀏覽器:能識別_height 預設解析成最小高度,不識別min-height;

b: min-height

:300px;

height

:auto!important;

height

:300px;

執行邏輯:

非ie6瀏覽器:執行min-height, height

:auto權重最高,會把height

:300px用auto覆蓋,auto為height預設值。

ie6瀏覽器:不識別min-height, 不認為height

:auto為權重最高,後寫的是height

:300px 執行的就是height

:300px;

css寬高自適應及高度塌陷解決方法

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

左右寬度固定中間自適應html布局解決方案

a.使用浮動布局 html結構如下 left right center 此處注意要先渲染左 右浮動的元素才到中間的元素。元素浮動後剩餘兄弟塊級元素會佔滿父元素的寬度b.使用固定定位 html結構如下 left right center 和浮動布局同理,先渲染左右元素,使其定位在父元素的左右兩端,剩餘...

解決左邊寬度固定,右邊寬度隨瀏覽器自適應的3種方案

在前端開發中,不管是自己寫專案,還是應試,都會遇到這樣乙個問題,實現左邊寬度固定,右邊寬度隨瀏覽器的變化而變化,在這個問題上衍生出來的還有一種場景,明明設定了固定寬度,卻出現變形的現象,今天就給大家分享一下解決方案。思路 父元素設定 display flex 左邊元素給固定的 flex basis ...