<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框*/
border: 10px red solid;
/*
* 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
* 一共有四个方向的内边距，可以通过：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 来设置四个方向的内边距
*
* 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
* 可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
*/
/*设置上内边距*/
/*padding-top: 100px;*/
/*设置右内边距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距1</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/*
* 外边距指的是当前盒子与其他盒子之间的距离，
* 他不会影响可见框的大小，而是会影响到盒子的位置。
* 盒子有四个方向的外边距：
* margin-top
* margin-right
* margin-bottom
* margin-left
*
* 由于页面中的元素都是靠左靠上摆放的，
* 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
* 而如果是设置右和下外边距会改变其他盒子的位置
*/
/*
* 设置box1的上外边距，盒子上边框和其他的盒子的距离
*/
/*margin-top: 100px;*/
/*
* 左外边距
*/
/*margin-left: 100px;*/
/*设置右和下外边距*/
/*margin-right: 100px;
margin-bottom: 100px;*/
/*
* 外边距也可以指定为一个负值，
* 如果外边距设置的是负值，则元素会向反方向移动
*/
/*margin-left: -150px;
margin-top: -100px;
margin-bottom: -100px;*/
/*margin-bottom: -100px;*/
/*
* margin还可以设置为auto，auto一般只设置给水平方向的margin
* 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
* 垂直方向外边距如果设置为auto，则外边距默认就是0
*
* 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
* 就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
* 以使子元素在父元素中水平居中
*
*/
/*margin-left: auto;
margin-right: auto;*/
/*
* 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
* 规则和padding一样
*/
margin: 0 auto;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距2</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 为上边的元素设置一个下外边距
*/
margin-bottom: 100px;
}
/*
* 垂直外边距的重叠
* - 在网页中相邻的垂直方向的外边距会发生外边距的重叠
* 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
* 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
*/
.box2{
width: 100px;
height: 100px;
background-color: green;
/**
* 为下边的元素设置一个上外边距
*/
margin-top: 100px;
}
.box3{
width: 200px;
height: 100px;
background-color: yellow;
/*为box3设置一个上边框*/
/*border-top: 1px red solid;*/
/*padding-top: 1px;*/
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*
* 为子元素设置一个上外边距，是子元素的位置下移
*/
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
