現(xiàn)在有些同學可能已經有疑問了,你看這幾種定位啊,都是讓元素到了別的元素的前面。但是要是我們用這種方式把多個元素定義到了相同的位置,究竟誰在前面誰在后面?
這時候就涉及到了網頁的坐標系,這是一個三維的坐標系,然而并不復雜在三維層面。真正讓人頭疼的是二維上的各種變化。讓我們從最簡單地聊起。
最簡單的,網頁的的左上角為坐標系的原點,向右為 X 軸的正方向,向下為 Y 軸的正的方向。那么向著屏幕外則是 Z 軸的正方向。
X、Y 軸我們用諸如像素之類的單位進行測量,而 Z 軸則只有順序值,沒有單位,它對應一個單獨的屬性值 z-index 來表示元素在這個方向上的順序,這有就是我們前邊問題的答案。(這個下一章進行演示)
如果只是這樣我們當然很容易理解和掌握,但是很多時候事情沒這么簡單。元素的位置并不是固定的,所以有些東西就很難用默認的原點進行計算了。比如前邊學習的背景位置(background-position),我們不能說元素背景在上邊這個默認坐標系中位置,那樣計算很麻煩,而且我們以后如果需要給元素移動位置,還要再次計算這個坐標值,顯然很煩惱的。所以我們就用了相對坐標系。以元素的左上角為原點,去計算背景圖片的偏移量(坐標)。那么其實這個背景定位的值也就是背景圖的左上角相對于原點(元素的左上角)的坐標值。
你看我說了這么多左上角,因為在網頁中左上角是一個很常用的定位基準,為什么選他?因為你的元素寬高的變化并不會影響左上角的位置(大部分情況下)。這樣比較便于計算,這也是希望讓事情變得簡單。其實元素的寬高也可以看作是元素右下角點相對于左上角點(原點)的坐標。
然后再說前邊用到的 left、right、top、bottom 這幾個屬性。他們涉及到的坐標系其實只有一個軸,比如 left 它涉及到的方向就是左右而已,或者說只是 X 軸的正負方向而已,這時候我們再去強調是哪個軸就已經是畫蛇添足了。然后如果我們還按照基本的坐標系去判斷正負方向依舊是徒增煩惱的做法,所以干脆根據我們的第一直覺,向著元素內的方向即為正方向,這樣好記好判斷。
同理的,padding 的四個方向也因為相同的原因而視為向內的是正方向。
margin 是和 padding 相對的,他們補的方向相反,所以 margin 以向元素外的方向為正方向。
這一章文字不多,但是很重要,因為這些問題幾乎遍布了元素定位的每一個方面,希望仔細想想,努力去理解他們。
本書是收費的,不過交費憑自覺。價格定義為每人請我喝一杯咖啡(哪種品質的咖啡隨意),支付寶賬號:
alay9999@163.com (劉源)
為了讓大家閱讀方便,本書將在如下站點發(fā)布,但最終內容以主站為準:
未經本人許可,禁止任何形式轉載。相關事宜請聯(lián)系: dms@zji.me