margin負值解釋

時間 2019-11-17

標籤 margin 負值解釋欄目 CSS 简体版

原文原文鏈接

margin的解析邏輯css

目前咱們已經瞭解到了margin的基本特性和基本寫法，但對元素margin的基本解析邏輯仍是很模糊，到底margin的top、right、bottom、left都是以什麼爲基準來促使box model造成。爲了形象，易懂的對margin的邏輯進行說明，下面講解的過程當中，將引入W3C上沒有的參考線的說法。何謂參考線？參考線就是margin移動的基準點，此基準點相對於box是靜止的。而margin的數值，就是box相對於參考線的位移量。html

在margin中top、right、bottom、left的參考線並不一致爲一類，而是分爲了兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另外一類。那他們到底各以什麼爲參考線呢？top以containing block的content上邊或者垂直上方相連元素margin的下邊爲參考線垂直向下位移；left以containing block的content左邊或者水平左方相連元素margin的右邊爲參考線水平向右位移。right以元素自己的border右邊爲參考線水平向右位移；bottom以元素自己的border下邊爲參考線垂直向下位移。從上咱們能夠看到top和left都是之外元素爲參考，而right和bottom以本元素爲參考。上面的位移方向是指margin數值爲正值時候的情形，若是是負值則位移方向相反。佈局

或許理論聽起來比較枯燥，咱們舉例說明一下：ui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
div {width:200px; height:200px; background:#ccc;}
</style>
</head>spa

<body>
<div>外邊距的margin-width的值類型有：auto | length | percentage</div>
</body>
</html>code

如上代碼，很簡單，爲了方便咱們看到效果，咱們給div設置了寬度和高度以及背景色。xml

如今咱們給div的樣式加上margin屬性，好比：htm

margin:-10px 20px -30px 40px;blog

這時候margin的解析邏輯是怎樣的呢？首先咱們要搞清div的和周邊元素的關係，div沒有相連元素，而此時div的containing block是body產生的block box。則根據上面介紹的參考線原理，div的左外邊距以containing block的content左邊爲參考線，及此時以body的content左邊爲參考線進行水平向右位移，位移的大小爲40px，同理，上邊距以body的content上邊爲參考線進行垂直向上位移10px（負值和正值的方向相反），下邊距依照如今div的borer下邊（此時的div已經通過上邊距位移過了）垂直向上位移30px（此時，margin不會改變box的border內的物理大小，但會改變box的邏輯大小，即：以此box的margin的下邊爲參考的元素，不是從box的物理位置開始的，而是從邏輯位置開始），右邊距依照如今div的borer右邊（此時的div已經通過左邊距位移過了）水平向右位移20px。或許有朋友問你分析的順序怎麼和margin表達式中出現的順序不同？若是按照margin表達式中出現的順序來分析，結果是同樣的，只是爲了更好的方便你們的理解而沒有按照表達式的順序來分析。utf-8

用margin最後的實際顯示大小的究竟是怎麼樣呢，或許有朋友也比較疑惑，我暫時用邏輯大小和物理大小來區分（其實上面已用到此概念），到底什麼是邏輯大小，什麼是物理大小呢？！具體能夠看圖，物理大小指的是除去margin，也就是包含border之內的box大小，而邏輯大小，則是box經過margin解析規則解析後獲得的大小（這或許能夠解釋爲何IE5會錯誤解析盒模型）。在上圖中，box的實際顯示的寬度等於box的邏輯大小，而box實際顯示的高度等於box的物理大小，這說明box實際顯示的大小多是box的邏輯大小，也多是box的物理大小，規則究竟是怎樣的——

box的實際大小=box的物理大小+正的margin

這僅對元素自己有效，對於其後面的相關元素，他們則只以margin的邏輯大小爲準則，進行佈局。

有朋友反應，聽得很迷糊，越看越不懂，若是你對具體的理解過程不感興趣的話，那記住下面我總結的結論就能夠了，XD

結論：box最後的顯示大小等於box的border及border內的大小加上正的margin值。而負的margin值不會影響box的實際大小，若是是負的top或left值會引發box的向上或向左位置移動，若是是bottom或right只會影響下面box的顯示的參考線。

我的理解：top、left都是排在前面的塊，若是設置爲負值會覆蓋，當塊都設置爲float同一屬性時，例以下圖，下圖四個塊，float都爲left，兩個green部分width：100%，red塊原本位於closed位置，若是要實現出如今如今的位置能夠設置margin-left:-100%(若是紅色部分沒有float屬性，就會出如今屏幕以外)，對於float流排布，咱們能夠當全部的塊都在一個直線上，因爲屏幕寬度的限制不得不折行顯示，因此設置負值red塊會到上一行，在設置爲red的寬度的負值時會出如今如今位置的最右邊。

相關標籤/搜索

每日一句

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