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

2021-10-23 03:24:52 字數 1350 閱讀 5603

偽物件選擇符

網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是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:定義物件內第一行的樣式。

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

粘性定位 寬高自適應 高度塌陷

粘性定位 相容性ie瀏覽器支援度不好 position sticky 可以看做相對定位和固定定位的結合體 一般情況下沒有滾動條滑動內容,內容是佔位的,如果滾動條滑動內容,粘性定位的元素就會有固定定位的效果,方向top才管用 注意點 1 使用的時候需要設定left top bottom right值,...

寬高自適應,高度塌陷,偽物件選擇符

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

寬高自適應及居中

1.寬度自適應 語法 width 100 注 1.塊元素預設寬度為100 繼承父元素的寬度 2.寬度自適應通常運用在通欄效果中 2.高度自適應 語法 height auto 或者不設定高度 1.最小高度 語法 min height 數值 單位 注 ie6不識別min height屬性,解決方案如下 ...