各種定位 css 傻傻分不清楚

2021-07-09 04:46:43 字數 902 閱讀 9896

定位是網頁設計中很重要且常用的基礎知識。學習定義不是乙個簡單的事情,它需要反覆的實踐和體會。這裡總結了一些定位的基礎概念和常見例子。

總結了一些css 中關於定位的問題,和陷阱。

主要內容包括:

相對定位,絕對定位,fixed,浮動。

四個偏移量:

top , bottom ,left , right , 分別定義相對於參照物 頂部,底部,左邊,右邊 的偏移量。

position

:relative;

相對定位相對的是元素本身的位置。它的位置會根據偏移量移動,但是它的占用空間還是處於原來的位置。也就是說,視覺上它移動了,但是它的根(原本的位置)是不動的。

絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,則相對於body定位。

什麼叫已定位?簡單來說,就是設定過position的元素。上面引用來自w3school。

絕對定義的元素不會再占用原有的空間。一般彈出框,下拉列表都會使用絕對定義。

下面是乙個例子:

第乙個黃色塊沒有設定定位,所以預設處於它的父元素,綠色塊的左-上方。元素的預設位置就在這裡。之後的元素依次排開。

第二個黃色塊設定了絕對定位,並且定位值是 right:0,表示和包含塊的右邊的偏移量為0。 可以看到它和灰色塊(灰色塊是包含它且最近的已定位元素,直接父元素-綠色快沒有定位)的右邊對齊了。這裡並沒有設定 top,所以它的垂直位置還在原來的地方。

下面是原始碼:

MVP, MVC, MVVM, 傻傻分不清楚

最近 mvc model view controller 和 mvvm model view viewmodel 在微軟圈成為顯學,asp.net mvc 和 wpf 的 prism mvvm framework 功不可沒,mvc 和 mvvm 在概念上都是基於分層的,將呈現 presentatio...

物件,陣列,傻傻分不清楚

有段時間寫 總將物件和陣列區分不開,當然,可能是我的基礎不太紮實吧,今天將單獨將物件和陣列拿出來溜溜。首先來說一下物件,作為乙個沒有物件的人,這時候就需要用js來自己new乙個物件了 1.物件 object 什麼是物件?物件是一種引用型別,物件的值就是引用型別的例項。建立物件的方法?1 new乙個物...

併發 並行傻傻分不清楚?

今天,我們正在解決乙個問題 同時的,同時的愚蠢的困惑?執行緒在其生命週期中經歷了什麼?知識給你解答生活中所有困難的問題。concurrent和parallel 併發是指在一定時間內,多工交替處理的能力。並行性是指同時處理多個任務的能力。案例 當乙個商場的銷售員需要面對許多顧客時,有些顧客要求 有些顧...