盒子模型之margin相關技巧!

2022-03-07 17:28:14 字數 687 閱讀 8811

廢話不多說,直接進入主題,margin相關技巧。

1、設定元素水平居中:margin:x auto;

2、margin負值讓元素位移及邊框合併。

外邊距合併

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

解決外邊距合併的方法:

a、使用這種特性。

b、設定一邊的外邊距,一般設定margin-top

c、將元素浮動或者定位(元素浮動或定位時,不會出現margin合併)

margin-top塌陷

在兩個盒子巢狀時候,內部的盒子設定的margin-top會加到外邊的盒子上,導致內部的盒子margin-top設定失敗,解決方法如下:

a、外部盒子設定乙個邊框

b、外部盒子設定overflow:hidden

c、使用偽元素類:

css盒子模型外邊距(margin)

margin屬性用於設定外邊距,即控制盒子和盒子之間的距離 屬性作用 margin left 左外邊距 margin right 右外邊距 margin top 上外邊距 margin botom 下外邊距 外邊距典型應用 外邊距可以讓塊級盒子水平居中,但是必須滿足兩個條件 盒子必須指定了寬度 wi...

盒子模型的margin負數用法

盒子的margin用法大家都應該很清楚,在實際中一般使用margin來水平居中或者讓自己移動相應的位置,但是margin給負數在實際中也是有用的。如圖為兩個浮動的盒子。給左邊的盒子margin left 50px 後如圖所示 如圖,藍色盒子移動了,但是粉色盒子自身只是被壓住了,並沒有移動。如下 do...

盒子模型相關知識

盒子模型 box model 組成 邊框 border 外邊距 margin 內邊距 padding 和實際內容 content border可以設定元素的邊框,邊框有三部分組成邊框寬度 粗細 邊框樣式 邊框顏色。語法 border border width border style border ...