css定位 初總結

2021-08-18 07:39:45 字數 1050 閱讀 7980

1.      屬性position可能的值

(1)    

static

元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,行內元素則會建立乙個或多個行框,置於其父元素中

(2)     

relative

相對定位

用法一:

元素相對自身的原位置進行偏移,但是原本的空間依舊保留,表現為空白。

用法二:

把乙個元素設定為

position:relative;

可以使該元素的子元素相對該元素絕對定位。

(3)     

absolute

絕對定位

元素框從文件流完全刪除,並相對於其包含塊定位。元素原先在正常文件流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。包含塊

:最近的

position

值不是static

的祖先元素,一般會指定乙個元素作為絕對定位元素的包含塊。因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其它元素。可以通過設定z-index屬性來控制這些框的堆放次序。

(4)     

fixed

固定定位

; 元素從文件流刪除,並相對於瀏覽器視窗定位,因此不隨文件滾動而移動。元素在原本的空間關閉。元素定位後生成乙個塊級框,不論它原來是行內元素還是塊級元素。與絕對定位的區別僅僅是包含塊不同。

包含塊:瀏覽器視窗。

2.浮動

(1)     

float

浮動浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或者另乙個浮動框的邊框為止,由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。可能的值

(left|right|none)

(2)      

clear

屬性規定元素的哪一側不允許其他浮動元素。可能的值(left,

在左側不允許浮動元素

|right|both,

在左右兩側均不允許浮動元素

|none)

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定位總結

定位相關總結 1 文件流 就是html的布局機制。塊元素 block 獨佔一行,內聯元素 line 不獨佔一行。2 相對定位 就是相對於乙個東西定位。這個東西就是它本身,同時可以使用left top bottom right 來移動元素的位置。注意 相對定位不會脫離文件流。3 絕對定位 找乙個東西相...