20170314 第十五課時盒模型之padding詳解
和margin類似
margin主要控住一個元素內部文字之間的距離。如果一個div，內部有一個子div，為了讓子div和父div保持距離，優先使用子div的margin，而不是父div的padding。
因為場合不一樣，padding主要是控制文字，margin主要是控制布局、距離。
盒子和盒子之間的距離優先用margin，盒子和文字之間的距離優先使用padding。
作業：盒子的寬高各是100px如果盒子有30像素的padding值，同時設置背景為灰色，灰色的面積多大。
(原以為：灰色面積應該為100*100px，文字不包含的地方也是灰色的?！粒?/p>
灰色的面積應該為130130像素方，文字實際可以寫的面積為100px100px,但是為了使有一個內邊距，灰色面積會增大，因為包含寫字的部分，和內邊距。
第十四課時作業：制作一個圣誕樹
使用絕對定位，
box_relative { position: absolute; left: 30px; top: 20px;
}
[圖片上傳中。。。（1）]
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8小時第十五課時</title>
<style >
{
/調整縮進，這樣就是整個頁面貼合網頁*/
padding: 0;
margin: 0;
}
#trip{
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
position: absolute;
left: 20px;
top: 0px;
}
#leaf{
width: 0px;
height: 0px;
border-top: 70px solid transparent;/*邊框寬70px,實線，顏色白色*/
border-right: 70px solid transparent;
border-bottom: 70px solid green;
border-left: 70px solid transparent;
position: absolute;
left: 0px;
top: 30px;
}
#tree{
width:10px;
height: 20px;
background-color: #CD9B1D;
position: absolute;
left:65px;
top: 170px;
}
</style>
<title>8小時第十五課時 盒模型之padding詳解</title>
</head>
<body>
<div id=trip>
</div>
<div id=leaf>
</div>
<div id=tree></div>
</body>
</html>
效果：
Paste_Image.png
