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

資訊專欄INFORMATION COLUMN

font默認(rèn)行高覆蓋 相對(duì)定位 絕對(duì)定位和float的區(qū)別

funnyZhang / 1532人閱讀

摘要：可以理解為真身還在原來(lái)的位置站著，魂通過(guò)進(jìn)行移動(dòng)，并且層級(jí)比未脫離文檔流的元素高一級(jí)，移動(dòng)到哪里就蓋住哪個(gè)元素。

67-68講 開(kāi)班信息案例 
代碼只寫(xiě)了67講，主要還是line-heught讓文字垂直居中，font覆蓋行高的問(wèn)題，這些在前面都講過(guò)。68講沒(méi)什么重要知識(shí)點(diǎn)，代碼沒(méi)寫(xiě)，下面是67講的代碼：


導(dǎo)航條
69講 相對(duì)定位 特點(diǎn)

position:relative設(shè)置后，不會(huì)影響頁(yè)面原有的布局，不會(huì)脫離文檔流?？梢岳斫鉃檎嫔磉€在原來(lái)的位置站著，魂通過(guò)left,top,bottom,right進(jìn)行移動(dòng)，并且層級(jí)比未脫離文檔流的元素高一級(jí)，移動(dòng)到哪里就蓋住哪個(gè)元素。

left,top,bottom,right和margin相似，通過(guò)這4個(gè)值可以進(jìn)行相對(duì)當(dāng)前定位的位置移動(dòng)

相對(duì)定位塊級(jí)元素，內(nèi)聯(lián)元素的性質(zhì)沒(méi)發(fā)視任何改變，就理解為和沒(méi)開(kāi)啟相對(duì)定位一摸一樣！這和float是大不相同的。

上圖代碼


導(dǎo)航條
70講 絕對(duì)定位 特點(diǎn)

與相對(duì)定位不同，開(kāi)啟絕對(duì)定位會(huì)脫離文檔流，影響原有布局(后面元素往下鉆)

只設(shè)置position:absulote在沒(méi)有設(shè)置偏移量left,top,bottom,right的情況下，它還會(huì)在原有的位置，這點(diǎn)和相對(duì)定位一樣

絕對(duì)定位的默認(rèn)參照物是瀏覽器窗口的左上角，但是當(dāng)祖先元素開(kāi)啟了定位以后參照參照物就會(huì)是最近開(kāi)啟定位的祖先元素，在這里最好看一看珠峰培訓(xùn)2018年周?chē)[天的第97講 DOM盒子模型7-盒子偏移量和OFFET。另外，也要區(qū)分和float的區(qū)別，float的浮動(dòng)是無(wú)論如何也逃不出父元素的，沒(méi)有參照物的概念。

開(kāi)啟了絕對(duì)定位元素的性質(zhì)會(huì)發(fā)生改變，這里和float一樣，內(nèi)聯(lián)變塊級(jí)元素，塊級(jí)元素寬度消失，并且對(duì)父元素造成高度塌陷問(wèn)題

總結(jié) 
絕對(duì)定位和float很容易混淆，但是要區(qū)分好。float獨(dú)有的是逃不出父級(jí)的手掌心，據(jù)對(duì)定位是多了一個(gè)參照物。另外要說(shuō)的一點(diǎn)是只有設(shè)置了position才能使用left,top,bottom,right屬性并且也能使用margin，如果不設(shè)置position只能用margin



導(dǎo)航條

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114401.html

相關(guān)文章

  • font默認(rèn)行高覆蓋 相對(duì)定位 絕對(duì)定位和float的區(qū)別

    摘要：可以理解為真身還在原來(lái)的位置站著，魂通過(guò)進(jìn)行移動(dòng)，并且層級(jí)比未脫離文檔流的元素高一級(jí)，移動(dòng)到哪里就蓋住哪個(gè)元素。 67-68講 開(kāi)班信息案例 代碼只寫(xiě)了67講，主要還是line-heught讓文字垂直居中，font覆蓋行高的問(wèn)題，這些在前面都講過(guò)。68講沒(méi)什么重要知識(shí)點(diǎn)，代碼沒(méi)寫(xiě)，下面是67講的代碼： 導(dǎo)航條 *{ margin:0px; ...

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

  • 浮動(dòng)的補(bǔ)充丶文本和字體屬性丶background丶定位

    摘要：英語(yǔ)為了防止用戶電腦里面，沒(méi)有微軟雅黑這個(gè)字體。因?yàn)榻^對(duì)定位脫離標(biāo)準(zhǔn)流，影響頁(yè)面的布局。一丶浮動(dòng)的補(bǔ)充 　　浮動(dòng)的特性: 　　　　1.浮動(dòng)的元素脫標(biāo) 　　　　2.浮動(dòng)的元素互相貼靠 　　　　3.浮動(dòng)的元素有字圍效果 　　　　4.浮動(dòng)的元素有收縮的效果 　　　　前提是標(biāo)準(zhǔn)文檔流,margin的垂直方向會(huì)出現(xiàn)塌陷問(wèn)題 　　　　如果盒子居中:margin: 0auto;如果盒子浮動(dòng)了,margin...

    番茄西紅柿 評(píng)論0 收藏0

  • CSS總結(jié)

    摘要：，視窗高度，等于視窗高度的。并不會(huì)對(duì)他周?chē)脑禺a(chǎn)生任何影響。修改屬性只會(huì)造成本元素的重繪。雖然它和普通的類(lèi)相似，可以為已有的元素添加樣式，但是它只有處于樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類(lèi)。 display inline/inline-block/block -->> 牛奶/果凍/堅(jiān)果 inline: img, span, strong, em, i, em, a...

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

  • CSS簡(jiǎn)潔筆記

    摘要：層疊性發(fā)生的前提樣式?jīng)_突優(yōu)先級(jí)權(quán)重行內(nèi)引入標(biāo)簽通用把權(quán)重相加，值越大越有先權(quán)重一樣，后面的樣式起作用補(bǔ)充知識(shí)筆記表單優(yōu)化寫(xiě)法用戶名格式化列表圖標(biāo)表單合并設(shè)置表格邊框合并，適用于表格格式化上下文默認(rèn)值。 1.通用屬性 name：名稱，可以重復(fù)，可以一樣; class：類(lèi)名，可以重復(fù)，也可以擁有多個(gè)，給CSS用的；如; id：唯一標(biāo)示，不能重復(fù)，一般多用在JavaScript中；命名規(guī)...

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

  • CSS簡(jiǎn)潔筆記

    摘要：層疊性發(fā)生的前提樣式?jīng)_突優(yōu)先級(jí)權(quán)重行內(nèi)引入標(biāo)簽通用把權(quán)重相加，值越大越有先權(quán)重一樣，后面的樣式起作用補(bǔ)充知識(shí)筆記表單優(yōu)化寫(xiě)法用戶名格式化列表圖標(biāo)表單合并設(shè)置表格邊框合并，適用于表格格式化上下文默認(rèn)值。 1.通用屬性 name：名稱，可以重復(fù)，可以一樣; class：類(lèi)名，可以重復(fù)，也可以擁有多個(gè)，給CSS用的；如; id：唯一標(biāo)示，不能重復(fù)，一般多用在JavaScript中；命名規(guī)...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<