国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS基礎(chǔ)知識(shí)之position

xiaowugui666 / 1708人閱讀

摘要:最近在慕課網(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

相關(guān)文章

  • 天坑,CSS定位Position(六分五)

    摘要:下文稱位置屬性即為。注意,不會(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)了四...

    anRui 評(píng)論0 收藏0
  • 天坑,CSS定位Position(六分五)

    摘要:下文稱位置屬性即為。注意,不會(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)了四...

    xuweijian 評(píng)論0 收藏0
  • 前端CSS

    摘要:不管你是滾動(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)度...

    raise_yang 評(píng)論0 收藏0
  • CSS基礎(chǔ)知識(shí)float

    摘要:前段時(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)行更深入的...

    wuyangchun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<