溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)css中margin有什么特性的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
Margin是什么
CSS 邊距屬性定義元素周圍的空間。通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。也可以使用簡(jiǎn)寫(xiě)的外邊距屬性同時(shí)改變所有的外邊距。——W3School
邊界，元素周圍生成額外的空白區(qū)。“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見(jiàn)的區(qū)域。——CSS權(quán)威指南
我比較喜歡使用“外邊距”這個(gè)詞來(lái)解釋margin（同理padding可以稱之為“內(nèi)邊距”，但是我又恰恰喜歡稱呼padding為“補(bǔ)白”或者“留白”），我們可以很清楚的了解到margin的最基本用途就是控制元素周圍空間的間隔，從視覺(jué)角度上達(dá)到相互隔開(kāi)的目的。
Margin的特性
margin始終是透明的。margin通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。即：margin-top、margin-right、margin-bottom、margin-left。
外邊距的 margin-width 的值類型有：auto | length | percentage。也可以使用簡(jiǎn)寫(xiě)的外邊距屬性同時(shí)改變所有的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時(shí)針“上右下左”記憶。
并且規(guī)范還提供了省略的數(shù)值寫(xiě)法，基本如下：
如果margin只有一個(gè)值，表示上右下左的margin同為這個(gè)值。例如：margin:10px; 就等于 margin:10px 10px 10px 10px;
如果 margin 只有兩個(gè)值，第一個(gè)值表示上下margin值，第二個(gè)值為左右margin的值。例如：margin:10px 20px; 就等于 margin:10px 20px 10px 20px;
如果margin有三個(gè)值，第一個(gè)值表示上margin值，第二個(gè)值表示左右margin的值，第三個(gè)值表示下margin的值。例如：margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;
如果margin有四個(gè)值，那這四個(gè)值分別對(duì)應(yīng)上右下左這四個(gè)margin值。例如：margin:10px 20px 30px 40px;
在實(shí)際應(yīng)用中，個(gè)人不推薦使用三個(gè)值的margin，一是容易記錯(cuò)，二是不容易日后修改，一開(kāi)始如果寫(xiě)成margin:10px 20px 30px;日后需求改動(dòng)為上10px，右30px，下30px，左20px，你不得不還是得把這個(gè)margin拆開(kāi)為margin:10px 30px 30px 20px;費(fèi)力且不討好，不如一開(kāi)始就老老實(shí)實(shí)的寫(xiě)成margin:10px 20px 30px 20px;來(lái)的實(shí)在，不要為了現(xiàn)在節(jié)省倆個(gè)字節(jié)而讓日后再次開(kāi)發(fā)的成本上升。
垂直外邊距合并問(wèn)題
別被上面這個(gè)名詞給嚇倒了，簡(jiǎn)單地說(shuō)，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。你可以查看W3Shool CSS外邊距合并了解這個(gè)基本知識(shí)。
實(shí)際工作中，垂直外邊距合并問(wèn)題常見(jiàn)于第一個(gè)子元素的margin-top會(huì)頂開(kāi)父元素與父元素相鄰元素的間距，而且只在標(biāo)準(zhǔn)瀏覽器下(FirfFox、Chrome、Opera、Sarfi)產(chǎn)生問(wèn)題，IE下反而表現(xiàn)良好。例子可以查看下面代碼(IE下表現(xiàn)“正常”，標(biāo)準(zhǔn)瀏覽器下查看出現(xiàn)“bug”)：
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直外邊距合并</title>
<style>
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle">
<div class="firstChild">我其實(shí)只是想和我的父元素隔開(kāi)點(diǎn)距離。</div>
<div class="secondChild"></div>
</div>
</body>
</html>
如果按照CSS規(guī)范，IE的“良好表現(xiàn)”其實(shí)是一個(gè)錯(cuò)誤的表現(xiàn)，因?yàn)镮E的hasLayout渲染導(dǎo)致了這個(gè)“表現(xiàn)良好”的外觀。而其他標(biāo)準(zhǔn)瀏覽器則會(huì)表現(xiàn)出“有問(wèn)題”的外觀。好了，如果你讀過(guò)了上面W3Shcool的CSS外邊距合并的文章后，就很容易討論這個(gè)問(wèn)題了。這個(gè)問(wèn)題發(fā)生的原因是根據(jù)規(guī)范，一個(gè)盒子如果沒(méi)有上補(bǔ)白(padding-top)和上邊框(border-top)，那么這個(gè)盒子的上邊距會(huì)和其內(nèi)部文檔流中的第一個(gè)子元素的上邊距重疊。
再說(shuō)了白點(diǎn)就是：父元素的第一個(gè)子元素的上邊距margin-top如果碰不到有效的border或者padding.就會(huì)不斷一層一層的找自己“領(lǐng)導(dǎo)”(父元素，祖先元素)的麻煩。只要給領(lǐng)導(dǎo)設(shè)置個(gè)有效的 border或者padding就可以有效的管制這個(gè)目無(wú)領(lǐng)導(dǎo)的margin防止它越級(jí)，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。
對(duì)于垂直外邊距合并的解決方案上面已經(jīng)解釋了，為父元素例子中的middle元素增加一個(gè)border-top或者padding-top即可解決這個(gè)問(wèn)題。
一般說(shuō)來(lái)這個(gè)問(wèn)題解釋到這里，大多數(shù)文章就不會(huì)再深入下去了，但作為一名實(shí)戰(zhàn)開(kāi)發(fā)者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開(kāi)距離，而按照你這么一個(gè)解法，其實(shí)是一種“修復(fù)”，為了“彌補(bǔ)修復(fù)”這個(gè)父子垂直外邊距合并這個(gè)CSS規(guī)范“Bug”，而強(qiáng)制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發(fā)生這樣的情況還是會(huì)忘記這條準(zhǔn)則，而且在頁(yè)面設(shè)計(jì)稿里如果不需要border-top加個(gè)上邊框，這么一加反而畫(huà)蛇添足，為以后修改留下隱患。
用Margin還是用Padding
何時(shí)應(yīng)當(dāng)使用margin：需要在border外側(cè)添加空白時(shí)?？瞻滋幉恍枰尘埃ㄉr(shí)。上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px + 20px的margin，將得到20px的空白。
何時(shí)應(yīng)當(dāng)時(shí)用padding：需要在border內(nèi)測(cè)添加空白時(shí)?？瞻滋幮枰尘埃ㄉr(shí)。上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px + 20px的padding，將得到35px的空白。
個(gè)人認(rèn)為：margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。
margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別
HTML（這里說(shuō)的是html標(biāo)準(zhǔn)，而不是xhtml）里分兩種基本元素，即block和inline。顧名思義，block元素就是以”塊”表現(xiàn)的元素（block-like elements），inline元素即是以”行”表現(xiàn)的元素（character level elements and text strings）。二者表現(xiàn)的主要差別在于，在頁(yè)面文檔中block元素另起一行開(kāi)始，并獨(dú)占一行。inline元素則同其他inline元素共處一行。
block元素（塊元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨著html5標(biāo)準(zhǔn)的推進(jìn)，一些元素將被廢除，而一些新的元素將被引入)注意的是并非所有的block元素的默認(rèn)display屬性都是block，像table這種display:table的元素也是block元素。
inline元素（內(nèi)聯(lián)元素）大致有：#PCDATA（即文本）| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
其中有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱為可置換元素（Replaced element）。他們區(qū)別一般inline元素（相對(duì)而言，稱non-replaced element）是：這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性。他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。
或許有朋友對(duì)非置換元素（non-replaced element）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C 中沒(méi)有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replaced element），也就是說(shuō)我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
從定義中我們可以理解到，置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認(rèn)就有 CSS 格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。
margin在塊級(jí)元素下，他的性能可以完全體現(xiàn)，上下左右任你設(shè)定。且記住塊級(jí)元素的margin的參照基準(zhǔn)是前一個(gè)元素即相對(duì)于自身之前的元素有margin距離。如果元素是第一個(gè)元素，則就是相對(duì)于父元素的margin距離（但第一個(gè)元素相對(duì)于父元素margin-top而父元素又沒(méi)有設(shè)定padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識(shí)）
margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的，但是margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒(méi)有影響，并且由于邊界效果(margin效果)是透明的，他也沒(méi)有任何的視覺(jué)影響。
這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變?cè)氐男懈叨?，如果你要改變?nèi)聯(lián)元素的行高即類似文本的行間距，那么你只能使用這三個(gè)屬性：line-height，fong-size，vertical-align。請(qǐng)記住，這個(gè)影響內(nèi)聯(lián)元素高度的是line-height而不是height，因?yàn)閮?nèi)聯(lián)元素是一行行的，定一個(gè)height的話，那這到底是整段inline元素的高呢？還是inline元素一行的高呢？這都說(shuō)不準(zhǔn)，所以統(tǒng)一都給每行定一個(gè)高，只能是line-height了。
margin-top/margin-bottom對(duì)內(nèi)聯(lián)元素沒(méi)有多大實(shí)際效果，不過(guò)margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的。應(yīng)用margin:10px 20px 30px 40px;，左邊這個(gè)css如果寫(xiě)在inline元素上，他的效果大致是，上下無(wú)效果，左邊離他相鄰元素或者文本距離為40px，右邊離他相鄰元素或者文本距離為20px。你可以自行嘗試一番。
最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素（non-replaced element），這些個(gè)元素img|input|select|textarea|button|label雖然是內(nèi)聯(lián)元素，但margin依舊可以影響到他的上下左右！
總結(jié)下來(lái)margin 屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。
負(fù)margin技術(shù)及其應(yīng)用
在margin所有的實(shí)際應(yīng)用中，負(fù)margin技術(shù)是我學(xué)習(xí)css路上最重要一課之一，許多高級(jí)應(yīng)用和頁(yè)面上的疑難雜癥都可以用負(fù)margin技術(shù)來(lái)實(shí)現(xiàn)。margin技術(shù)是那么的有用，限于篇幅我又不想草草了事，所以我決定專門為他寫(xiě)一篇文章，詳細(xì)的說(shuō)明他的效果、原理、及其應(yīng)用。在此之前你可以先閱讀懌飛寫(xiě)的由淺入深漫談margin屬性這篇文章，大致了解“margin參考線”的概念，之后再來(lái)查看負(fù)margin技術(shù)及其應(yīng)用這篇文章。
常見(jiàn)的瀏覽器下margin出現(xiàn)的bug
林林總總寫(xiě)了那么多，最后總結(jié)一些瀏覽器中常見(jiàn)的margin Bug吧，以后遇到margin下的布局問(wèn)題可以查看這里找到解決的方案，如果你還發(fā)現(xiàn)其他關(guān)于瀏覽器下margin的Bug你可以發(fā)表留言，核對(duì)采納后我會(huì)及時(shí)添加進(jìn)去，感謝你的分享。
IE6中雙邊距Bug：
發(fā)生場(chǎng)合：當(dāng)給父元素內(nèi)第一個(gè)浮動(dòng)元素設(shè)置margin-left（元素float:left）或margin-right（元素float:right）時(shí)margin加倍。
解決方法：是給浮動(dòng)元素加上display:inline;CSS屬性；或者用padding-left代替margin-left。
原理分析：塊級(jí)對(duì)象默認(rèn)的display屬性值是block，當(dāng)設(shè)置了浮動(dòng)的同時(shí)，還設(shè)置了它的外邊距就會(huì)出現(xiàn)這種情況。也許你會(huì)問(wèn)：“為什么之后的對(duì)象和第一個(gè)對(duì)象之間就不存在雙倍邊距的Bug”？因?yàn)楦?dòng)都有其相對(duì)應(yīng)的對(duì)象，只有相對(duì)于其父對(duì)象的浮動(dòng)對(duì)象才會(huì)出現(xiàn)這樣的問(wèn)題。第一個(gè)對(duì)象是相對(duì)父對(duì)象的，而之后對(duì)象是相對(duì)第一個(gè)對(duì)象的，所以之后對(duì)象在設(shè)置后不會(huì)出現(xiàn)問(wèn)題。為什么display:inline可以解決這個(gè)雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問(wèn)題的。然后，float:left等浮動(dòng)屬性可以讓inline元素haslayout，會(huì)讓inline元素表現(xiàn)得跟inline-block元素的特性一樣，支持高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個(gè)display inline的元素上。
IE6中浮動(dòng)元素3px間隔Bug：
發(fā)生場(chǎng)合：發(fā)生在一個(gè)元素浮動(dòng)，然后一個(gè)不浮動(dòng)的元素自然上浮與之靠近會(huì)出現(xiàn)的3px的bug。
解決方法：右邊元素也一起浮動(dòng)；或者為右邊元素添加IE6 Hack _margin-left:-3px;從而消除3px間距。
原理分析：IE6瀏覽器缺陷Bug。
IE6/7負(fù)margin隱藏Bug：
發(fā)生場(chǎng)合：當(dāng)給一個(gè)有hasLayout的父元素內(nèi)的非hasLayout元素設(shè)置負(fù)margin時(shí)，超出父元素部分不可見(jiàn)。
解決方法：去掉父元素的hasLayout；或者賦hasLayout給子元素,并添加position:relative;
原理分析：IE6/7獨(dú)有的hasLayout產(chǎn)生問(wèn)題。
IE6/7下ul/ol標(biāo)記消失bug：
發(fā)生場(chǎng)合：當(dāng)ul/ol觸發(fā)了haslayout并且是在ul/ol上寫(xiě)margin-left，前面默認(rèn)的ul/ol標(biāo)記會(huì)消失。
解決方法：給li設(shè)置margin-left，而不是給ul/ol設(shè)置margin-left。
原理分析：IE6/7瀏覽器Bug
IE6/7下margin與absolute元素重疊bug：
發(fā)生場(chǎng)合：雙欄自適應(yīng)布局中，左側(cè)元素absolute絕對(duì)定位，右側(cè)的margin撐開(kāi)距離定位。在IE6/7下左側(cè)應(yīng)用了absolute屬性的塊級(jí)元素與右邊的自適應(yīng)的文字內(nèi)容重疊。
解決方法：把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素，比如把div更換為span。
原理分析：這是由于IE6/IE7瀏覽器將inline水平標(biāo)簽元素和block水平的標(biāo)簽元素沒(méi)有加以區(qū)分一視同仁渲染了。屬于IE6/7瀏覽器渲染Bug。
IE6/7/8下auto margin居中bug：
發(fā)生場(chǎng)合：給block元素設(shè)置margin auto無(wú)法居中
解決方法：出現(xiàn)這種bug的原因通常是沒(méi)有Doctype，然后觸發(fā)了ie的quirks mode，加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個(gè)width能夠解決，但根據(jù)本人親測(cè)，加with此種方法是無(wú)效的，如果沒(méi)有Doctype即使給元素添加width也無(wú)法讓block元素居中。
原理分析：缺少Doctype聲明。
IE8下input[button | submit] 設(shè)置margin:auto無(wú)法居中
發(fā)生場(chǎng)合：ie8下，如果給像button這樣的標(biāo)簽（如button input[type="button"] input[type="submit"]）設(shè)置{ display: block; margin:0 auto; }如果不設(shè)置寬度的話無(wú)法居中。
解決方法：可以給為input加上寬度
原理分析：IE8瀏覽器Bug。
IE8百分比padding垂直margin bug：
發(fā)生場(chǎng)合：當(dāng)父元素設(shè)置了百分比的padding，子元素有垂直的margin的時(shí)候，就好像父元素被設(shè)置了margin一樣。
解決方法：給父元素加一個(gè)overflow:hidden/auto。
原理分析：IE8瀏覽器Bug。
感謝各位的閱讀！關(guān)于“css中margin有什么特性”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
