html定位知識總結 帶例子

2021-10-20 06:07:50 字數 904 閱讀 9296

定位1、 相對定位

(1)特點

a、不影響元素本身的特性;

b、不使元素脫離文件流(元素移動之後原始位置會被保留);

c、如果沒有定位偏移量,對元素本身沒有任何影響;

d、提公升層級

(2)相對定位的**:先設定position為relative,再設定right/left/top/bottom的偏移量

2、 絕對定位

(1)特點

a、使元素脫離文件流

b、提公升層級

c、如果父級元素有相對定位的,以父級元素為基準進行定位。否則以瀏覽器視窗為基準進行定位。

例如:當div2設定為absolute時,div3會移動到div2的位置。又因為div2的層級被提公升,div2會遮擋div3。

因為現在div的父級元素是body,body並沒有設定為relative,這時定位的基準是瀏覽器視窗。而body在瀏覽器的margin為8px,所以設定div2向左移動200px會遮擋住div3寬度為8px的區域。

解決問題的辦法有:把body的margin設定為0px或者把body設定為position:relative。

把body的margin設定為0px,所有元素都緊貼在瀏覽器視窗

body設定為position:relative,div相對於body定位

3、 固定定位:就是固定在頁面的某個位置,不隨滾動條的移動而移動。

布局:透明重疊塊

z-index:數值高的在上面

透明色設定:opacity:0-1,0為完全透明,1為完全不透明

ie下面為filter:alpha(opacity=0-100),0為完全透明,1為完全不透明

布局思路:設定乙個父視窗為relative,然後子視窗就相對于父視窗便宜一點點。設定z-index的值讓決定哪個視窗在下面。設定在下面的視窗的透明值。

HTML知識點總結

1.html文件結構 括號裡面的是注釋 主體部分 頁面內容 1 標籤中的屬性有 bgcolor 顏色 背景顏色 background 的絕對路徑或相對路徑 背景 2.標題標籤 n取1 6 設定文字標題 1 2 3 4 四級標題 5 五級標題 6 六級標題 3.標籤 設定文字屬性 要設定的文字 4.特...

反比例函式知識點與例習題總結

反比例函式全章知識點和典型例習題 知識點一 概念 一般地,形如 為常數,的函式稱為反比例函式。注意 分母中含有自變數,且指數為1.比例係數 自變數的取值為一切非零實數。知識點二 表示式的三種形式 知識點三 反比例函式的影象與性質 1.反比例函式的影象是雙曲線。要點 雙曲線不經過原點,斷開的兩個分支,...

二次根式知識點總結及習題帶答案

基礎知識鞏固 一 二次根式的概念 形如 的式子叫做二次根式。注 在二次根式中,被開放數可以是數,也可以是單項式 多項式 分式等代數式,但必須注意 因為負數沒有平方根,所以是為二次根式的前提條件,如,等是二次根式,而,等都不是二次根式。二 取值範圍 1.二次根式有意義的條件 由二次根式的意義可知,當a...