margin負值

時間 2019-11-17

標籤 margin 負值欄目 CSS 简体版

原文原文鏈接

你們都知道，css中margin和padding是一對好兄弟，一個是外邊距，一個是內邊距，形象的說就是一個是撐大本身，一個是往外擠，就比如一我的，padding就是吃東西使本身體型變大，margin就是本身穿了不少衣服增大了本身與別人之間的距離。下面是一個你們常常能看到的圖css

咱們知道，margin一共有4個方向上的取值，分別爲top right bottom left。咱們平時見到的margin都爲正值，表現形式爲4個方向上的外邊距擴散。可是，其實margin還能夠取負值bash

咱們先來看一個小demospa

<style>
        .box {
            border: 1px solid red;
            margin-top: 150px;
        }
        .box div {
            height: 50px;
            width: 100px;
            display: inline-block;
            border: 1px solid #000;
        }
        .box1 {
            background-color: deeppink;
        }

        .box2 {
            background-color: #ffac00;
        }

        .box3 {
            background-color: #ac589a;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
</body>
複製代碼

效果圖以下：3d

下面讓咱們對比一下下面幾組效果圖：

margin-top:30px;

margin-top:-30px;

margin-bottom:30px;

margin-bottom:-30px;

margin-left:30px;

margin-left:-30px;

margin-right:30px;

margin-right:-30px;

在看了不一樣取值狀況下不一樣的表現後，可能更加混亂了，心想：這和我想象的有點不同啊！其實你看的足夠仔細的話應該能夠發現：code

1.它們都產生了層級關係(上下能夠經過改爲塊級元素看出)cdn

2.top和left是同一種表現，right和bottom是同一種表現。前者就是按照本身相反的方向位移相同的距離，然後者則像是把本身同方向上的兄弟元素往本身身邊拉相同的距離。產生這種差別的緣由主要是，top和left的位移是參考外元素來移動本身，而right和bottom是把本身做爲了參考物來影響它周圍的元素。blog

若是再說的淺顯一點能夠分爲兩種理解方式文檔

1.參考線理解。引用網上的一句話「在margin屬性中一共有兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另外一類。top和left是之外元素爲參考，right和bottom是以元素自己爲參考。」咱們能夠想象父元素.box的border就是那條參考線，當取值爲正負的時候，第一個元素的top和left就正反方向位移相應的距離，一樣第二個元素是以他前面那個元素的border做爲參考線。而取值爲bottom和right的時候，元素本身自己成爲了參考物來影響它周圍的元素，正值道理相同，在負值的時候，能夠想象它本身內凹了一段距離，一樣帶動參考線內凹了，因此其後面的元素也就跟着這條參考線跑了過去，看起來就像是被吸了回去。這樣的說法並不嚴謹，由於W3C並無參考線的說法，可是我以爲有助於理解。string

2.盒子模型理解。瞭解過盒子模型的同窗都知道，在標準盒模型下，元素的width = border-left+border-right+padding-left+padding-right+contentWidth+margin-left+margin-right。高度同理。因此咱們能夠這樣理解，由於文檔流只能向左或向上流動，不能向下或向右流動。因此當取值爲right和bottom的時候，由於外邊距取了負數，因此只能經過減小自身內容區的高度或者寬度來知足盒子模型的等式，因此後面的元素由於‘流’的特色就佔據了它原來的位置，可是元素的高度並非真的減小了，只是供給css可讀的高度減小了。而取值爲left和top時，道理相同，由於本身的那部分高度或者寬度減小了，天然而然的就流向了前面或者上面。另外還有一點，當元素被包裹在一個父容器中，若是沒有設置寬度。使用left或者right爲負數，它的寬度就會增長，這一點也能夠經過盒模型來理解。由於要知足等式，只能增長自身寬度。 it

值得一提的是，margin的好兄弟padding是沒有負值的哦！（果真不是一個媽生的）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。