20170314 第十五課時盒模型之padding詳解
和margin類似
margin主要控住一個元素內(nèi)部文字之間的距離逃沿。如果一個div，內(nèi)部有一個子div，為了讓子div和父div保持距離，優(yōu)先使用子div的margin，而不是父div的padding惹想。
因為場合不一樣，padding主要是控制文字督函，margin主要是控制布局嘀粱、距離。
盒子和盒子之間的距離優(yōu)先用margin辰狡，盒子和文字之間的距離優(yōu)先使用padding锋叨。
作業(yè)：盒子的寬高各是100px如果盒子有30像素的padding值，同時設(shè)置背景為灰色宛篇，灰色的面積多大娃磺。
(原以為：灰色面積應(yīng)該為100*100px，文字不包含的地方也是灰色的叫倍⊥滴裕×）
灰色的面積應(yīng)該為130130像素方豺瘤，文字實際可以寫的面積為100px100px,但是為了使有一個內(nèi)邊距，灰色面積會增大听诸，因為包含寫字的部分坐求，和內(nèi)邊距。
第十四課時作業(yè)：制作一個圣誕樹
使用絕對定位晌梨，
box_relative { position: absolute; left: 30px; top: 20px;
}
[圖片上傳中桥嗤。。仔蝌。（1）]
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8小時第十五課時</title>
<style >
{
/調(diào)整縮進(jìn)泛领，這樣就是整個頁面貼合網(wǎng)頁*/
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;/*邊框?qū)?0px,實線，顏色白色*/
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>
效果：
