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
网友评论