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

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

第三十九章 坐標(biāo)系

現(xiàn)在有些同學(xué)可能已經(jīng)有疑問了,你看這幾種定位啊,都是讓元素到了別的元素的前面。但是要是我們用這種方式把多個元素定義到了相同的位置,究竟誰在前面誰在后面?

這時候就涉及到了網(wǎng)頁的坐標(biāo)系,這是一個三維的坐標(biāo)系,然而并不復(fù)雜在三維層面。真正讓人頭疼的是二維上的各種變化。讓我們從最簡單地聊起。

最簡單的,網(wǎng)頁的的左上角為坐標(biāo)系的原點,向右為 X 軸的正方向,向下為 Y 軸的正的方向。那么向著屏幕外則是 Z 軸的正方向。

X、Y 軸我們用諸如像素之類的單位進行測量,而 Z 軸則只有順序值,沒有單位,它對應(yīng)一個單獨的屬性值 z-index 來表示元素在這個方向上的順序,這有就是我們前邊問題的答案。(這個下一章進行演示)

如果只是這樣我們當(dāng)然很容易理解和掌握,但是很多時候事情沒這么簡單。元素的位置并不是固定的,所以有些東西就很難用默認(rèn)的原點進行計算了。比如前邊學(xué)習(xí)的背景位置(background-position),我們不能說元素背景在上邊這個默認(rèn)坐標(biāo)系中位置,那樣計算很麻煩,而且我們以后如果需要給元素移動位置,還要再次計算這個坐標(biāo)值,顯然很煩惱的。所以我們就用了相對坐標(biāo)系。以元素的左上角為原點,去計算背景圖片的偏移量(坐標(biāo))。那么其實這個背景定位的值也就是背景圖的左上角相對于原點(元素的左上角)的坐標(biāo)值。

你看我說了這么多左上角,因為在網(wǎng)頁中左上角是一個很常用的定位基準(zhǔn),為什么選他?因為你的元素寬高的變化并不會影響左上角的位置(大部分情況下)。這樣比較便于計算,這也是希望讓事情變得簡單。其實元素的寬高也可以看作是元素右下角點相對于左上角點(原點)的坐標(biāo)。

然后再說前邊用到的 left、righttop、bottom 這幾個屬性。他們涉及到的坐標(biāo)系其實只有一個軸,比如 left 它涉及到的方向就是左右而已,或者說只是 X 軸的正負(fù)方向而已,這時候我們再去強調(diào)是哪個軸就已經(jīng)是畫蛇添足了。然后如果我們還按照基本的坐標(biāo)系去判斷正負(fù)方向依舊是徒增煩惱的做法,所以干脆根據(jù)我們的第一直覺,向著元素內(nèi)的方向即為正方向,這樣好記好判斷。

同理的,padding 的四個方向也因為相同的原因而視為向內(nèi)的是正方向。

margin 是和 padding 相對的,他們補的方向相反,所以 margin 以向元素外的方向為正方向。

這一章文字不多,但是很重要,因為這些問題幾乎遍布了元素定位的每一個方面,希望仔細(xì)想想,努力去理解他們。


本書是收費的,不過交費憑自覺。價格定義為每人請我喝一杯咖啡(哪種品質(zhì)的咖啡隨意),支付寶賬號:

alay9999@163.com (劉源)

為了讓大家閱讀方便,本書將在如下站點發(fā)布,但最終內(nèi)容以主站為準(zhǔn):

未經(jīng)本人許可,禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系: dms@zji.me