<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
/*
* 设置边框
*/
border:10px red solid;
/*
* 内边距，指的是盒子的内容区与盒子边框之间的距离
* 一共有四个方向的内边距，能够经过
* padding-top
* padding-right
* padding-left
* padding-bottom
* 来设置四个方向的内边框
*
* 内边距可影响盒子大小，颜色背景也会在内边距出现
*
* 盒子的大小由内容区，内边距和边框共同决定
* 盒子可见框的宽度=border-left-width + padding-left + width + padding-right + border-right-width
* 盒子可见宽的高度=border-width + padding-top + height + padding-bottom + border-bottom-width
*
*/
padding-top: 100px;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 100px;
/*
* 使用padding能够同时设置四个边框的样式，规则和border-width同样
*
* padding:100px;
* padding:100px 200px;
* padding:100px 200px 300px;
* padding:100px 200px 300px 400px;
*/
}
/*
* 建立一个子元素box1占满box2
*/
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>