CSS定位總結

2021-08-03 21:40:06 字數 899 閱讀 8092

定位相關總結

(1)文件流:就是html的布局機制。塊元素(

block

)獨佔一行,內聯元素(

line

)不獨佔一行。

(2)相對定位:就是相對於乙個東西定位。這個東西就是它本身,同時可以使用left、

top、

bottom

、right

來移動元素的位置。

注意:相對定位不會脫離文件流。

(3)絕對定位:找乙個東西相對來

絕對定位。這個東西是什麼呢?這個東西(element)必須設定

position

,並且定位方式非

static

。再說直白一點,這個小鬼(

element

)定位可以是他爸爸、他爺爺、他太公。。。。(祖宗、

body

)中有錢(

position

:absolute

、position

:relative

、position

:fixed

),就是不能是程式設計師(

position

:static

或直接沒有定位的)。

注意:絕對定位脫離文件流。一般使用「父相子絕」。

使用絕對定位設定top:

0和不設定

top屬性有區別嗎?

有區別,如果沒有設定top屬性,元素的位置和沒有脫離文件流的位置一樣。

太爺爺

爺爺爸爸

小鬼

(4)fixed定位:就是相對於瀏覽器視窗的定位

使用了position屬性,一般不使用

margin

,padding

屬性

css定位總結

塊狀元素 display block可以作為其它元素的容器,排斥其它元素和他在一行 寬 width 高 height 值都是有作用的 內聯元素 內容屬性 內容本身的寬 width 內容本身的長 height margin 20px 0 0 2px 0表示不設定 因為瀏覽器的margin paddin...

CSS 定位總結

css 有三種基本的定位機制 普通流 浮動和絕對定位,但本篇文章要總結的是css中的position屬性,position有四個值,static,absolute,relative,fixed。生成相對定位的元素,相對於其正常位置進行定位,它原本佔據的空間流仍然存在。當使用left top righ...

CSS定位總結

css定位屬性共有三種 1.相對定位 relative 2.絕對定位 adsolute 3.固定定位 fixed 相對定位 相對與自己原來的位置定位,進行位置的調整。一 1.盒子和盒子的距離,間隙。相對定位 位置的調整 2.margin會影響後面的元素。相對定位不會影響別人。不脫標。坑位還佔著,別人...