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 絕對定位 找乙個東西相...