標籤：oct pad border 混合 使用 alt 模組 圖解 rip
為什麼要理解盒子模組：
html介面的布局就像由多個盒子組成的介面，
理解盒子的結構，以滿足不同的業務情境需要的布局。
Css 盒子模型:
CSS中， Box Model叫盒子模型（或框模型），Box Model規定了元素框處理元素內容（element content）、
內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在HTML文檔中，每個元素（element）
都有盒子模型，所以說在Web世界裡（特別是頁面配置），Box Model無處不在。下面是Box Model的圖示：
說明：中，由內而外依次是元素內容（content）、內邊矩（padding-top、padding-right、padding- bottom、padding-left）
、邊框（border-top、border-right、border-bottom、border- left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。
內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距
是Css模型邊距圖解：
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/** 萬用字元,代表所有標籤 */
*{
padding: 0px;
margin: 0px;
}
/*ID選取器*/
#myDiv{
/*實際的寬高,width -左右邊距+ 左右邊框*/
width: 200px;
height: 300px;
border: 1px solid red;
/*
padding填充,內邊距
*/
/*
1.上下左右的值
2.上下,左右
3.上,左右,下
4.上,右,下,左
*/
padding: 0px 10px 0px;
margin: 10px 20px 10px;
}
#myDiv2{
width: 200px;
height: 300px;
border: 1px solid green;
}
/*類別選取器*/
.title{
color: blue;
font-size: 14px;
}
/*混合使用*/
span.title{
font-size: 25px;
}
div > p{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div id="myDiv">
<p>abcdef</p>
</div>
<div id="myDiv2">
</div>
<span class="title">
Javascripttest
</span>
<i class="title">ActionScript</i>
</body>
</html>
css 盒子模型
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
