font默認行高覆蓋相對定位絕對定位和float的區別

Rocture 發布于2019-08-02 16:12 / 416人閱讀

摘要：可以理解為真身還在原來的位置站著，魂通過進行移動，并且層級比未脫離文檔流的元素高一級，移動到哪里就蓋住哪個元素。

67-68講開班信息案例

代碼只寫了67講，主要還是line-heught讓文字垂直居中，font覆蓋行高的問題，這些在前面都講過。68講沒什么重要知識點，代碼沒寫，下面是67講的代碼：



導航條






     
        近期開班
        16年面授開班計劃

69講相對定位 特點

position:relative設置后，不會影響頁面原有的布局，不會脫離文檔流。可以理解為真身還在原來的位置站著，魂通過left,top,bottom,right進行移動，并且層級比未脫離文檔流的元素高一級，移動到哪里就蓋住哪個元素。

left,top,bottom,right和margin相似，通過這4個值可以進行相對當前定位的位置移動

相對定位塊級元素，內聯元素的性質沒發視任何改變，就理解為和沒開啟相對定位一摸一樣！這和float是大不相同的。

上圖代碼



導航條

70講絕對定位 特點

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

只設置position:absulote在沒有設置偏移量left,top,bottom,right的情況下，它還會在原有的位置，這點和相對定位一樣

絕對定位的默認參照物是瀏覽器窗口的左上角，但是當祖先元素開啟了定位以后參照參照物就會是最近開啟定位的祖先元素，在這里最好看一看珠峰培訓2018年周嘯天的第97講 DOM盒子模型7-盒子偏移量和OFFET。另外，也要區分和float的區別，float的浮動是無論如何也逃不出父元素的，沒有參照物的概念。

開啟了絕對定位元素的性質會發生改變，這里和float一樣，內聯變塊級元素，塊級元素寬度消失，并且對父元素造成高度塌陷問題

總結

絕對定位和float很容易混淆，但是要區分好。float獨有的是逃不出父級的手掌心，據對定位是多了一個參照物。另外要說的一點是只有設置了position才能使用left,top,bottom,right屬性并且也能使用margin，如果不設置position只能用margin



導航條

GPU云服務器云服務器相對定位-絕對定位中的絕對定位相對定位絕對定位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54846.html

font默認行高覆蓋相對定位絕對定位和float的區別

摘要：可以理解為真身還在原來的位置站著，魂通過進行移動，并且層級比未脫離文檔流的元素高一級，移動到哪里就蓋住哪個元素。 67-68講開班信息案例代碼只寫了67講，主要還是line-heught讓文字垂直居中，font覆蓋行高的問題，這些在前面都講過。68講沒什么重要知識點，代碼沒寫，下面是67講的代碼：導航條 *{ margin:0px; ...

funnyZhang 2019-08-29 18:32 評論0 收藏0
浮動的補充丶文本和字體屬性丶background丶定位

摘要：英語為了防止用戶電腦里面，沒有微軟雅黑這個字體。因為絕對定位脫離標準流，影響頁面的布局。一丶浮動的補充　　浮動的特性: 　　　　1.浮動的元素脫標　　　　2.浮動的元素互相貼靠　　　　3.浮動的元素有字圍效果　　　　4.浮動的元素有收縮的效果　　　　前提是標準文檔流,margin的垂直方向會出現塌陷問題　　　　如果盒子居中:margin: 0auto;如果盒子浮動了,margin...

番茄西紅柿 2019-04-23 13:22 評論0 收藏0
CSS總結

摘要：，視窗高度，等于視窗高度的。并不會對他周圍的元素產生任何影響。修改屬性只會造成本元素的重繪。雖然它和普通的類相似，可以為已有的元素添加樣式，但是它只有處于樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。 display inline/inline-block/block -->> 牛奶/果凍/堅果 inline: img, span, strong, em, i, em, a...

godlong_X 2019-08-30 14:04 評論0 收藏0
CSS簡潔筆記

摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。 1.通用屬性 name：名稱，可以重復，可以一樣; class：類名，可以重復，也可以擁有多個，給CSS用的；如; id：唯一標示，不能重復，一般多用在JavaScript中；命名規...

yanbingyun1990 2019-08-02 16:00 評論0 收藏0
CSS簡潔筆記

摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。 1.通用屬性 name：名稱，可以重復，可以一樣; class：類名，可以重復，也可以擁有多個，給CSS用的；如; id：唯一標示，不能重復，一般多用在JavaScript中；命名規...

FullStackDeveloper 2019-08-29 14:01 評論0 收藏0