日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
margin屬性的基本寫(xiě)法和特征

你對(duì)margin屬性的概念是否了解，這里和大家分享一下，margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。他是元素盒模型（boxmodel）的基礎(chǔ)屬性。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了麻城免費(fèi)建站歡迎大家使用！

由淺入深學(xué)習(xí)margin屬性

margin在中文中我們翻譯成外邊距或者外補(bǔ)白（本文中引用外邊距）。他是元素盒模型（boxmodel）的基礎(chǔ)屬性。

一、margin的基本特性

margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用來(lái)設(shè)置box的marginarea。屬性margin可以用來(lái)同時(shí)設(shè)置box的四邊外邊距，而其他的margin屬性只能設(shè)置其自各的外邊距。

margin屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類(lèi)型（不包括table-caption,tableandinline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replacedinlineelement）不起作用。

或許有朋友對(duì)非置換元素（non-replacedelement）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C中沒(méi)有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replacedelement），也就是說(shuō)我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：

◆引用:

“AnelementthatisoutsidethescopeoftheCSSformatter,suchasanimage,embeddeddocument,orapplet”
從定義中我們可以理解到，置換元素（replacedelement）主要是指img，input，textarea，select，object等這類(lèi)默認(rèn)就有CSS格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replacedelement）就是除了img，input，textarea，select，object等置換元素以外的元素。

margin始終是透明的。#p#

二、margin的基本寫(xiě)法

外邊距的margin-width的值類(lèi)型有：auto|length|percentage

percentage：百分比是由被應(yīng)用box的containingblock（注：一個(gè)元素的containingblock是該元素產(chǎn)生的box(es)在計(jì)算位置和大小時(shí)參考的一個(gè)矩形，詳細(xì)閱讀可看：《ContainingBlock》）的大小所決定。對(duì)于margin-top和margin-bottom也同樣成立。

margin的默認(rèn)值為0，并且margin支持負(fù)值。

上面我們?cè)岬綄傩詍argin可以用來(lái)同時(shí)指定box的四邊外邊距。如果屬性margin有四個(gè)值，那么值將按照上-右-下-左的順序作用于四邊，即從元素的上邊開(kāi)始，按照順時(shí)針的順序圍繞元素。表達(dá)式如下：

 
 
 
    
  
  
  
  1. margin：toprightbottomleft；  
    2. 
  
  
  
  2.  
    3.

四個(gè)數(shù)值中間以空格分隔。效果等同于：

 
 
 
    
  
  
  
  1. margin-top:value;  
    2. 
  
  
  
  2. margin-right:value;  
    3. 
  
  
  
  3. margin-bottom:value;  
    4. 
  
  
  
  4. margin-left:value;  
    5. 
  
  
  
  5.  
    6.

并且規(guī)范還提供了省略的數(shù)值寫(xiě)法，基本原則如下：

◆引用:

1.如果沒(méi)有l(wèi)eft值，則使用right代替；

2.如果沒(méi)有bottom值，則使用top代替；

3.如果沒(méi)有right值，則使用top值代替。

根據(jù)這些基本原則，我們可以有三種省略方式，但不管怎樣省略margin的數(shù)值都會(huì)大于等于一個(gè)，而margin的默認(rèn)數(shù)值是從top開(kāi)始至left結(jié)束，那么對(duì)于省略的具體情況，我們可以從left反推理回去。

1.如果margin只有三個(gè)值，按照值的順序?yàn)閙argin：toprightbottom;缺少了left，根據(jù)原則，則left的值有right來(lái)代替。

margin:10px20px30px;就等于margin:10px20px30px20px;

2.如果margin只有兩個(gè)值，按照值的順序?yàn)閙argin：topright;缺少了bottom和left，根據(jù)原則left的值由right來(lái)代替，bottm的值由top來(lái)代替。

margin:10px20px;就等于margin:10px20px10px20px;

3.如果margin只有一個(gè)值，按照值的順序?yàn)閙argin:top;缺少了bottom、left和right，根據(jù)原則left的值由right來(lái)代替，bottom的值由top來(lái)代替，right的值右top來(lái)代替，也就是說(shuō)left的值也由top來(lái)代替。

margin:10px;就等于margin:10px10px10px10px;


本文名稱(chēng)：margin屬性的基本寫(xiě)法和特征
文章分享：http://www.dlmjj.cn/article/dghhgcc.html