CSS重點總結(二) 定位,浮動對元素的影響

2021-10-09 02:14:55 字數 1220 閱讀 3727

定位

相對於誰定位的

是否脫離文件流

是否改變元素型別

用途相對定位

相對於自己來定位的

半脫離文件流

不改變元素型別

一般給絕對定位當父級

絕對定位

相對定位父級來說的,(定位父級就是這個元素的父級裡面要有定位(position),什麼position都可以)如果沒有定位父級那就相對於body來進行定位.

完全脫離文件流

改變元素型別(行內塊)

一般是對小圖示進行定位的(最好不要用來布局)

固定定位

相對於可視區,始終以電腦螢幕的左上角參考點完全脫離文件流

改變元素型別(行內塊)

一般用在廣告,彈窗

絕對定位是針對瀏覽器固定在某個位置;

相對定位是針對檢視(瀏覽器在電腦螢幕上的顯示)裡某個元素固定在某個位置;

固定定位是針對整個檢視(整個瀏覽器,也就是滾動也不會影響定位)固定在某個位置。

標準流盒子,低於浮動的盒子,浮動的盒子又低於定位的盒子。

給定z-index的值為層級的值。(不給預設為0)

特點

1、層級為0的盒子,也比標準流和浮動高。

2、層級為負數的盒子,比標準流和浮動低。

3、層級不取小數

4、層級一樣,後面的盒子比前面的層級高。

塊狀水平元素,如div元素(下同),在預設情況下(非浮動、絕對定位等),水平方向會自動填滿外部的容器;如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等,實際內容區域會響應變窄。

==float脫離文件流(半脫離文件流)==時,其他盒子會無視這個元素,但其他盒子內的文字依然會為這個元素讓出位置,環繞在周圍。

注意:相對定位和float的脫離文件流有些區別,相對定位移動後原來位置空間還是存在。

==position:absolute脫離文件流(完全脫離文件流)==的元素,其他盒子與其他盒子內的文字都會無視它。

塊標籤可以套行標籤,行標籤不可以套塊標籤。

p標籤不要套塊屬性標籤,可以套a,span,文字。

CSS之float浮動元素定位機制

1 6個子容器未設定浮動的狀態如下 子容器1 子容器2 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水 水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水...

CSS總結7(浮動與定位)

傳統網頁布局三種方式 浮動 浮動布局注意 父元素排列上下,內部子元素採取浮動排列左右 浮動的盒子只會影響浮動盒子後面的標準流。由於父盒子很多情況下不方便給高度,但是子盒子浮動又不占有位置,最後父盒子高度為0,就會影響下面的標準流盒子。清除浮動的本質就是清除浮動元素造成的影響,清除之後,父盒子會根據子...

CSS文件流 浮動 定位 總結

文件流指的是文件中的標籤在排列時所占用的位置。將窗體自上而下分成一行行 並在每行中按從左至右的順序排放標籤,即為文件流。也就是說在文件流中標籤缺省會緊貼到上乙個標籤的右邊,如果右邊不足以放下標籤,標籤則會另起一行,在新的一行中繼 續從左至右擺放。使標籤脫離原來的文件流,在父標籤中浮動起來。浮動使用f...