初涉前端之CSS(八)

2021-08-22 02:38:26 字數 1057 閱讀 7681

絕對定位(position: absolute)

這條語句的作用將元素從文件流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器視窗

如下面**可以實現div元素相對於瀏覽器視窗向右移動100px,向下移動50px:

div

相對定位(position: relative)

為元素設定層模型中的相對定位,需要設定position:relative(表示相對定位)

通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。

相對定位完成的過程:首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。

如下**實現相對於以前位置向下移動50px,向右移動100px:

#div1

固定定位(position: fixed)

與absolute定位型別類似,但它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。

由於檢視本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,除非在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,即固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置,不會受文件流動影響,與background-attachment:fixed(固定背景)屬性功能相同。

以下**可以實現相對於瀏覽器檢視向右移動100px,向下移動50px。並且拖動滾動條時位置固定不變:

#div1

豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬豬

....

relative和absolute組合使用

初涉前端之CSS(一)

層疊樣式表cascading style sheets 定義某個樣式,讓不同網頁位置的文字有著統一的字型 字型大小或者顏色等 優先順序 內聯式 嵌入式 外部式 就近原則 必須寫在之間,且一般情況下寫在之間 把css 寫乙個單獨的外部檔案中,這個css樣式檔案以 css 為副檔名,使用標籤將css樣式...

CSS中幾個初涉元素

剛接觸css不是太長時間 對於css基本屬性也是略懂 就在這裡做乙個總結 css會更多的延用html中的一些基本屬性 例如文字屬性的改變方式 元素 元素 而css更多的優點是體現在對於頁面布局 和頁面整體美感的設定上 元素就很好的解決了整體頁面的布局問題 對於現在所掌握的技術而言 元素更多是用在為整...

初涉linux(三)之shell程式設計

color red 如果系統學習,使用 高階bash指令碼程式設計指南 這本書 color shell初級程式設計 by hayabusa 3.1講義 3.1.1 shell set 所有變數 unset 取消變數設定 export 變數 匯出變數,使其全域性可用 env 環境變數 shell基本格...