幾分鐘讓你掌握css定位

2021-05-26 23:25:01 字數 1564 閱讀 9794

元素的 position 屬性預設值為:static,即該元素出現在文件的常規位置,不會重新定位。

通常此屬性值可以不設定,除非是要覆蓋之前的定義。

#div-1  

如下圖:

設定了 position:relative,便可以結合top 、 bottom、 left 、 right 的屬性來偏移其文件的常規位置。

例如將 div-1 向下移動 20 畫素、向左移動 40 畫素:

#div-1
注意 div-1 未被移動之前的地方,現在多了一點空隙,緊接著 div-1 的元素(div-after)卻沒有被移動,事實上即便 div-1 被移動了,它仍佔據原始位置

貌似 position:relative 用處不大(我到覺得這點很有用),但在後面的內容中顯得尤為重要。

如下圖:

設定了 position:absolute,即絕對定位,便可以將元素放在文件中任何想放的位置。

例如將 div-1a 放置到右上角:

#div-1a
注意!由於 div-1a 被移走, 頁面中的其他元素位置也變了: div-1b, div-1c, div-after 都因此上移了。

div-1a 被放置在頁面的右上角。 能直接地定位元素很方便,但作用也不大。

這裡真正要做的是將 div-1a 相對於 div-1 定位,這就又要講到 relative 屬性了。

如下圖:

設定div-1的位置為 relative , div-1中元素的定位都將相對於div-1。現將div-1a的position設為:absolute,可以實現將其置於div-1的右上角:

#div-1 

#div-1a 如下圖:

接下來使用relative 和absolute 實現兩列的絕對定位:

#div-1 

#div-1a

#div-1b

使用絕對定位(absolute positioning)的優點就是不需考慮元素在html中的位置,可以對元素任意放置,此處故意將div-1b放到div-1a之前;

注意,還有個元素被絕對定位的元素遮住了,怎麼辦? 

如下圖:

一種辦法是設定固定高度。

但不是萬全之策,因為元素的高度、字型的大小並不總是確定的。

#div-1 

#div-1a

#div-1b 如下圖:

針對高度不定的情況,絕對定位不好用,於是想到另一方案。

可以盡量使用向左或向右浮動來實現文字環繞,特別是環繞,此處用於更複雜的布局工作(也只有用這種方法)。

#div-1a 如下圖:
將兩列都像左浮動,可以實現兩列並列。

#div-1a 

#div-1b 如下圖:

將元素浮動後,再使用"clear" 清除浮動,後面內容拉向下。

#div-1a 

#div-1b

#div-1c 如下圖:

幾分鐘讓你快速了解Django

1.對映url 當前,基礎url http localhost 8000 返回預設的django 讓我們知道正確地建立了專案,我們將修改這一點,將這個基礎url對映到 學習筆記 的主頁。開啟檔案learning log url.py,執行以下 from django.conf.urls import...

只要幾分鐘就可以你的伺服器或空間有防盜煉功能

只要幾分鐘就可以你的伺服器或空間有防盜煉功能 首先要確認你的伺服器或空間的伺服器解譯引擎為apache2,還有支援.htaccess客戶設定檔案,找到 loadmodule rewrite module modules mod rewrite.so 把前面的 給去丟 找到等乙個 allowoverr...

這幾步,讓我的程式執行時間從十幾分鐘優化到十幾秒

優化參考知乎大牛,寫的真心很讚!1 關閉螢幕重新整理 vb每次對excel 操作,螢幕進行重新整理操作,可以先關閉重新整理,等所有操作完成之後,一次重新整理,這會節省大量的資源和時間 最前加上 結尾加上2 減少vb與excel 的互動 我的程式初始版本是遍歷excel的每乙個單元格,然後對資料進行處...