使用margin總結

2021-08-08 14:29:57 字數 788 閱讀 5339

1.垂直外邊距合併問題

當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

注意點:當乙個盒子如果沒有上內邊距和上邊框,那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊

。解決方案:

1.使用父元素的padding來隔離與子元素之間的距離

2.設定父元素的overflow為hidden;

第一種方法比較好理解,但是第二種方法是什麼鬼?

在w3c css2.1規範中有這樣乙個概念bfc(「塊級格式化上下文」),就是頁面上的乙個隔離的渲染區域,容器裡面的子元素不會再布局上影響到外面的元素。

bfc其實是頁面中元素的乙個隱藏屬性,開啟之後,元素將會具有以下特性:

1.元素的垂直外邊距不會和子元素重疊

2.開啟bfc的元素不會被浮動元素所覆蓋

3.開啟bfc的元素可以包含浮動元素

那麼如何才能開啟bfc呢?

float的值不為none

overflow的值不為visible

position的值不為relative和static

display的值為table-cell, table-caption, inline-block

2.行內元素與塊級元素使用margin的區別

行內元素只能設定左右的margin,設定上下的margin無效

而塊級元素可以任意設定上下左右的margin

margin屬性總結

margin屬性總結 1.使用 margin 0 auto 的盒子,必須要有width,有明確的width 2.只有標準流中的盒子,才能使用 margin 0 auto 居中,即當乙個盒子浮動了,絕對定位了,固定定位了,都不能使用 margin 0 auto 3.margin 0 auto 是在居中...

margin負值的應用總結

margin負值 之前一直 應用都是定位 和 列表的時候,從來沒有想著進行個總結,直到遇到了在專案中遇到了 乙個margin負值 但是寬度增加的問題 才想著研究下 margin負值的問題。現將網上找到資料和文章,加上自己理解整理如下 1.元素水平垂直居中 這個彈框要絕對居中啊 tips top和le...

margin塌陷 margin合併

原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...