CSS中的靜態定位 固定定位 絕對定位和相對定位

2021-09-01 00:03:23 字數 4218 閱讀 5781

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!

靜態定位:

html元素的預設值,即沒有定位,元素出現在正常的流中。

靜態定位的元素不會受到top, bottom, left, right影響。

固定定位:

元素的位置相對於瀏覽器視窗是固定位置。

即使視窗是滾動的它也不會移動:

.middle
相對定位:層級關係為:

為改變參照物(橘色框)後的效果

層級關係為:

參照物為最頂級的元素情況。

層級關係為:

僅使用margin屬性布局絕對定位元素的情況

此情況,margin-bottom 和margin-right的值不再對文件流中的元素產生影響,因為該元素已經脫離了文件流。另外,不管它的祖先元素有沒有定位,都是以文件流中原來所在的位置上偏移參照物。  

圖9中,使用margin屬性布局相對定位元素。

層級關係為:

ie6的情況下,box2前面沒有兄弟節點,則margin-left的值會出現雙倍邊距,見圖10。

層級關係為:

給我老師的人工智慧教程打call!

你好! 這是你第一次使用 **markdown編輯器** 所展示的歡迎頁。如果你想學習如何使用markdown編輯器, 可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗;

在創作中心設定你喜愛的**高亮樣式,markdown將**片顯示選擇的高亮樣式進行展示;

全新的katex數學公式語法;

增加了支援甘特圖的mermaid語法1

功能;增加了焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定等功能,功能按鈕位於編輯區域與預覽區域中間;

增加了檢查列表功能。

撤銷:ctrl/command + z

重做:ctrl/command + y

加粗:ctrl/command + b

斜體:ctrl/command + i

無序列表:ctrl/command + shift + u

有序列表:ctrl/command + shift + o

檢查列表:ctrl/command + shift + c

插入**:ctrl/command + shift + k

插入:ctrl/command + shift + g

直接輸入1次#,並按下space後,將生成1級標題。

輸入2次#,並按下space後,將生成2級標題。

以此類推,我們支援6級標題。有助於使用toc語法後生成乙個完美的目錄。

強調文字

強調文字

加粗文字加粗文字

標記文字

刪除文字

引用文字

h2o is是液體。

210 運算結果是 1024.

帶尺寸的:

當然,我們為了讓使用者更加便捷,我們增加了拖拽功能。

去部落格設定頁面,選擇一款你喜歡的**片高亮樣式,下面展示同樣高亮的**片.

// an highlighted block var foo = 'bar';
專案1專案2

專案3乙個簡單的**是這麼建立的:

專案value

電腦$1600

手機$12

導管$1

使用:---------:居中

使用:----------居左

使用----------:居右

第一列第二列

第三列第一列文字居中

第二列文字居右

第三列文字居左

smartypants將ascii標點字元轉換為「智慧型」印刷標點html實體。例如:

type

ascii

html

single backticks

'isn't this fun?'『isn』t this fun?』

quotes

"isn't this fun?"「isn』t this fun?」

dashes

-- is en-dash, --- is em-dash– is en-dash, — is em-dash

markdown

text-to-

html conversion tool

authors

john

luke

乙個具有註腳的文字。2

markdown將文字轉換為 html。

您可以使用渲染latex數學表示式 katex:

gamma公式展示 γ(n

)=(n

−1)!

∀n∈n

\gamma(n) = (n-1)!\quad\forall n\in\mathbb n

γ(n)=(

n−1)

!∀n∈

n 是通過尤拉積分

γ (z

)=∫0

∞tz−

1e−t

dt.\gamma(z) = \int_0^\infty t^e^dt\,.

γ(z)=∫

0∞​t

z−1e

−tdt

.

你可以找到更多關於的資訊latex數學表示式here.

gantt

dateformat yyyy-mm-dd

title adding gantt diagram functionality to mermaid

section 現有任務

已完成 :done, des1, 2014-01-06,2014-01-08

進行中 :active, des2, 2014-01-09, 3d

計畫一 : des3, after des2, 5d

計畫二 : des4, after des3, 5d

可以使用uml圖表進行渲染。 mermaid. 例如下面產生的乙個序列圖::

這將產生乙個流程圖。:

我們依舊會支援flowchart的流程圖:

如果你想嘗試使用此編輯器, 你可以在此篇文章任意編輯。當你完成了一篇文章的寫作, 在上方工具欄找到文章匯出,生成乙個.md檔案或者.html檔案進行本地儲存。

如果你想載入一篇你寫過的.md檔案或者.html檔案,在上方工具欄可以選擇匯入功能進行對應副檔名的檔案匯入,

繼續你的創作。

mermaid語法說明↩︎

註腳的解釋 ↩︎

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...

前端CSS 相對定位,絕對定位,固定定位

position relative 必須先宣告,自己要相對定位了,left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...

相對定位 絕對定位 固定定位 粘滯定位(css)

定位 position position 可選值static 預設值 元素是靜止的沒有開啟定位 relative開啟元素的相對定位 absolute開啟元素的絕對定位 fixed開啟元素的固定定位 sticky開啟元素的粘滯定位 相對定位position relative 元素開啟相對定位後,如果不...