css中margin值爲負的理解

原創

2020-02-21 20:36

在css中一個塊級元素所佔的空間及位置，依次有margin、padding、content決定。margin表示這個塊級元素的外邊距，通常書上是這麼說的。但是這樣並不有助於我們來理解外邊距的概念，margin我的理解是用來確定塊級元素的邊界的。
如果margin的值爲正值，那麼表示這個塊級元素的邊界向上下左右某個方向拉伸，那麼當margin的值爲負時，那麼這個塊級元素的邊界就會向內凹。
寫個demo測試下：

<html>
<head>
    <style type="text/css">
        .div1{
            width: 200px;
            height: 200px;
            background-color: blue; 
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-left: 10px;
            float: left;
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-left: -100px;
            float: left;
        }

    </style>
</head>
<body>
    <div class="div1">

    </div>
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</body>
</html>

效果如下所示：
這三個div彼此獨立，無相互嵌套。第二個div的margin-left爲10px說明這個div的邊界向左延伸10px。因此，其和第一個div有10px的空白間距。而第三個div的margin-left爲-100px。因此，第三個div的邊界向內凹100px，因此它的邊界在它的中間的位置。因此第二個紅色的塊有一半被覆蓋了，是因爲它綠色塊的邊界在它的中間部分。

對於有嵌套的元素塊，也可以類比。想象其邊界在哪裏，就會明白其爲什麼會是這樣的效果了。