前端基礎知識學習 CSS position

2021-09-28 15:39:50 字數 884 閱讀 6723

對於目前前端來說,學習的知識較少,前端的知識面很寬廣,因為針對定位屬性做乙個學習

position的定位方式:

static:

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)

relative:

生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 left 位置新增 20 畫素。

absolute:

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

inherit:

規定應該從父元素繼承 position 屬性的值。

fixed:

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

sticky:

盒位置根據正常流計算(這稱為正常流動中的位置),然後相對於該元素在流中的 flow root(bfc)和 containing block(最近的塊級祖先元素)定位。在所有情況下(即便被定位元素為 table),該元素定位均不對後續元素造成影響。當元素 b 被粘性定位時,後續元素的位置仍按照 b 未定位時的位置來確定。position: sticky對 table元素的效果與 position: relative 相同

前端基礎知識學習記錄(三)

前端基礎知識學習記錄 三 1.css 選擇器的使用 1 before與 after選擇器的簡介 before選擇器,即為在被選元素的內容前面插入內容,使用 content 屬性來指定要插入的內容。after選擇器,即為在被選元素的內容後面插入內容,同樣使用 content 屬性來指定要插入的內容。2...

前端基礎知識總結

1.將文字顯示在上 1 第一種方式 將作為背景 使用條件,的大小跟div的大小一樣,才能顯示完整,不然只會顯示一部分 style width 1490px height 600px background image url images x.png 2 第二種方式通過絕對定位將文字放到上,好處 可以...

前端 CSS基礎知識

css文件 目錄css基礎選擇器 id選擇器 萬用字元選擇器 css設定字型 css文字屬性 css引入方式 css復合選擇器 css元素顯示模式 css的背景 背景影象固定 復合寫法 css3背景顏色半透明效果 css三大特性 優先順序層疊樣式表 cascading style sheets,縮寫...