2017 7 18定位 錨點 overflow

2021-08-03 22:26:47 字數 1393 閱讀 7120

position:static/relative/absolute/fixed;

1.1.1在標準流中的預設定位就是

static;

1.1.2靜態定位是不能通過

left,right,top,bottom

進行移動的。

1.2.1相對定位是根據自己原本的位置進行定位的;

1.2.2相對定位不能脫離標準流(靈魂出竅,靈魂移動,身體還在);

1.2.3相對定位是可以通過

left,right,top,bottom

進行移動,如果是正值,則是以

left right top bottom

這四條邊為標準,向元素內部移動(如

right:40px;

是指以右邊為標準,向左內部移動

40px

);1.3.1絕對定位是相對

html

或者有定位的父級(或祖輩,會一級級往外找)進行定位,不包括

static

的定位,但包括

relative

的定位。

right left top bottom

是相對於父級的左邊,右邊,上邊,下邊的距離

1.3.2絕對定位的元素脫離標準流。

1.4.1固定定位是根據瀏覽器可視視窗進行定位的;

14.2固定定位脫離標準流。

專案開發中常用到「子絕父相」:子元素定位到父元素的某個位置,子元素用absolute

,父元素用

relative。

如何讓父盒子中的子盒子在父盒子中居中顯示?

1.子絕父相;

2.讓子盒子的left設定為

50%;

3.讓子盒子的margin-left為負值,數值為自盒子大小的一半。

,href

屬性值:

#+id

名,中間沒有空格,跳轉到該頁面

id值所在位置; ,

href

屬性值:頁面路徑

#+id

名,中間沒有空格,跳轉到其他頁面

id名所在位置。

通過z-index控制層級,只能用在有定位的元素上;

z-index

屬性值可以為負值。

overflow: visible可見(預設)

/hidder

隱藏/scroll

出現滾動條(不論溢位與否)

/auto

溢位時出現滾動條

overflow-x:hidden;

overflow-y:scroll;

再對、文字進行overflow操作時,

overflow

只能給最近的盒子設定,不然會出現各種問題。

行內元素如a標籤,

float

後 會變成行內塊級元素,可設定寬高。

定位與錨點

只能用定位來實現層疊的效果 absolute預設為瀏覽器視窗 position static absolute relative fixed inherit 1.static 預設定位方式 2.absolute 絕對定位,將物件從文件流中完全脫離出來,使用left right top bottom進...

定位錨點透明

position定位屬性和屬性值 定位元素的層級屬性 包含塊的概念和應用 錨點連線的語法和應用場景 透明屬性的應用 擴充套件 marquee 滾動字幕 position定位屬性 告訴瀏覽器這是定位屬性 語法 position static absolute relative fixed 取值 1 s...

6 定位錨點透明

day7 定位錨點透明 position 定位屬性,檢索物件的定位方式 語法 position static absolute relative fixed 取值 1 static 預設值,無特殊定位,物件遵循html原則 2 absolute 絕對定位,將物件從文件流中拖離出來,使用left ri...