css的學習(二)

2021-09-02 13:09:37 字數 819 閱讀 7988

css定位屬性(positioning)允許對元素進行定位

css為定位和浮動提供了一些屬性,利用這些屬性可以建立列式布局,將布局的一部分和另一部分重疊。

css有三種基本的定位機制:普通流、浮動流、絕對定位

css position屬性有四種不同型別的定位

1、static

元素框正常生成,

2、relative

元素框偏移某段距離,元素仍保持定位前形狀,原本空間保留

3、absolute

元素從文件流完全刪除,原本空間關閉,定位後生成乙個塊級框。

4、fixed

類似於absolute

相對定位:

相對定位會按照元素的原始位置對該元素進行移動。

樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。

樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。

結果:

相對定位會按照元素的原始位置對該元素進行移動。

樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。

樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。

絕對定位:

h2.pos_abs

通過絕對定位,元素可以放置到頁面上的任何位置。

下面的標題距離頁面左側 100px,距離頁面頂部 150px。

結果:

css學習筆記(二)

13,編寫頭部的css 因為要將css檔案定義在html檔案頭部的方法為內部樣式表方法,所以下面舉例說明怎麼應用內部樣式表方法在html檔案的頭部編寫css 1 開啟記事本,在記事本中輸入如下一段普通的html 然後將 檔案以副檔名.html的形式儲存 例項 在html檔案的頭部應用內部樣式表方法新...

CSS學習筆記二

css布局與傳統 table 布局最大的區別在於 原來的定位都是採用 通過 的間距或者用無色透明的gif來控制文布局版塊的間距 而現在則採用層 div 來定位,通過層的margin,padding,border等屬性來控制版塊的間距。1.定義div 分析乙個典型的定義div例子 sample 說明如...

CSS學習交流(二)

這是一道經典的問題,實現方法有很多種,以下是其中一種css方式實現 html檔案 class parent class content div div css檔案 parent content 為什麼要把width和left減半?首先對父元素top,left絕對定位在50 的位置,這時候只是子元素左...