css 深入淺出定位

2022-01-30 07:16:16 字數 1733 閱讀 5683

這一對的問題我們應該怎麼解決。還沒有開始定位啊......應該怎麼辦了?

大家看看這個東西其他他就是乙個普通流。html裡面的寫法就是從上到下,從左到右的排版布局。每個非浮動塊級元素都獨佔一行,從上到下排列, 內聯元素則從左到右排列。如果當前行不能排列下來,則另一起一行然後浮動排列。大家知道文件流後對於後面的定位可能理解起來就更容易。

相對定位:相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素「相對於」它的起點進行移動。

其實我們發現任何的變化?你說這個有什麼意思啊?如果我們設定了left

我去發生變化了啊。好開心?我們完成可以使用這個來進行tab選單的居中。好開心。他脫離了文件流?你們看出來他脫出文件流了嗎?回答肯定是沒有,完全不知這個是什麼東西啊。這個是什麼東西。還有相對定位是怎麼相對的,這個物件是什麼?(相對定位就是相對於他原來的位置)還有就是為什麼第三個div沒有發生變化。按照道理來說他應該替換原來的東西。怎麼沒有?現在就到我們重點要相對定位的特點:relative會導致自身位置的相對變化,而不會影響其他元素的位置、大小的變化。這是relative的要點之一。還有第二個要點,就是relative產生乙個新的定位上下文。

定位上下文?

其實就是總結為一句話:relative元素的定位永遠是相對於元素自身位置的,和其他元素沒關係,也不會影響其他元素。

絕對定位:絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。

特點:absolute元素脫離了文件結構。和relative不同,其他三個元素的位置重新排列了。只要元素會脫離文件結構,它就會產生破壞性,導致父元素坍塌。(此時你應該能立刻想起來,float元素也會脫離文件結構)雖然absolute元素脫離了文件結構,但是它的位置並沒有發生變化,還是老老實實的呆在它原本的位置,因為我們此時沒有設定top、left的值。absolute元素會懸浮在頁面上方,會遮擋住下方的頁面內容。最後,通過給absolute元素設定top、left值,可自定義其內容,這個都是平時比較常用的了。這裡需要注意的是,設定了top、left值時,元素是相對於最近的定位上下文來定位的,而不是相對於瀏覽器定位。

這個裡面需要注意一點的就是 :absolute的定位相對於前兩者要複雜許多。如果為absolute設定了top、left,瀏覽器會根據什麼去確定它的縱向和橫向的偏移量,答案是瀏覽器會遞迴查詢該元素的所有父元素,如果找到乙個設定了position:relative/absolute/fixed的元素,就以該元素為基準定位,如果沒找到,就以瀏覽器邊界定位。一句話就是找他爸是有(position:relative/absolute/fixed)的元素

參看:

深入淺出xpath軸定位

在web自動化裡面經常要用到定位,常用的八種定位方式中我最喜歡xpath定位,功能很強大。結合它裡面的文字定位 模糊定位 邏輯定位等,基本能搞定所有的元素定位問題。今天要討論的是xpath的另一種比較複雜的定位 軸定位。網上的關於軸定位的我翻了下,說得都不夠詳細 有的一筆帶過,這著實苦惱了我許久。晚...

深入淺出sizeof

int佔 位元組,short佔 位元組 1.0 回答下列問題 答案在文章末尾 1.sizeof char 2.sizeof a 3.sizeof a 4.strlen a 如果你答對了全部四道題,那麼你可以不用細看下面關於sizeof的論述。如果你答錯了部分題目,那麼就跟著我來一起 關於sizeof...

深入淺出ShellExecute

ipconfig c log.txt應如何處理?二樓的朋友,開啟拔號網路這樣 shellexecute null,open c windows rundll32.exe shell32.dll,control rundll c windows system telephon.cpl null,sw ...