CSS 小塊覆蓋和不出現橫滾動條

2021-09-24 15:00:21 字數 1010 閱讀 4860

一般我寫css放置覆蓋的小窗的話,基本上都是直接按畫素來調,但是感覺這樣太不方便了。

今天學到了這樣乙個方法,利用定位效果來放置覆蓋的小窗。

要理解清楚幾種定位

假設乙個大div,裡面乙個小的div,我們要讓小div緊貼父元素的底部。

大div:

.father

小div:

.son

普通流

浮動絕對定位

浮動和絕對定位都會將元素從普通流中移除。

浮動元素距離父元素邊框的距離為父元素的padding加上浮動元素的margin。

但是如果乙個元素附近有浮動元素的話,此元素的margin值還是相對於浮動元素的。

static 預設值,沒有定位

relative 相對定位

absolute 絕對定位,相對於static定位以外的第乙個有定位屬性(相對定位或絕對定位)的父元素進行定位,如果沒有這樣的元素,那麼就相對於body元素進行定位。

fixed 相對於瀏覽器定位

對於在大於1200解析度電腦上出現橫向滾動條的,就會出現滾動條

(只要給元素設定過width:1560px【只要比1200大的多的數就不對】,就會出現滾動條;有的核心內容設定1201px,這樣的沒事,這是量取時多量了1px,要是大的多了就不對)

對於一張1920寬的,不要直接插入img,這樣就會有滾動條。如果設定了寬度為100%也不行,會被壓縮變形。應該寫乙個寬為100%,高度為670px的盒子,插入背景圖,背景圖居中,這樣不會出現滾動條,就算顯示不全,也會顯示中間核心的內容。

對於img來設定寬度為100%,高度一定,img的寬度會自動變成螢幕的寬度,但高度不變,會被拉長或者壓扁。

對於背景圖設定寬為100%,高度為具體數值,並且居中,如果背景圖比螢幕大,則會擷取背景圖中間的部分,如果背景圖比螢幕小,背景圖的兩邊會進行重複即repeat。

.banner

overflow x軸滾動 y軸不出現滾動條

這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙個段落。這是乙...

Flex4 VBox 不出現滾動條

今天做flex時碰到一頭疼的問題,當box中的內容超出頁面時,竟然沒有乙個vbox或頁面出現滾動條,超出的部分沒法看。而4.5用的是所謂的spark等玩意 xmlns s library xmlns mx library 學習過程中發現有spark的跟mx的很多有區別,像datagrid在spark...

CSS定位和滾動條

position absolute 絕對定位 1 定位屬性值 absolute 2 在頁面中不再佔位 浮起來了 就無法繼承父級的寬度 必須自己自定義寬度 3 一旦定位後,定位的布局方位 top bottom left right都能參與布局 4 絕對定位的參考係是最近的定位父級 不是父級中的哪一點,...