2019-10-07 那些X 與 定位 和 位置指定

文章1里,提到了各種可能用到的高寬值,為我們對元素的位置的理解與設置鋪墊了基礎,現(xiàn)在來看看文檔中元素的位置的相關問題。

對于定位元素,我們可以在css中設置其top、left、bottom、right 屬性,對元素進行位置的指定。定位,一定要有個相對參照點,把參照點作為原點來對元素進行定位。在此基礎上,我們第一想到的是 position:absolute 的元素,因為其定位就是相對于最近的定位祖先元素進行定位,那么我們就可以通過控制其祖先的位置,然后把一個 absolute 元素來相對祖先進行定位,進行一探究竟。

通過實例,我們可以看到,設置 top、left、bottom、right 屬性對元素定位,其實是兩個元素的最靠近的兩條 border 邊界線之間的距離。

而 fixed 元素,不過是把相對的定位元素換成 html 元素 罷了(即相對文檔定位),計算方式還是一樣。
這里有個問題?

需要注意的是,前面都是只設置了定位屬性,而沒有設置 margin ,默認情況下倆定位元素間 margin 為0(默認情況下body和html間存在margin)。那設置了 margin 又是什么情況呢?從上圖可知,在設置了margin情況下,在 margin 計算完成后(邊距融合等情況計算后),margin 視為 某一個元素的一部分,即此時 left (或其它) 代表的是完整的兩個元素之間的距離,從一個元素的最 靠近另一個元素的border的一條邊 到另一個元素的 margin 的外側的距離。在我們視覺看來,此時兩個元素間的距離是大于 left (或其它)的值的,原因是 margin 不可見,而 margin 是算作某一個元素的內部的,不在包含在 left (或其它)。

在對定位有了初步的了解之后,我們來看一下,涉及到位置的地方:
在多種事件對象中,包含了位置相關信息,比如:
TouchEvent 中的 Touch 類對象就包含了

Touch.screenY、Touch.clientY、Touch.pageY 等屬性,分別指事件發(fā)生時的 相對于 屏幕 、 瀏覽器視口 、 文檔 的坐標。

UIEvent 作為 TouchEvent 的父類,也有差不多的屬性。

MouseEvent 作為 TouchEvent 的兄弟類,同樣有差不多的屬性。

getBoundingClientRect() 返回相對于視口坐標

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的,因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,906評論 0 0
  • 當在這一個頁面上實現(xiàn)布局和定位有幾種不同的技術。使用哪種技術,很大程序上取決于內容和目標頁面,因為有很多技術比別人...
    lulu_c閱讀 1,215評論 0 5
  • 概述 在網易云課堂學習李南江老師的《從零玩轉HTML5前端+跨平臺開發(fā)》時,所整理的筆記。筆記內容為根據(jù)個人需求所...
    墨荀閱讀 2,465評論 0 7
  • 一、浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征:1、浮動模型是一種可視化格式...
    青鳴閱讀 1,324評論 0 0
  • "你未看此花時,此花與汝心同歸于寂;你來看此花時,則此花顏色一時明白起來。 "一王陽明 微信7.0開機界面變成了這...
    黃向書閱讀 265評論 0 0

友情鏈接更多精彩內容