CSS 浮動與定位元素

2021-07-28 14:00:22 字數 1345 閱讀 3361

元素分為正常流和非正常流,

非正常流中包含浮動與定位

先說定位,定位包含相對定位(relative)、絕對定位(absolute)以及固定定位(fixed)

position屬性:static(預設)| relative | absolute | fixed       無繼承性

相對定位:

position:relative 

相對定位元素被看做正常流文件的一部分,元素之前的位置保留,可以完全覆蓋文件中其他元素

相對定位的位置變化是相對於元素之前的原始位置來說的

其包含塊同正常流

他的偏移屬性有:top bottom left right  設定的數值是相對於原始位置的邊偏移

絕對定位:

position:absolute

絕對定位元素會從文件流中刪除,不會流入其他元素,元素之前的位置不保留

絕對定位的包含塊是最近的position值不為static(預設)的祖先元素

1.如果這個祖先元素為塊級元素,包含塊為該元素內邊距邊界

2.如果這個祖先元素是行內元素,包含塊為該元素內容區邊界

3.如果沒有已定位祖先元素,其包含塊為初始包含塊

元素絕對定位時會為其後代建立乙個包含塊。

元素相對於包含塊邊偏移,除了bottom的任意邊設定為auto時,定位元素會與改元素原始該邊位置相對齊

固定定位

position:fixed

固定定位類似於絕對定位,其包含塊為初始包含塊。

再說浮動

float屬性:left | right | none(預設)

浮動元素脫離正常流,其包含塊為最近的塊級祖先元素

浮動元素會生成乙個塊級框,元素外邊距不會被合併

浮動元素規則:

1.浮動元素盡量高的放置,但浮動元素的左右邊界不能超過其包含塊的左右內邊界

2.浮動元素不會重疊,乙個浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高

3.浮動元素不能超過包含塊的的內頂端,但是可以超過下邊,若浮動元素與正常流元素衝突:

a.與行內框衝突,其行框、背景、文字都在浮動元素之上

b.與塊框衝突,其邊框和背景在浮動元素之下,而內容在之上

4.如果源文件中乙個浮動元素之前出現另乙個元素,浮動元素的頂端不能比包含該元素的生成框的任何行框更高

clear 屬性: left | right | both

clear屬性用來避免該元素左右出現浮動元素,根據練習發現,如果想讓乙個行內元素的左右沒有浮動元素,必須將該元素先轉化為塊級元素,即將clear與display:block組合使用才能真正達到目的

css之定位元素

元素的定位是掌握css技術的核心,只有熟練運用元素定位才能用css創造出專業水準的頁面布局。定位元素的技術包括 box model float position 所謂盒模型,就是指每乙個html元素會在頁面上生成乙個盒子,將該元素包圍其中。html元素其實是由一堆的盒子構成的。p.test如上 生成...

CSS世界(五)定位元素

定位,指確定某一事物在一定環境中的位置 屬性值 fixed relative,absolute,static 非static屬性值,會使得元素表現為block預設定位,跟隨文件流 一般 從上至下,從左至右 修改過文字流方向除外 body固定定位,常用於廣告,或醒目的固定內容 作用於可視視窗 body...

css selector定位元素

selenium中經常要用css selector定位元素,雖說可以用firefox的firebug firepath直接copy元素的xpath路徑,但有時還是很必要用css selector來定位,也算技多不壓身吧 系統的學習一下,也當是臨陣磨槍。一共8種方式的選擇器。根據元素的標籤定位,如下 ...