外邊距重疊問題、背景設(shè)置

外邊距重疊就是margin-collapse。

在CSS當(dāng)中,相鄰的兩個(gè)盒子(可能是兄弟關(guān)系也可能是祖先關(guān)系)的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊,并且因而所結(jié)合成的外邊距稱為折疊外邊距。

折疊結(jié)果遵循下列計(jì)算規(guī)則:

兩個(gè)相鄰的外邊距都是正數(shù)時(shí),折疊結(jié)果是它們兩者之間較大的值。

兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí),折疊結(jié)果是兩者絕對值的較大值。

兩個(gè)外邊距一正一負(fù)時(shí),折疊結(jié)果是兩者的相加的和。

margin 可以設(shè)置負(fù)數(shù),表現(xiàn)為正數(shù)的相反操作。比如:margin-top正數(shù)為下,負(fù)數(shù)為上。

背景設(shè)置:background

顏色設(shè)置:background-color:red(顏色單詞)|#000(十六進(jìn)制)| rgb(0,0,0) ?(rgb碼 r :red 0~255,g: green 0~255,b:blue 0~255) | hsl( ) | transparent(透明設(shè)置)

背景圖片設(shè)置:background-background-image:url()

背景平鋪設(shè)置:background-repeat:repeat-x | repeat-y | no-repeat; ? ?repeat-x是X軸平鋪,repeat-y是Y軸平鋪,no-repeat是不平鋪

背景定位設(shè)置:background-position:50%;?可設(shè)置像素(支持正負(fù)數(shù))、百分比、方向其中0%相當(dāng)于left和top,50%相當(dāng)于center,100%相當(dāng)于right和bottom;

背景尺寸設(shè)置:background-size:height width | contain(自適應(yīng)平鋪,當(dāng)觸及盒子邊緣不再擴(kuò)展) | cover(自適應(yīng)鋪滿);

背景設(shè)置可復(fù)寫 background:color ?image ?position ?repeat;復(fù)寫順序沒有固定

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容