在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ 產品經理/ 第三十九章 坐標系
第四十一章 定位實例(二)
第十四章 從 div 扯開去
第四十三章 定位實例(四)
第四十五章 無聊的寫個小游戲吧
第十七章 導航條(二)
第十三章 神一樣的 CSS
第二十三章 導航條(八)
第四十章 定位實例(一)
第五十九章 見證奇跡
第三十五章 隨便聊聊
第十九章 導航條(四)
第四十四章 定位實例(五)
第三十六章 定位(一)
第三十九章 坐標系
第三十四章 一些補遺
第五十八章 各就各位,預備~~
第二十七章 首屏大海報(一)
第二十六章 CSS 書寫規(guī)范
第十一章 一起寫個百度
第三章 幾個小故事
第七章 認識鏈接
前言
第五十五章 苛刻至極!
第三十三章 一個頁尾
第二十二章 導航條(七)
第四十七章 JavaScript Start
第五十章 最簡單的邏輯判斷
第五十三章 一百遍啊一百遍!
第四章 做點準備工作
第一章 開場小談
第六章 開始寫點東西
第五十六章 一套工具
第四十二章 定位實例(三)
第五十二章 愛妃,朕還宣你!
第二十五章 導航條(十)
第五章 一個模板
第二章 扯扯學習方法
第十八章 導航條(三)
第四十六章 響應式
第四十八章 變量
第十六章 導航條(一)
第三十八章 定位(三)
第二十九章 首屏大海報(三)
第四十九章 運算符
第九章 來吧,表哥(表格)!
第三十一章 還是海報
第十章 表格布局原理
第三十章 首屏大海報(四)
第十二章 相對地址
第二十章 導航條(五)
第五十七章 助理!麻煩過來一下~
第三十二章 一些格子
第五十一章 朕宣你!
第五十四章 一萬遍啊一萬遍!
第二十八章 首屏大海報(二)
第十五章 開始征途
第三十七章 定位(二)
第六十章 開始玩玩
第二十一章 導航條(六)
第八章 半個標簽
第二十四章 導航條(九)

第三十九章 坐標系

現(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