margin尺寸百分比時的參考物件是誰

antzone發表於2017-03-11
物件

設定外邊距可以使用明確的數值，如下:

[CSS] 純文字檢視 複製程式碼
margin:5px 10px;

也可以採用百分比的方式，如下:

[CSS] 純文字檢視 複製程式碼
margin:5% 10%;

既然是百分比的方式，當然必須要有一個參考尺寸，下面就介紹一下這個參考尺寸屬於哪個物件。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#demo{ 
  margin:0 auto; 
  width:1000px; 
  height:500px; 
  background:#eee; 
  overflow:hidden; 
} 
#demo p{ 
  margin:20% 10%; 
  background:#ccc; 
} 
</style>
</span>
</head>
<body>
<div id="demo"> 
  <p>螞蟻部落</p> 
</div> 
</body>
</html>

上面你的程式碼設定子元素的外邊距，這個時候如果問子元素的上右下左外邊距分別是多少，可能很多人會不假思索得出如下結論:

上下外邊距為:100px，左右外邊距為:100px

計算方式就是上下外邊距百分比乘以高度，左右外邊距百分比乘以寬度。

但是事實並非如此，下面介紹一下其中的原因:在預設狀態下，所有方位的百分比外邊距都是以父元素的寬度為參考物件的，這好像聽起來有點難以理解，其實這也是講的通的，比如文字在頁面排版中都是首先橫向排版，如果遇到邊界，沒有特殊設定就會換行，那麼高度就會得到無線的延展，百分比要採用一個寬度固定的作為參考物件，但是當設定文字是豎向排版的話，那麼情況就正好和預設狀態相反了，這個時候百分比外邊距就會以高度作為參考了。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#demo{ 
  margin:0 auto; 
  width:1000px; 
  height:500px; 
  background:#eee; 
  overflow:hidden; 
  /*谷歌瀏覽器*/
  -webkit-writing-mode:vertical-rl; 
  /*IE瀏覽器*/
  writing-mode: tb-rl; 
} 
#demo p{ 
  margin:20% 10%; 
  background:#ccc; 
} 
</style>
</span>
</head>
<body>
<div id="demo"> 
  <p>螞蟻部落</p> 
</div> 
</body>
</html>

上面的程式碼就是以高度作為作為參考的。

相關文章