浮動和漸變色,定位position,元素的層疊順序

2021-09-29 09:54:03 字數 1010 閱讀 7223

浮動: float

是我們網頁布局的一種

浮動 可以有 left 左浮動 right 右浮動 兩種

浮動的特點:

脫離正常的文件流,原本的空間不佔據,浮動的標籤都具有塊級標籤的一些特點,可以手動設定寬高

如果有相鄰的多個浮動的元素,那麼後面浮動的元素會停靠在前面浮動元素的後面,如果剩餘空間不夠,則會另起一行顯示

如果乙個元素中所有的內容都浮動了,那麼這個元素本身高度則沒有了,如果想要讓這個元素高度還在,需要自己手動設定高度

清除浮動: 不是說把浮動的元素清理掉,而是清除浮動元素對其他元素的影響

1 給父元素直接設定乙個高度

2. 設定 clear:both;

設定背景的漸變色:

線性漸變:

background-image: linear-gradient(to bottom,#da4601,#feeeb6,#e46410);

徑向漸變:

background-image: radial-gradient(red,blue,green 80%);

定位:position

相對定位 relative

參照物是自己原來的位置,不會脫離正常文件流,也就是說原本的位置依舊存在

所有的定位都可以給兩個值

水平偏移位置: left 或 right

垂直偏移位置: top 或 bottom

絕對定位 absolute 子絕父相

參照物是有定位的距離元素最近的祖級元素,如果所有的祖級元素都沒有定位,參照物是初始包含塊

會脫離正常文件流,原本空間不存在

什麼是初始包含塊: 就是瀏覽器一開啟,使用者能看到的視窗頁面

固定定位 fixed

參照物是視口(視口就是眼睛所看到的的這個視窗)

會脫離正常文件流,也就是說原本的位置不存在了

粘性定位(了解內容)sticky

設定定位元素的層疊順序:

z-index:number; number越大表示越優先顯示 只有定位的元素才可以設定該樣式

浮動和漸變色,定位position,元素的層疊順序

浮動 float 是我們網頁布局的一種 浮動 可以有 left 左浮動 right 右浮動 兩種 浮動的特點 脫離正常的文件流,原本的空間不佔據,浮動的標籤都具有塊級標籤的一些特點,可以手動設定寬高 如果有相鄰的多個浮動的元素,那麼後面浮動的元素會停靠在前面浮動元素的後面,如果剩餘空間不夠,則會另起...

繪製漸變色

迴圈改變的畫素值,請注意每一行使用乙個顏色。int data new int fontimage.getwidth fontimage.getheight fontimage.getrgb data,0,fontimage.getwidth 0,0,fontimage.getwidth fontim...

漸變色原理

引用 作為計算機圖形學中重要的原色混合系統,rgb 紅綠藍 加色系統廣泛應用於發光體,如彩色crt顯示或彩色燈光.這三種單色是得以匹配或生成可見光譜中幾乎所有顏色的最小數量的原色.為了適應不同的顏色深度,使用0 1來表示r,g,b顏色深淺.使用三維座標分別表示rgb.如下圖1所示.這樣原點rgb 0...