2007-3-18 上午 -html/css/xml/xsl
- css
- margin
margin 在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎屬性。
一、margin的基本特性
margin 屬性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用來設定 box 的 margin area。屬性 margin 可以用來同時設定 box 的四邊外邊距，而其他的 margin 屬性只能設定其自各的外邊距。
margin 屬性可以應用於幾乎所有的元素，除了**顯示型別（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對非置換內聯元素（non-replaced inline element）不起作用。
或許有朋友對非置換元素（non-replaced element）有點疑惑，稍微幫助大家理解一下。非置換元素，w3c 中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對應著置換元素（replaced element），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，w3c
中給出了定義：
從定義中我們可以理解到，置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類預設就有 css 格式化外表範圍的元素。進而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。
margin 始終是透明的。
二、margin 的基本寫法
外邊距的 margin-width 的值型別有：auto | length | percentage
percentage：百分比是由被應用 box 的containing block
（注：乙個元素的 containing block 是該元素產生的 box(es)在計算位置和大小時參考的乙個矩形）的大小所決定。對於 margin-top 和 margin-bottom 也同樣成立。
margin 的預設值為 0，並且 margin 支援負值。
上面我們曾提到屬性 margin 可以用來同時指定 box 的四邊外邊距。如果屬性 margin 有四個值，那麼值將按照上-右-下-左的順序作用於四邊，即從元素的上邊開始，按照順時針的順序圍繞元素。表示式如下：
margin
：top right bottom left
；
margin
-top
:value
;margin
-right
:value
;margin
-bottom
:value
;margin
-left
:value
;
如果沒有 left 值，則使用 right 代替；
如果沒有 bottom 值，則使用 top 代替；
如果沒有 right 值，則使用 top 值代替。
根據這些基本原則，我們可以有三種省略方式，但不管怎樣省略 margin 的數值都會大於等於乙個，而 margin 的預設數值是從 top 開始至 left 結束，那麼對於省略的具體情況，我們可以從 left 反推理回去。
1、如果 margin 只有三個值，按照值的順序為 margin：top right bottom; 缺少了 left，根據原則，則 left 的值有 right 來代替。margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;
2、如果 margin 只有兩個值，按照值的順序為 margin：top right; 缺少了 bottom 和 left，根據原則 left 的值由 right 來代替，bottm 的值由 top 來代替。margin:10px 20px; 就等於 margin:10px 20px 10px 20px;
3、如果 margin 只有乙個值，按照值的順序為 margin:top; 缺少了 bottom、left 和 right，根據原則 left 的值由 right 來代替，bottom 的值由 top 來代替，right 的值右 top 來代替，也就是說 left 的值也由 top 來代替。margin:10px; 就等於 margin:10px 10px 10px 10px;
三、margin的解析邏輯
目前我們已經了解到了 margin 的基本特性和基本寫法，但對元素 margin 的基本解析邏輯還是很模糊，到底 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 數值為正值時候的情形，如果是負值則位移方向相反。
或許理論聽起來比較枯燥，我們舉例說明一下：
xmlns如上**，很簡單，為了方便我們看到效果，我們給 div 設定了寬度和高度以及背景色。="">
外邊距的margin-width的值型別有：auto | length | percentage
現在我們給 div 的樣式加上 margin 屬性，比如：
margin
:-10px
20px
-30px
40px
;
用 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 的顯示的參考線。
bash的基本特性
1 命令歷史 作用 檢視之前使用的命令 關於命令歷史的檔案 每個使用者家目錄下面的.bash history 在關機的時候，會自動寫入一次 history r 將記憶體中的命令歷史寫入檔案 關於命令歷史的變數 環境變數 env 檢視環境變數 set 檢視詳細的環境變數引數 hisize 1000 數...
margin塌陷 margin合併的解決
父子巢狀元素垂直方向的 margin，父子元素是結合在一起的，他們兩個會取其中最大的值 正常情況應該是父級相對於瀏覽器進行定位，子級應該相對於父級定位的 但是 margin 塌陷是在父級相對於瀏覽器進行定位時，子級沒有相對於父級定位，就像父級的棚子沒有了一樣子級相對於父級，就像塌陷了一樣 a.給父元...
引用 基本特性
宣告乙個識別符號為引用，即表示該識別符號可作為另乙個有名或無名物件的別名 int a 10 int b a int c b c cout a endl 11 intconst d c d error 在c 中，無名物件通常都被處理為右值，只能通過帶有常屬性的引用引用之 int const a 10 ...