寬高自適應 定位 隱藏

2021-08-21 13:35:38 字數 1318 閱讀 1223

若塊級元素寬度不設定,或者設定成100%,都是佔據其父級元素的一整行

應用場景:頁面最外層的盒子一般都要佔據螢幕的大小,所以寬度100%。

一:父元素的高度由子元素撐開

(1)高度塌陷:子元素都浮動了,父元素會沒有高度。

解決方案(清除浮動):

給父元素新增最後乙個子元素(塊級元素)

子元素css

缺點:造成不必要的浪費

給父元素新增

缺點:可能造成需要的部分被隱藏掉

偽元素清除法(萬能清除法)給父元素加乙個偽類clearfix::after{},css內容如下

/*清除浮動(不管)*/

.clearfix:before,.clearfix:after

.clearfix:after

.clearfix

(2)預防子元素會沒有內容,撐不開父元素的情況

解決辦法:給父元素新增最小高度min-height

(當內容高度小於最小高度時,按最小高度顯示。當內容高度大於最小高度時,按內容高度顯示)

相容寫法:

二:高度自適應視窗高度

body,html、最外層的大盒子多用於手機端彈性盒布局

屬性值名稱

描述static

靜態定位

預設值relative

相對定位

相對於自己本身所在的位置進行定位配合left、right、topbottom使用,不脫離標準流。

absolute

絕對定位

相對於html或者最近的有定位的父元素進行移動定位配合left、right、top、bottom使用,脫離標準流。

fixed

固定定位

相對於瀏覽器的可視區域進行移動定位配合left、right、top、bottom使用,脫離標準流。

/*絕對定位配合相對定位使用*/

.father

.father .absolute

display:none 隱藏元素,不佔位置

visibility:hidden 隱藏元素,佔位置

overflow: hidden 隱藏超出文字

一行文字超出顯示省略號,必須3行搭配使用

type

="text/css"

>

pstyle

>

寬高自適應

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

寬高自適應

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

寬高自適應

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