margin 百分比 參考物件

admin發表於2020-03-31
物件

margin 外邊距基本用法可以參閱CSS margin 外邊距一章節。

可以用百分比作為 margin 屬性值，既然是百分比，必須要有一個尺寸參考。

看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style> 
.box { 
  width: 200px; 
  height: 100px; 
  border: 2px dotted #ccc;
  overflow: hidden; 
} 
.ant{ 
  width: 150px; 
  height: 50px; 
  border: 2px dotted green;
  margin: 20% 20%; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div>  
</div> 
</body> 
</html>

上述程式碼通過百分比方式設定 ant 元素的外邊距。

簡單列舉一下幾種錯誤的計算方式：

（1）.上下外邊距以父元素 height 為參考，左右外邊距以父元素 width 為參考。

（2）.上下外邊距以自身 height 為參考，左右外邊距以自身 width 為參考。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/31/093841hmeei4444e6nn2d2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

結論是，如果以百分比為屬性值，參考尺寸是塊級父元素的寬度值，各個方位都是如此。

相關文章