css四大定位解析

2021-09-29 06:20:59 字數 3218 閱讀 4102

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

在css中,通過邊偏移屬性top、bottom、left、right,來定義定位元素的位置,其取值為不同單位的數值或百分比。具體解釋如下表所示:

邊偏移屬性

描述top

頂部偏移量,定義元素相對於其父元素上邊線的距離––

bottom

底部偏移量,定義元素相對於其父元素下邊線的距離––

left

左邊偏移量,定義元素相對於其父元素左邊線的距離––

right

右邊偏移量,定義元素相對於其父元素右邊線的距離

也就是說,定位需要結合邊偏移搭配使用, 比如說 top: 50px; left: 50px; 等

2、定位模式

在css中,position屬性用於定義元素的定位模式,其基本語法格式如下:

選擇器position常用的屬性值值描述

static

自動定位(預設定位方式)––

relative

相對定位,相對於原文件流的位置進行定位––

absolute

絕對定位,相對於其上乙個已經定位的父元素進行定位––

fixed

固定定位,相對於瀏覽器視窗進行定位

靜態定位是所有元素的預設定位方式,當position屬性的取值為static時,可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在html文件流中預設的位置。

上面的話通俗簡單的來說: 就是網頁中所有元素都預設的是靜態定位哦! 其實就是標準流的特性。

在靜態定位狀態下,無法通過邊偏移屬性(top、bottom、left、right)來改變元素的位置。

相對定位是將元素相對於它在標準流中的位置進行定位,當position屬性的取值為relative時,可以將元素定位於相對位置。

對元素設定相對定位後,可以通過邊偏移屬性改變元素的位置,但是它在文件流中的位置仍然保留,而且移動的位置是相對於自身原來的位置來說的。如下圖所示,即是乙個相對定位的效果展示

意:

相對定位

最重要的

一點是,

它可以通

過邊偏移

移動位置

,但是原

來的所佔

的位置,

繼續占有

,移動的

距離,是

按照原來

的自身的

位置來移

動\color注意:相對定位最重要的一點是,它可以通過邊偏移移動位置,但是原來的所佔的位置,繼續占有,移動的距離,是按照原來的自身的位置來移動

注意:相對定

位最重要

的一點是

,它可以

通過邊偏

移移動位

置,但是

原來的所

佔的位置

,繼續佔

有,移動

的距離,

是按照原

來的自身

的位置來

移動也就是說,相對定位的盒子仍在標準流中,它後面的盒子仍以標準流方式對待它。

[注意] :如果文件可滾動,絕對定位元素會隨著它滾動,因為元素最終會相對於正常流的某一部分定位。

當position屬性的取值為absolute時,可以將元素的定位模式設定為絕對定位。

意:

絕對定位

最重要的

一點是,

它可以通

過邊偏移

移動位置

,但是它

完全脫標

,完全不

佔位置\color注意: 絕對定位最重要的一點是,它可以通過邊偏移移動位置,但是它完全脫標,完全不佔位置

注意:絕對定

位最重要

的一點是

,它可以

通過邊偏

移移動位

置,但是

它完全脫

標,完全

不佔位置

4.1 父級沒有定位時以瀏覽器為準

如果所有父元素都沒有定位,以瀏覽器為準對齊(document文件)

4.2 父級有定位以父級為準

絕對定位是將元素依據最近的已經定位(絕對、固定或相對定位)的父元素進行定位。

4.3 絕對定位的盒子沒有邊偏移

如果只是給盒子指定了 定位,但是沒有給與邊偏移,則該盒子以標準流來顯示排序,和上乙個盒子的底邊對齊,但是不占有位置

4.4 子絕父相

這句話的意思是子級是絕對定位的話, 父級要用相對定位

我們說下, 絕對定位是將元素依據最近的已經定位(絕對、固定或相對定位)的父元素進行定位。

就是說, 子級是絕對定位,父親只要是定位即可(不管父親是絕對定位還是相對定位,甚至是固定定位都可以),就是說, 子絕父絕,子絕父相都是正確的。

結論:因為子級是絕對定位,不會占有位置, 可以放到父盒子裡面的任何乙個地方。

父盒子布局時,需要占有位置,因此父親只能是 相對定位.

這就是子絕父相的由來。

定位是絕對定位的一種特殊形式,它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時,即可將元素的定位模式設定為固定定位。

當對元素設定固定定位後,它將脫離標準文件流的控制,始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化,該元素都會始終顯示在瀏覽器視窗的固定位置。

固定定位有兩點:

固定定位的元素跟父親沒有任何關係,只認瀏覽器。

固定定位完全脫標,不占有位置,不隨著滾動條滾動。

[注意] : ie6 等低版本瀏覽器不支援固定定位。

定位模式

是否脫標占有位置 是否可以使用邊偏移 移動位置基準

靜態static

不脫標,正常模式 不可以 正常模式––

相對定位relative

不脫標,占有位置 可以 相對自身位置移動––

絕對定位absolute

完全脫標,不占有位置 可以 相對於定位父級移動位置

固定定位fixed

完全脫標,不占有位置 可以 相對於瀏覽器移動位置

TCP中的四大定時器

對於每個tcp連線,tcp一般要管理4個不同的定時器 重傳定時器 堅持定時器 保活定時器 2msl定時器。重傳定時器 每傳送乙個報文段就會啟動重傳定時器,如果在定時器時間到後還沒收到對該報文段的確認,就重傳該報文段,並將重傳定時器復位,重新計算 如果在規定時間內收到了對該報文段的確認,則撤銷該報文段...

TCP協議中的四大定時器

介紹一下tcp連線中的4個定時器 重傳定時器 堅持定時器 保活定時器 2msl定時器,他們存在於每乙個連線中。重傳定時器是用來計算tcp報文段的超時重傳時間的,每傳送乙個報文段就會啟動重傳定時器,如果在定時器時間到後還沒收到對該報文段的確認,就重傳該報文段,並將重傳定時器復位,重新計算 如果在規定時...

使用CSS框架的四大優點四大不足

使用css框架的四大優點四大不足 css框架是乙個軟體,它為你的html開發提供了許多選項以供使用,可能使得你開發 或web程式更快速更簡單。css框架通過包括預定義 庫來達到這個目的。乙個例子是基於網格的框架,它建立了乙個預定義寬度的多列布局所以你可以專注於建立內容而不是排列文字塊。但是使用css...