CSS基礎完結篇

2022-07-19 19:36:19 字數 2098 閱讀 8929

position:它的英文意思「位置」的意思

它在css中主要是用來實現對乙個元素的定位

在css中定位有三種方式:

固定定位 position:fixed

相對定位 position:relative

絕對定位 position:absolute

注意:要實現乙個元素的定位

那麼一定使用

定位的座標!

left:表示定位的元素離左邊多遠

right:表示定位的元素離右邊多遠

top:表示定位的元素離上邊多遠

bottom:表示定位的元素離下邊多遠

什麼是固定定位?

固定定位它是相對於「瀏覽器視窗」來進行定位!不管頁面如何滾動,固定定位元素它的位置不會發生改變!

語法格式:

position:fixed;

定位的座標

特點:案例1:使用固定定位來實現返回頂部的按鈕!

案例2:使用固定定位來實現頂部的導航欄!

語法格式:

position:relative;

什麼是相對定位?

相對定位它是相對於「原來的自己」來進行定位!

特點:

相對定位元素這個屬性它一般自己很少使用,因為它會在老家給自己留乙個坑!相對定位元素它一般是用來配合絕對定位來使用!

格式:position:absolute;

什麼叫絕對定位?

絕對定位元素它是相對於「祖先定位元素」為作為參照物來進行定位!

絕對定位元素它會先去找它的父元素是否有進行定位

如果它的父元素有進行定位

那麼它會參照於其父元素來進行定位,但是如果它的父元素沒有進行定位

那麼它會去找其爺爺元素

如果說絕對定位元素它的祖先都沒有進行定位的話

那麼它會以「瀏覽器視窗」來進行定位!

俗語:「子絕父相!」  ==è兒子是絕對定位

老爸是相對定位

絕對定位的特點:

n 絕對定位元素它脫離的標準文件流!

n 絕對定位元素它不再占用空間!

n 絕對定位元素它會壓蓋住普通的元素

假設:絕對定位元素它的父元素與它的爺爺元素都進行了相對定位

,那麼請告訴我這個絕對定位元素它會以誰來作為參照物來進行定位!

它會以其父元素作為參照物來進行定位!

我們可以將z-index理解為

ps軟體裡面的圖層的概念!

盒子陰影

box-shadow:

水平陰影

垂直陰影

陰影的模糊大小

陰影的大小

陰影的顏色

陰影在**

border-collapse:collapse;  它主要是用來設定很細的**邊框線

機房完結篇

做著做著這個大一點的專案就被我做完了。從開始的不知從何入手,到後來的對大多數問題應對自如,這個過程只有自己親身體會過了才能深刻感受到自己真的學到了不少。既然是完結篇,我就總結一下完成之前做的最後的工作吧 1 建立mdi窗體。一開始沒有意識到這個問題,最後優化的時候加上mdi窗體發現子窗體都出不來了。...

包頭的生活完結篇

隨著火車的開動,我在包頭一周的生活也隨之結束了。在火車上我有一種如釋重負的感覺,包頭的生活讓我覺的太累了。每天紅腫著眼睛,用兩條腿來回在商行和資訊中心,包頭的天氣很冷,尤其是風很大。吹的讓人受不了。在包頭的工作到不是很緊張,只是去商行看看有什麼新的需要,然後記下來或改一下就可以,但包頭宿舍的居住環境...

機房重構(6) 完結篇

經過乙個暑假艱苦卓絕的努力,機房重構告一段落。從一開始對三層理解的懵懵懂懂,到後來機房重構敲的非常順手,感覺自己成長了很多,機房重構時間拖得有點長,心情起伏有點大,不過收穫還是有的。資料庫的設計決定了系統的好壞,所以在開始前,一定要認真的分析業務,畫好e r圖,經過認真考慮後再設計資料庫,我用血淋淋...