20170314 第十五课时盒模型之padding详解
和margin类似

margin主要控住一个元素内部文字之间的距离。如果一个div，内部有一个子div，为了让子div和父div保持距离，优先使用子div的margin，而不是父div的padding。
因为场合不一样，padding主要是控制文字，margin主要是控制布局、距离。
盒子和盒子之间的距离优先用margin，盒子和文字之间的距离优先使用padding。

作业：盒子的宽高各是100px如果盒子有30像素的padding值，同时设置背景为灰色，灰色的面积多大。
(原以为：灰色面积应该为100*100px，文字不包含的地方也是灰色的。×）

灰色的面积应该为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

20170314 第十五课时盒模型之padding详解

box_relative { position: absolute; left: 30px; top: 20px;

推荐阅读更多精彩内容