(9)HTML CSS筆記(定位 )

2021-09-25 14:04:20 字數 901 閱讀 4024

1、定位:在網頁中,我們是用來確定位置的。

position:

方位值:

static 靜態定位(方位值是不起作用的)

relative 相對定位(方位值起作用)

absolute 絕對定位(方位值起作用)

參考係:

除了靜態定位之後,其它都可以作為參考;

如果沒有參考係,預設為body來進行參考;

作為參考物需要滿足的要求:

(1)必須為直系父級關係;

(2)除了靜態定位之後,其它都可以作為參考;

注意:如果直系父級有多個都作為參考係,只取離元素最近的元素作為參考係;(就近原則)

2、定位的特徵

(1)是否脫離文件流

(2)是否對元素本身造成影響

(3)是否支援margin

(4)是否對inline-block,vertical-align,float造成影響

relative:

不脫離文件流;

不會對元素的高度造成影響;

不會使行內元素支援寬高;

根據樣式型別定論是否支援margin,padding;

不會對inline-block,vertical-align,float造成影響

absolute:

脫離文件流(完全);

使用後預設由內容撐開寬高;

會使行內元素支援寬高;

支援margin,padding;

不支援margin:auto;

會對inline-block,vertical-align,float造成影響

3、層級問題(使用了定位[除了靜態定位]元素)

後來者居上

預設層級:

如果層級樣式相等,後來者居上。

html css學習筆記 4 定位

如何讓圖1中的div2移動到如圖2上的位置 思路 哪些css命令能夠影響盒子顯示的位置呢?relative相對定位 定位偏移量 position relative 相對定位 a 不影響元素本身的特性 b 不使元素脫離文件流 c 如果沒有定位偏移量,對元素本身沒有任何影響 定位元素位置控制 top r...

HTMLCSS學習筆記(九) 定位與錨點

css 有三種基本的定位機制 position 屬性指定了元素的定位型別。position static 靜態定位 預設值 position relative 相對定位 position absolute 絕對定位 position fixed 固定定位 position sticky 粘性定位 定...

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...