来自web标准margin的嘲笑，你了解我吗？
???? 無意中在藍(lán)色理想中看到一篇《不要告訴我你懂margin》，有感，寫出來的。對于作者致敬，請大家?guī)兔χ刚?/p>
???? 你真的了解margin嗎？你知道m(xù)argin有什么特性嗎？你知道什么是垂直外邊距合并？margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別？什么時候該用 padding而不是margin？你知道負(fù)margin嗎？你知道負(fù)margin在實際工作中的用途嗎？常見的瀏覽器下margin出現(xiàn)的bug有哪些？……（引用作者原話）
???? 我們寫css免不了的要與margin這個屬性打交道，而且有的時候還要借助margin來修復(fù)因IE的bug，margin是外邊距，我們都知道的。我給它的定義是：他具體的作用是對父元素的邊框內(nèi)出現(xiàn)距離本身的距離定義。css權(quán)威指南是這樣說的：邊界，元素周圍生成額外的空白區(qū)。“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。w3cschool則是：CSS 邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上、右、下、左的外邊距進(jìn)行設(shè)置。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。
???? 大家已經(jīng)明白了我對它的稱呼——外邊距，接下來以外邊距來稱呼。
????margin的特性（盜用作者標(biāo)題）
??? margin，是透明的，在它設(shè)置的值的范圍內(nèi)，父元素的背景色或背景圖片均不受影響，能夠完整的呈現(xiàn)給用戶看到。margin屬性通過單獨的屬性對其上、右、下、左依次進(jìn)行賦值，我們常見的有margin:10px; OR margin:10px 20px; OR margin:10px 20px 10px 20px;但是你知道：margin:10px 15px 3px;什么意思嗎？你以為它的表達(dá)意思是：margin:10px 15px 3px 0px;嗎？？那我來告訴你，錯誤：它的表達(dá)意思是margin:10px 15px 3px 15x;呵呵！great。這個才是正確的。在實際應(yīng)用中，或者閱讀別人代碼的時候不要理解錯誤或者，沒有看到過這個，就隨便猜測作者的想法。
??? margin垂直外邊距不兼容標(biāo)準(zhǔn)？
????實際工作中，垂直外邊距合并問題常見于第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問題，IE下反而表現(xiàn)良好。例子可以查看下面代碼(IE下表現(xiàn)“正?！?#xff0c;標(biāo)準(zhǔn)瀏覽器下查看出現(xiàn)“bug”)有代碼有真相：
?1?<html?xmlns="http://www.w3.org/1999/xhtml">?2?<head>
?3?<title>垂直外邊距合并</title>
?4?<style>
?5?.top{width:160px;?height:50px;?background:#ccf;}
?6?.middle{width:160px;?background:#cfc;}
?7?.middle?.firstChild{margin-top:20px;}
?8?</style>
?9?</head>
10??
11?<body>
12?<div?class="top"></div>
13?<div?class="middle">
14???<div?class="firstChild">我其實只是想和我的父元素隔開點距離。</div>
15???<div?class="secondChild"></div>
16?</div>
17?</body>
18?</html>
???? 你來運行一下是不是感覺，這個在IE中顯示正常？而在其他對css2高度兼容的firefox下顯示異常？？我來告訴你，這是因為IEIE的hasLayout渲染導(dǎo)致了這個“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會表現(xiàn)出“有問題”的外觀。如果按照css規(guī)范來說，IE的表現(xiàn)是錯誤的，而FirfFox、Chrome、Opera、Sarfi等主流瀏覽器則解析的符合css規(guī)范。
??? 舉個例子來說：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個有效的 border或者padding就可以有效的管制這個目無領(lǐng)導(dǎo)的margin防止它越級，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行（雖然它的值比“真龍”的值大）。
???? 用Margin還是用Padding
???? 對于這個問題，很多人問過我，他們說，padding和margin為什么要分開用，它們的區(qū)別也不大，達(dá)到的效果也不差，為什么它們是兩種定義？很多人會容易弄混淆，特別是新手，一般都是新手問我這個問題。
???? 下面我們來說下，為什么要區(qū)別來用，padding和margin：
???? 當(dāng)我們想要在子元素使用背景，而父元素不適應(yīng)背景，達(dá)到圖片“頂住”，文字“不頂住”間隔一段距離的時候要用padding；
???? 當(dāng)我們讓子元素邊框要頂住父元素，而覆蓋父元素背景圖片或背景色的時候使用padding；
???? 當(dāng)我們希望讓子元素和父元素有點距離，但不影響父元素背景圖片展示的時候用margin；
???? 當(dāng)子元素有邊框而父元素?zé)o邊框的時候，它們需要產(chǎn)生距離的時候用margin；
???? margin在內(nèi)聯(lián)元素中的表現(xiàn)也是同理。以上為我對margin屬性的理解，還有一個margin的bug我就不在這里闡述了，因為網(wǎng)上已經(jīng)有很多有識之士，把margin的bug詳細(xì)的列了出來。在這里，向大家祝福，端午節(jié)快樂！
????? ? （喜歡學(xué)習(xí)的和想與我探討各種web知識的留下你的郵箱或聯(lián)系方式，或者跟我發(fā)郵件747850255@qq.com轉(zhuǎn)載請自覺附上轉(zhuǎn)載地址，來自博客園“明年開奧迪”)
轉(zhuǎn)載于:https://www.cnblogs.com/jiawl/archive/2011/06/05/2073143.html
總結(jié)
以上是生活随笔為你收集整理的来自web标准margin的嘲笑，你了解我吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 收藏老外的jquery web 按钮插件
- 下一篇： mes如果本地没有权限