負margin的幾個問題

2021-09-19 11:19:11 字數 1445 閱讀 3207

此文持續更新,發現有趣的東西

負邊距是乙個比較奇葩的東西,為什麼說它奇葩呢?padding在border的裡面;margin在border的外面。我們可以把」border「比作房子的圍牆」,margin「比作房子外面的籬笆。可是這個籬笆的寬度偏偏可以是個負值。

好了,閒話少敘,放**!

對照

測試

.parent

.child1

.child2

child1作為對照,child2作為測試物件。

以上**在html檔案中測試的結果是child1繼承父元素寬度,而child2也繼承父元素的寬度。

圖1當我們去掉child2的css**中的「width:400px」後,child2竟然超出了parent的範圍!也就是說它把負margin的絕對值,加到了自身的內容中,這無疑增大了元素本身的寬度。

圖2好了,我們總結以下:

元素設定寬度:負邊距對元素的寬度沒有影響

元素未設定寬度:負邊距增大元素的寬度(注意是元素本身的寬度!)以至於超出容器。

好了,第一部分的驗證結束,至於應用舉例,網上的例子很多,我們只要知曉其中巧妙,大可放心應用。那再在來**一下,負邊距對相鄰元素的影響是怎樣的呢?

答案是沒有空間上的影響(有遮擋效果,這是相對產生的結果)。

圖3此文系本人原創,如有不嚴謹的地方還請指正。

第一次更新,回看時候發現我並沒有對內容上的影響做相應的測試,這次補上

圖4

圖5內容上依然沒有空間上的影響,只是z軸上的先後順序有些不同,這和布局是有關係的。

如果元素沒有設定負邊距方向上的長度或寬度,負邊距會使負邊距方向上的長度或寬度增加。

應用: 多列等寬布局/多行等高布局
如果元素設定了負邊距方向上的長度或寬度,負邊距會使元素和相鄰元素重疊,這就是所謂的「塌陷」

應用:元素重疊

幾個問題的

1.寫乙個函式返回引數二進位制中 1 的個數 比如 15 0000 1111 4 個 1 程式原型 int count one bits unsigned int value 解 無符號整型為32位,所以利用迴圈32次,逐個判斷二進位制每一位是不是1 int count one bits unsig...

String的幾個問題

1.已知strcpy的函式原型 char strcpy char strdest,const char strsrc 其中strdest 是目的字串,strsrc 是源字串。不呼叫c c 的字串庫函式,請編寫函式 strcpy。答案 char strcpy char strdest,const ch...

幾個問題的思考

對幾個問題的思考,對自己一種警醒也是總結,鞏固和提高 1.flex是什麼?某天早上躺在床上問起了自己這個問題,自己總結了乙個答案 flex是乙個面向程式設計師,基於元件,使用mxml標籤和as指令碼語言進行開發,同時基於事件並且資料互動方式為非同步的框架。2.怎麼成為傳說中的高手或者技術牛人?所謂的...