css盒模型以及如何計算盒子的寬度
盒模型
每個存在於可訪問性樹中的元素都會被瀏覽器繪製成一個盒子[1]。
每個盒子都可以看成由4部分組成，它們分別是 — 元素外邊距（margin）、元素邊框（border）、元素內邊距（padding）和元素內容（content）。
元素外邊距（margin）
元素外邊距（margin）用來控制元素與相鄰元素之間間隔大小。
用法：
/*上方對外邊距12畫素*/
margin-top: 12px;
/*右方對外邊距24畫素*/
margin-right: 24px;
/*下方對外邊距6畫素*/
margin-bottom: 6px;
/*左方對外邊距3畫素*/
margin-left: 3px;
/*上方、右方、下方、左方皆對外邊距12畫素*/
margin: 12px;
/*上方、下方對外邊距12畫素 左方、右方對外邊距24畫素*/
margin: 12px 24px;
/*上方對外邊距12畫素 右方對外邊距24畫素 下方對外邊距6畫素 左方對外邊距3畫素*/
margin: 12px 24px 6px 3px;
按照left與right對應以及top與bottom對應，自動補充預設值
/*上方對外邊距12畫素 右方對外邊距24畫素 下方對外邊距6畫素 左方對外邊距24畫素*/
margin: 12px 24px 6px;
水平方向相鄰元素的margin值不會疊加
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>margin-horizontal-test</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #f00;
}
.margin-horizontal-test {
display: inline-block;
margin: 0 50px;
}
</style>
</head>
<body>
<div class="margin-horizontal-test"></div>
<div class="margin-horizontal-test"></div>
</body>
</html>
效果圖：
垂直方向相鄰元素margin值會疊加，最終以兩者之間最大值為準
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>margin-vertical-test</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #f00;
}
.margin-vertical-test {
margin: 50px 0;
}
</style>
</head>
<body>
<div class="margin-vertical-test"></div>
<div class="margin-vertical-test"></div>
</body>
</html>
效果圖：
利用margin屬性使塊級元素水平居中
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>利用margin屬性使塊級元素水平居中</title>
<style type="text/css">
body {
border: 1px solid black;
}
p {
margin: 0 auto;
width: 100px;
}
</style>
</head>
<body>
<p>Fatman</p>
</body>
</html>
效果圖：
元素邊框（border）
元素邊框（border）位於元素外邊距與元素內邊距之間。
用法：
/*邊框樣式為實線*/
border-style: solid;
/*邊框寬度為12畫素*/
border-width: 12px;
/*邊框顏色為黑色*/
border-color: black;
/*邊框角度為36畫素*/
border-radius: 36px;
/*邊框寬度為12畫素 樣式為實線 顏色為黑色*/
border: 12px solid black;
border的屬性也可以像margin一樣根據上下左右設定，筆者就不再一一舉例了。
利用邊框顏色差設定3D按鈕
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>border</title>
<style type="text/css">
button {
width: 200px;
height: 96px;
background-color: #888888;
border: 12px solid ;
border-color: #cccccc #444444 #444444 #cccccc;
color: white;
}
</style>
</head>
<body>
<button>按鈕</button>
</body>
</html>
效果圖：
元素內邊距（padding）
元素內邊距（padding）是用來定義元素內容距離元素邊框之間間隔大小。
內邊距和外邊距的區別在於 — 外邊距位於邊框外部，而內邊距位於邊框內部。
用法：
/*上方對內邊距12畫素*/
padding-top: 12px;
/*右方對內邊距24畫素*/
padding-right: 24px;
/*下方對內邊距6畫素*/
padding-bottom: 6px;
/*左方對內邊距3畫素*/
padding-left: 3px;
/*上方、右方、下方、左方皆對內邊距12畫素*/
padding: 12px;
/*上方、下方對內邊距12畫素 左方、右方對內邊距24畫素*/
padding: 12px 24px;
/*上方對內邊距12畫素 右方對內邊距24畫素 下方對內邊距6畫素 左方對內邊距3畫素*/
padding: 12px 24px 6px 3px;
padding也可以按照left與right對應以及top與bottom對應，自動補充預設值
/*上方對內邊距12畫素 右方對內邊距24畫素 下方對內邊距6畫素 左方對內邊距24畫素*/
padding: 12px 24px 6px;
使用padding增大元素的可點選範圍
<!DOCTYPE html>
<html>
<head>
<meta title="charset" content="utf-8">
<title>使用padding增大元素的可點選範圍</title>
<style type="text/css">
img {
width: 48px;
height: 48px;
padding: 24px;
}
</style>
</head>
<body>
<!-- 注意你的本地可能沒有這個檔案 -->
<img id="click-img" src="./assets/icon.jpg">
<script type="text/javascript">
let img = document.getElementById('click-img');
//點選padding處也可以觸發點選事件
img.addEventListener('click',function(){
alert('click img');
})
</script>
</body>
</html>
效果圖：
元素內容（content）
當box-sizing屬性值為content-box時：
元素內容寬度 === 元素設定寬度
盒子寬度 === 元素左右外邊距和 + 元素左右邊框寬度和 + 元素左右內邊距和 + 元素內容寬度
比如：
div {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid blue;
margin: 20px;
background-color: red;
box-sizing: content-box;
}
20 + 10 + 20 + 100 + 20 + 10 + 20
= 200
整個盒子的寬度為200px，元素內容的寬度值等於width值。
示意圖：
當box-sizing屬性值為border-box時：
元素內容寬度 === 元素設定寬度 - 元素左右邊框寬度和 - 元素左右內邊距和
盒子寬度 === 元素左右外邊距和 + 元素設定寬度
比如：
div {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid blue;
margin: 20px;
background-color: red;
box-sizing: border-box;
}
20 + 100 + 20
= 140
整個盒子的寬度為140px，元素內容的寬度值等於width值減去padding值和border值。
示意圖：
元素設定display:none後不存在於可訪問性樹中，不被瀏覽器繪製。 ↩︎