定位學習筆記

2022-03-04 19:13:30 字數 1985 閱讀 9709

摘錄:1.使用了絕對定位的元素但是沒有進行任何盒子位移屬性的設定,那麼該元素頂部和左部會和設定了相對定位或者絕對定位的父元素的頂邊和左邊重合。如果只設定了「top」,那麼該元素垂直方向會進行移動,水平位置預設左對齊。

2.當乙個絕對定位的元素沒有明確指定高度和寬度,同時使用盒子位移的「top」和「bottom」屬性時,會使整個元素的高度跨越整個容器。同樣的,當這個元素同時使用位移「left」和「right」屬性值,會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性,可以指定乙個寬度和高度顯示元素。(這個時候絕對定位元素的寬度和高度都是100%。)

1.固定定位和絕對定位很類似,固定定位元素的盒子位移屬性的使用和絕對定位的一樣。但是他定位是相對於瀏覽器視窗,並且不會隨滾動條進行滾動。

2.「position」屬性值中,僅有「fixed」屬性值不能在ie6瀏覽器下執行,如果你想在ie6正常使用固定定位,那麼你就需要為他寫一些hacks。

3.固定頁頭和頁尾

固定定位最常見的一種用途就是在頁面中建立乙個固定頭部、或者腳部、或者固定頁面的乙個側面。就算是使用者移動瀏覽器的滾動條,也不移動。

< footer >fixed footer
.footer
1.給元素設定「z-index」屬性,首先要在這個元素上設定了「position」屬性值為「relatvie」、「absolute」或者「fixed」之一

2.同樣的,你要使用盒子位移屬性,你也要先確認元素設定了「positions」屬性值為「relative」、「absolute」或者「fixed」之一

3.通常都認為web頁面是二維頁面,顯示的元素都在x軸和y軸上。當你的元素有定位時,他們有時候會放置在另乙個元素的頂部。要改變這些元素是乙個 怎麼樣的層疊順序,要知道z軸,z軸是用「z-index」屬性來控制的。

1.在具有浮動元素的父容器中設定「overflow」的屬性值為「auto」,這樣父容器就會有乙個高度存在。使用「overflow:auto;」。

在ie瀏覽器中會給元素新增滾動條,這樣一來,最好是直接使用「overflow:hidden;」來清除浮動。

2.在ie6裡面,父容器是需要設定乙個「width」和「height」。

3.使用「overflow」技巧清除浮動,確實存在一些缺點。

例如:當你新增樣式,或者將巢狀在裡面的「span」元素移動到父容器的外面,或者你想給元素新增乙個盒子陰影和製作乙個下拉列表。在下面的演示例子中,你可以看到元素的盒子陰影被切斷在父元素之內。

不同的瀏覽器對「overflow」屬性解析不一樣,在瀏覽器的顯示風格也不一樣。

「clearfix」技巧是基於在父元素上使用「:before」和「:after」兩個偽類。

使用這些偽類,我們可以在浮動元素的父容器前面和後面建立隱藏元素。

.group:before,

.group:after

.group:after

.group

注:「:before」偽類是用來防止子元素頂部的外邊距塌陷。

使用「display: table」建立乙個匿名的「table-cell」元素。這也確保在ie6和ie7下具有一致性。

「:after」偽類是用來防止子元素的底部的外邊距塌陷,以及用來清除元素的浮動。

CSS定位學習筆記

僅僅是自己對著w3cschool整理的一些 css 基礎知識點,敲一遍加深下印象也方便以後複習。一切皆為框 與之相反,span 和strong 等元素稱為行內元素,這意味著他們的內容顯示在行內,即 行內框 some text some more text.在這種情況下,這個框稱為無名塊框,因為它不與...

HTML學習筆記 定位

若成功,則 getcurrentposition 方法返回物件。始終會返回 latitude longitude 以及 accuracy 屬性。如果可用,則會返回其他下面的屬性。屬性描述 coords.latitude 十進位制數的緯度 coords.longitude 十進位制數的經度 coord...

css學習筆記20160126定位

文件流是html可顯示元素在排列時所占用的位置.css實現對元素定位 positioning 有四種不同的定位方式分別是static,relative,absolute,fixed.static是position屬性的預設屬性值,元素在正常的流之中,靜態定位元素不收四個方向的屬性影響.fixed相對...