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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS中margin屬性解析邏輯

本文和大家重點討論一下CSS中margin屬性的解析邏輯，margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。它是元素盒模型（boxmodel）的基礎(chǔ)屬性，可以用來設(shè)置box的margin area。

目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務器托管、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、江南網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

CSS中margin屬性由淺入深詳解

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

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

CSS屬性margin的解析邏輯

目前我們已經(jīng)了解到了margin的基本特性和基本寫法，但對元素margin的基本解析邏輯還是很模糊，到底margin的top、right、bottom、left都是以什么為基準來促使boxmodel形成。為了形象，易懂的對margin的邏輯進行說明，下面講解的過程中，將引入W3C上沒有的參考線的說法。何謂參考線？參考線就是margin移動的基準點，此基準點相對于box是靜止的。而margin的數(shù)值，就是box相對于參考線的位移量。

在margin中top、right、bottom、left的參考線并不一致為一類，而是分為了兩類參考線，top和left的參考線屬于一類，right和bottom的參考線屬于另一類。那他們到底各以什么為參考線呢？top以containingblock的content上邊或者垂直上方相連元素margin的下邊為參考線垂直向下位移；left以containingblock的content左邊或者水平左方相連元素margin的右邊為參考線水平向右位移。right以元素本身的border右邊為參考線水平向右位移；bottom以元素本身的border下邊為參考線垂直向下位移。從上我們可以看到top和left都是以外元素為參考，而right和bottom以本元素為參考。上面的位移方向是指margin數(shù)值為正值時候的情形，如果是負值則位移方向相反。

或許理論聽起來比較枯燥，我們舉例說明一下：

ExampleSourceCode

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. 無標題文檔 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. div{width:200px;height:200px;background:#ccc;}  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. 外邊距的margin-width的值類型有：auto|length|percentage
     
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.  
    16.

如上代碼，很簡單，為了方便我們看到效果，我們給div設(shè)置了寬度和高度以及背景色?，F(xiàn)在我們給div的樣式加上margin屬性，比如：

ExampleSourceCode

 
 
 
 
      
  
  
  
  1. margin:-10px20px-30px40px;  
    2.   
  
  
  
  2.  
    3.

這時候margin的解析邏輯是怎樣的呢？首先我們要搞清div的和周邊元素的關(guān)系，div沒有相連元素，而此時div的containingblock是body產(chǎn)生的blockbox。則根據(jù)上面介紹的參考線原理，div的左外邊距以containingblock的content左邊為參考線，及此時以body的content左邊為參考線進行水平向右位移，位移的大小為40px，同理，上邊距以body的content上邊為參考線進行垂直向上位移10px（負值和正值的方向相反），下邊距依照現(xiàn)在div的borer下邊（此時的div已經(jīng)經(jīng)過上邊距位移過了）垂直向上位移30px（此時，margin不會改變box的border內(nèi)的物理大小，但會改變box的邏輯大小，即：以此box的margin的下邊為參考的元素，不是從box的物理位置開始的，而是從邏輯位置開始），右邊距依照現(xiàn)在div的borer右邊（此時的div已經(jīng)經(jīng)過左邊距位移過了）水平向右位移20px?；蛟S有朋友問你分析的順序怎么和margin表達式中出現(xiàn)的順序不一樣？如果按照margin表達式中出現(xiàn)的順序來分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒有按照表達式的順序來分析。

用margin***的顯示大小到底是怎么樣的，或許有朋友也比較疑惑，我暫時用邏輯大小和物理大小來區(qū)分（其實上面已用到此概念），到底什么是邏輯大小，什么是物理大小呢？！具體可以看圖，物理大小指的是除去margin，也就是包含border以內(nèi)的box大小，而邏輯大小，則是box通過margin解析規(guī)則解析后得到的大?。ㄟ@或許可以解釋為什么IE5會錯誤解析盒模型），當邏輯大小小于物理大小時，則不會影響實際box的顯示，也就是說，此時顯示的是box的物理大小，而當邏輯大小大于物理大小時，則此時顯示邏輯大小。這僅對元素本身有效，對于其他相關(guān)元素，他們則只以margin的邏輯大小為準則，進行布局。

【編輯推薦】

  1. CSS中margin屬性的基本特性和寫法
  2. 深度剖析CSS中margin邊界疊加用法
  3. CSS中font-size屬性值四大種類
  4. 解析四大CSS屬性值選擇器用法
  5. 專家推薦 DIV CSS表單布局的五個小技巧

網(wǎng)頁標題：CSS中margin屬性解析邏輯
網(wǎng)頁網(wǎng)址：http://www.dlmjj.cn/article/djpoppo.html