20190129 CSS 定位問題記錄

2022-08-28 00:09:13 字數 394 閱讀 3772

很多情況下我在寫div的時候都不會把高度寫死,而是用子元素撐開高度的方式,但是如果子元素設定了浮動或者position絕對定位,就相當於把子元素從文件流中拿出來了,這時父元素的高度就不能被子元素撐開了,那麼原本在文件流中跟在父元素後面的元素很有可能被遮擋住。解決方法:

1. 給父元素設定乙個最小高度min-height,或者給非絕對定位的子元素設定高度

2. 在父元素結束前新增乙個div,清除浮動

浮動元素在視窗縮小時可能會被擠到下面,解決方法:給父元素設定overflow:hidden,這樣被擠下去的元素就被隱藏了。

img標籤會自帶乙個邊距,解決方法:1. 將img塊狀化;2. 將img左浮動;3.  為img新增樣式img;4. 為img的父級加高度;5. 為img的父級加樣式 font-size:0;

20190129 CSS 垂直水平居中相關

元素居中是html和css永恆的問題,記錄一下我使用的居中方法 1.塊狀元素水平居中,主要用於頁面整體布局 margin 0 auto 2.文字水平居中,適用於內聯元素或inline block img預設是inline元素 text align center 3.文字垂直居中 line heigh...

CSS定位問題

在看這篇文章是,希望大家對css盒式模型有所了解,不清楚的點這裡。一 定位概述 在說明定位問題前,我們先聊聊div這個元素。通常我們把p h1或div元素常常稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 塊框從上到下乙個接乙個地垂直排列。與之相反,strong和span等元素稱為行內元素,...

CSS 定位問題

top bottom left right top right bottom left應用於定位元素,position屬性設定後。top right bottom left的值設定為正值時,元素向內收縮,設定為負值時,向外擴張 偏移屬性定義了距離包含塊相應邊的偏移,而不是距離包含塊左上角的偏移。ca...