從2023年10月接觸前端，到現在大概1年多了吧，挺長的時間了，本以為自己的布局沒有問題，畢竟還是有專案經驗的，但是今天卻發現自己不是很懂margin，這個前端最常見的屬性之一，因此寫下這篇作為知識梳理。
借鑑：
css邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設定。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。——w3school
邊界，元素周圍生成額外的空白區。「空白區」通常是指其他元素不能出現且父元素背景可見的區域。——css權威指南我的理解是「外邊距」即該元素距離臨近其他元素的空白空間。
margin：top right bottom left；
margin: top right bottom ; // left值與right一樣
margin: top right; // bottom值與top一樣，left值與right值一樣
margin :top; // bottom，left，right與top值一樣
塊級元素的垂直相鄰外邊距會合併，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合併。同樣地，浮動元素的外邊距也不會合併。允許指定負的外邊距值，不過使用時要小心。
到底 margin 的 top、right、bottom、left 都是以什麼為基準來促使 box model 形成。為了形象，易懂的對 margin 的邏輯進行說明，下面講解的過程中，將引入 w3c 上沒有的參考線的說法。何謂參考線？參考線就是 margin 移動的基準點，此基準點相對於 box 是靜止的。而 margin 的數值，就是 box 相對於參考線的位移量。
在 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 數值為正值時候的情形，如果是負值則位移方向相反。
結論：box 最後的顯示大小等於 box 的 border 及 border 內的大小加上正的 margin 值。而負的 margin 值不會影響 box 的實際大小，如果是負的 top 或 left 值會引起 box 的向上或向左位置移動，如果是 bottom 或 right 只會影響下面 box 的顯示的參考線。
—摘自 前端阿里大神懌飛
特殊性 權值
有的時候我們為同乙個元素設定了不同的css樣式 那麼元素會啟用哪乙個css樣式呢?我們來看一下面的 p first p class first 三年級時，我還是乙個 span 膽小如鼠 span 的小女孩。p p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼...
權值計算 特殊性
有的時候我們為同乙個元素設定了不同的css樣式 那麼元素會啟用哪乙個css樣式呢？下面我們一起來看一下 p first class first 三年級時，我還是乙個 膽小如鼠span 的小女孩。p p和.first都匹配到了p這個標籤上，那麼會顯示哪種顏色呢？green是正確的顏色，那麼為什麼呢？是...
Flash的特殊性
flash並不是我們想的那是是random accessed.對其進行寫入資料和讀取資料都是得按照一定的規則。比較明顯的一點就是必須先erase再program。否則會產生exception。一般情況下，也就是意味著只有原來的資料是0x.ffff.時才能對其進行程式設計。經過實測，成功。按照一定的規...