我真不懂margin

2022-07-17 10:48:13 字數 3508 閱讀 7833

平時很多問題,大多是知其然不知其所以然造成的。所以,明白了原理,在遇到問題就有了分析的思路。所以,我希望大家在遇到非標準的問題的時候,也就所謂的某些bug的時候,

多去探查一下,為什麼會產生這種問題。解決的原理是什麼,別解決了就算完了。現在的省事,會給你將來的成長埋下隱患。

而往往所謂的bug,是對規範,原理的理解不透徹造成的。

所以多問個為什麼,雖尺有所短,但假以時日,必寸有所長。

了解了這些,就可以說margin我是懂點了。距離真正懂還差得遠。下面是針對自己情況的一些筆記和總結。

圓心海玉

大漠老師**

感謝前輩們的心血。

margin下面,父元素的背景可以看到。可以說margin的地方是透明的

當乙個元素位於另乙個元素中,且這個父元素沒有東西來和子元素隔開(父元素有border或者padding都可以隔開子元素),那父元素與子元素的上/下外邊距也會合併。

只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。

外邊距合併

只發生在垂直方向上,水平方向上是不會發生外邊距合併的。

實際工作中,垂直外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距,而且只在標準瀏覽器下(firffox、chrome、opera、sarfi)產生問題,ie下反而表現良好。

像水一樣,接觸後融合。但大小是之前大的那個。

根據規範,乙個盒子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊

注意,脫離文件流後不受影響。

再說了白點就是:父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己「領導」(父元素,祖先元素)的麻煩,把自己的margin當領導的margin執行

其中有類特殊的元素:如img|input|select|textarea|button|label等,他們被稱為可置換元素(replaced element)

他們區別一般inline元素(相對而言,稱non-replaced element)是:這些元素擁有內在尺寸(intrinsic

dimensions),他們可以設定width/height屬性。他們的性質同設定了display:inline-block的元素一致。

margin也能用於內聯元素,這是規範所允許的,但是margin-top和margin-bottom對內聯元素(對行)的高度沒有影響,並且由於邊界效果(margin效果)是透明的,他也沒有任何的視覺影響。

給行內非替換元素設定上下margin是沒用的。而且行內元素不會發生外邊距合併。外邊距合併只在垂直方向上。

注意 也會占個位置

行內替換元素,可以設定寬高,margin上下也會有效果。且不會在水平方向上有外邊距合併,還是那句話,外邊距合併只在垂直方向上。

margin 屬性可以應用於幾乎所有的元素,除了**顯示型別(不包括 table-caption, table and inline-table)的元素,而且垂直外邊距對非置換內聯元素(non-replaced inline element)不起作用。

置換元素(replaced element)主要是指 img, input,

textarea, select, object 等這類預設就有 css 格式化外表範圍的元素。

何謂參考線?參考線就是 margin 移動的基準點,此基準點相對於 box 是靜止的。而 margin 的數值,就是 box 相對於參考線的位移量。

從上我們可以看到 top 和 left 都是以外元素為參考,而right 和 bottom 以本元素為參考。上面的位移方向是指 margin 數值為正值時候的情形,如果是負值則位移方向相反。

box的實際大小= box的物理大小+正的margin

這僅對元素本身有效,對於其後面的相關元素,他們則只以 margin 的邏輯大小為準則,進行布局

結論:box最後的顯示大小等於 box 的 border 及 border 內的大小加上正的 margin 值。而負的 margin 值不會影響 box 的實際大小,如果是負的 top 或 left 值會引起 box 的向上或向左位置移動,如果是 負的bottom

或 right 只會影響下面 box 的顯示的參考線。

實際的邏輯大小,是按照邊邊來算的。

基線,邏輯大小,物理大小,顯示大小。

基線是margin的關鍵。邏輯大小改變後,下乙個block基線位置就變了,最後的定位還是看基線位置。尤其是上面和左面。

行內元素,設定了浮動,就可以設定寬高了

float:left等浮動屬性可以讓inline元素haslayout,會讓inline元素表現得跟inline-block元素的特性一樣,支援高寬,垂直margin和padding等

ie6/7/8下auto margin居中bug:發生場合:給block元素設定margin auto無法居中 解決方法:出現這種bug的原因通常是沒有doctype,然後觸發了ie的quirks mode,加上doctype宣告就可以了。在《打敗ie的葵花寶典》裡給出的方法是給block元素新增乙個width能夠解決,但根據本人親測,加with此種方法是無效的,如果沒有doctype即使給元素新增width也無法讓block元素居中。

原理分析:缺少doctype宣告。

ie8下input[button | submit] 設定margin:auto無法居中

發生場合:ie8下,如果給像button這樣的標籤(如button input[type="button"] input[type="submit"])設定如果不設定寬度的話無法居中。

解決方法:可以給為input加上寬度

原理分析:ie8瀏覽器bug。

ie8百分比padding垂直margin bug:

發生場合:當父元素設定了百分比的padding,子元素有垂直的margin的時候,就好像父元素被設定了margin一樣。

解決方法:給父元素加乙個overflow:hidden/auto。

原理分析:ie8瀏覽器bug。

我真不想寫背景

某巨魔突然對等式很感興趣,他正在研究 a1 x1 a 2x2 an xn b 存在非負整數解的條件。他要求你編寫乙個程式,給定 n an 以及 b 的取值範圍,求出有多少 b可以使等式存在非負整數解。輸入的第一行包含 3 個正整數,分別表示 n bmin bma x 分別表示數列的長度 b 的下界 ...

我不懂法律

今天聽廣播,講到了乙個案例,請了乙個律師做嘉賓,案例是什麼已經不重要了,主要是,我在聽廣播的時候,突然想起乙個問題,覺得很有意思,我是不懂法律的啦,所以就寫出來,讓大家批評.大概我真正有了一定的思考能力以來,基本上都生活在廣東,可以看到很多香港的電視劇集,雖然電視中的都是戲,但也從一定程度上了解了香...

原來我不懂 he

曾經以為自己是個很堅強的人,即使失去愛情,也可以活出自己的精彩 其實不是,我不明白為什麼人總要在經歷一些事情之後才能多了解自己一點,如果一切都可以避免,就不會這麼無奈了!曾經以為自己是世界上最幸福的人,即使失去一切,我還有愛情,其實不是,直到有一天他和我說對不起的時候我就知道一切都是自己在騙自己,以...