摘要:最近在慕課網(wǎng)學(xué)習(xí)了網(wǎng)頁(yè)布局基礎(chǔ)和固定層效果,都是由聲音甜美的婧享人生老師所錄制,視頻詳細(xì)講解了中的用法,在此把學(xué)習(xí)筆記分享給大家。
最近在慕課網(wǎng)學(xué)習(xí)了 網(wǎng)頁(yè)布局基礎(chǔ) 和 固定層效果 ,都是由聲音甜美的 婧享人生 老師所錄制,視頻詳細(xì)講解了CSS中position的用法,在此把學(xué)習(xí)筆記分享給大家。
CSS定位機(jī)制標(biāo)準(zhǔn)文檔流(Normal flow)
浮動(dòng)定位(Floats)
絕對(duì)定位(Absolute positioning)
標(biāo)準(zhǔn)文檔流從上到下,從左到右,輸出文檔內(nèi)容
由塊級(jí)元素和行級(jí)元素組成
塊級(jí)元素從左到右撐滿頁(yè)面,獨(dú)占一行
觸碰到頁(yè)面邊緣時(shí),會(huì)自動(dòng)換行
常見(jiàn)的標(biāo)簽有:div、ul、li、di、dt、p
行級(jí)元素能在同一行內(nèi)顯示
不會(huì)改變HTML文檔結(jié)構(gòu)
常見(jiàn)的標(biāo)簽有:input、span、label、strong、img
盒子模型邊框(border)
外邊距(margin)
內(nèi)邊距(padding)
盒子中的內(nèi)容(content)
盒子模型尺寸=邊框+外邊距+內(nèi)邊距+盒子中內(nèi)容的尺寸
盒子3D模型第一層:border
第二層:content + padding
第三層:background-image
第四層:background-color
第五層:margin
浮動(dòng)定位三個(gè)屬性:left(左浮動(dòng))、right(右浮動(dòng))、none(不浮動(dòng))
元素會(huì)左移、或右移、直到碰到容器為止
雖然脫離了標(biāo)準(zhǔn)文檔流,但情況有些特殊,詳情見(jiàn)CSS基礎(chǔ)知識(shí)之float
清除浮動(dòng)的常用方法clear屬性,常用clear:both;(當(dāng)父包含塊縮成一條時(shí)無(wú)效)
同時(shí)設(shè)置width:100%(或固定寬度)+overflow:hidden;
相對(duì)定位相對(duì)于自身原有位置進(jìn)行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-index屬性
絕對(duì)定位建立了以包含塊為基準(zhǔn)的定位
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-index屬性
絕對(duì)定位-偏移參考基準(zhǔn)未設(shè)置偏移量時(shí),無(wú)論是否存在已定位的祖先元素,都保持在元素初始位置
已設(shè)置偏移量時(shí),無(wú)已定位祖先元素,以為偏移參考基準(zhǔn)
已設(shè)置偏移量時(shí),有已定位祖先元素,以距其最近的已定位祖先元素為偏移參考基準(zhǔn)
絕對(duì)定位-常見(jiàn)問(wèn)題沒(méi)有設(shè)置寬度時(shí),元素的寬度根據(jù)內(nèi)容進(jìn)行調(diào)節(jié)
左右布局時(shí),柱子層的高度,一定要大于絕對(duì)定位元素的高度
固定定位(也屬于絕對(duì)定位)位置固定,不會(huì)隨滾動(dòng)條變化
被他遮蓋的元素,可以從其下層穿過(guò)
固定定位-偏移參考基準(zhǔn)未設(shè)置偏移量時(shí),無(wú)已定位祖先元素,以瀏覽器窗口為基準(zhǔn)定位
未設(shè)置偏移量時(shí),有已定位祖先元素,以祖先元素為基準(zhǔn)定位
已設(shè)置偏移量時(shí),無(wú)論是否存在已定位的祖先元素,均以瀏覽器窗口為基準(zhǔn)定位
歡迎來(lái)到 石佳劼的博客,如有疑問(wèn),請(qǐng)?jiān)凇冈摹乖u(píng)論區(qū) 留言,我會(huì)盡量為您解答。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/115187.html
摘要:下文稱位置屬性即為。注意,不會(huì)脫離文檔流,具體見(jiàn)下面的圖示。直譯為修正,簡(jiǎn)單粗暴,直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺(jué)得position這個(gè)屬性真的算是CSS的見(jiàn)面殺了。尤其是absolute,當(dāng)年可是被虐的不輕。當(dāng)然了,現(xiàn)在愛(ài)上了這個(gè)屬性,誰(shuí)用誰(shuí)知道。 position屬性 position是CSS的一個(gè)屬性,地位較高,也是我們重點(diǎn)要說(shuō)的一個(gè)屬性。 對(duì)應(yīng)了四...
摘要:下文稱位置屬性即為。注意,不會(huì)脫離文檔流,具體見(jiàn)下面的圖示。直譯為修正,簡(jiǎn)單粗暴,直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺(jué)得position這個(gè)屬性真的算是CSS的見(jiàn)面殺了。尤其是absolute,當(dāng)年可是被虐的不輕。當(dāng)然了,現(xiàn)在愛(ài)上了這個(gè)屬性,誰(shuí)用誰(shuí)知道。 position屬性 position是CSS的一個(gè)屬性,地位較高,也是我們重點(diǎn)要說(shuō)的一個(gè)屬性。 對(duì)應(yīng)了四...
摘要:不管你是滾動(dòng)頁(yè)面還是背景設(shè)置的元素,它都會(huì)保持在相同的位置。當(dāng)滾動(dòng)元素時(shí),背景會(huì)隨之滾動(dòng)。目錄 一.css三種引用方式 1.行間式 2.內(nèi)聯(lián)式 3.外聯(lián)式 4.三種方式的優(yōu)先級(jí) 二.樣式與長(zhǎng)度顏色 1.基本樣式 2.長(zhǎng)度...
摘要:前段時(shí)間寫(xiě)過(guò)一篇基礎(chǔ)知識(shí)之,當(dāng)時(shí)對(duì)的理解不太準(zhǔn)確,被慕課網(wǎng)多名讀者指出原文已修正,如有誤導(dǎo)實(shí)在抱歉。浮動(dòng)的基礎(chǔ)知識(shí)浮動(dòng)有個(gè)屬性左浮動(dòng)右浮動(dòng)不浮動(dòng)繼承。浮動(dòng)元素脫離了標(biāo)準(zhǔn)文檔流,文字和行級(jí)元素會(huì)環(huán)繞該元素,塊級(jí)元素則不受影響。 前段時(shí)間寫(xiě)過(guò)一篇CSS基礎(chǔ)知識(shí)之position,當(dāng)時(shí)對(duì)float的理解不太準(zhǔn)確,被慕課網(wǎng)多名讀者指出(原文已修正,如有誤導(dǎo)實(shí)在抱歉)。現(xiàn)對(duì)float進(jìn)行更深入的...
閱讀 1863·2021-11-25 09:43
閱讀 2145·2021-11-19 09:40
閱讀 3422·2021-11-18 13:12
閱讀 1738·2021-09-29 09:35
閱讀 661·2021-08-24 10:00
閱讀 2504·2019-08-30 15:55
閱讀 1709·2019-08-30 12:56
閱讀 1814·2019-08-28 17:59