如何理解margin值為負

2021-07-09 05:04:33 字數 597 閱讀 9987

通常來說margin為正值時,我們很清楚其布局形式,即在border邊界線處再往外擴充套件指定長短。可margin為負又表示什麼呢,表示始於border邊界線處並向內擴充套件指定長短,這樣,下乙個文件流物件便是從margin邊界線處起,顯示出來。**示例:

1

頁面效果:

此時有乙個margin邊界線我們看不到,其位置是在border邊界線向內100px處,即200-100=100px處。

我們看,此時由於兩個div標籤為塊級元素,故不涉及到右margin邊界線,兩個物件完全顯示出其定義的長度和寬度。

此時由於float:left作用,兩個塊級元素顯示到了一行內,第二個div標籤的起始處便是右margin邊界,即100px處,而非border邊界處200px處。

margin為負的理解

margin是盒模型中乙個很重要的概念,是border之外的區域,我們通常稱作外邊距,有margin top,margin right,margin bottom.moargin left四個外邊距。注意我書寫的順序是從上開始順時針的順序。對於這四個值,我們在設定的時候必然只能有4種情況 乙個值 兩...

理解並運用 CSS 的負 margin 值

本文樣式 採用 scss。瀏覽器相容性為 ie6 你的網頁中,不可能沒有使用過 margin。大多數情況下,我們採用的都是正數的 margin 值,可能有時候會用到負的 margin 值。在我們的印象中,負的 margin 值就類似於瀏覽器的 hack 一樣,不被人接受。但是,本文要說明的就是,負的...

負margin的理解(一)

之前有在看大牛的部落格,然後看到負margin,會想那個負margin值是怎麼計算出來的,還有啥時候設定負margin是有效果,現在做如下總結 html 結構 div class container div class main wrap h2 main content h2 div div cla...