导引
- 设置边距，让每个图片有自己的盒子，自己的空间，采用margin
以图片为容器的背景进行设置，为容器设置盒子
- 让三张图片居中，给三张图片设置父元素，让父元素居中
- 手动设置父元素的高度，计算父元素的宽度，使用margin-auto，让父元素两边的间距相同，自动剧中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
#box{
height: 1350px;
width: 2160px;
margin: auto;
}
<!-- 所有的容器默认的宽度都是html的宽度，高度默认都是0，空容器彼此之间并不会相互撑开，所以必须设置一个具体的值-->
#box div{
height:1080px;
width: 2160px;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div id="box">
<div style="background: url(../img/Wallpaper1.jpg)"></div>
<div style="background: url(../img/Wallpaper2.jpg)"></div>
<div style="background: url(../img/Wallpaper3.jpg)"></div>
</div>
</body>
</html>
分析与总结
- 为什么设置了背景的div容器没有撑开对应的父容器，在未对div容器设置的情况下，默认宽度是无限的，高度为零，除非设置对应的容器的高度
- html页面的子容器，必须是确定的高度，若采用百分比，则不能默认的html的高度为0.所以原来的高度仍旧为零
- box不能使得其中的子容器div居中显示？
- 要给box一个特定的宽度，具体的大小，留出一定的空白，然后设置留白间距，两边同时自动分配
- 然后再用p或者span将的图片包装起来，用text-align属性
- 或者自动计算对应的容器构成的图片的高度，父容器的宽度为所有子容器宽度的和，采用margin：auto，自动将两边的留白进行的平均分配
使用填充构造边框——增加内边距
- 填充的介绍：向一个元素内部增加空间，亦或是内边距。不同于外边距，填充会改变元素的大小，随着填充的增大，元素会被撑大。
- 不同于刚才的两个空盒子之间的设置，现在在盒子里面增加相应的内容，让盒子的内容彼此进行的相互的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
<!-- 因为很多的容器都默认带了一定的边距，所以就需要提前将所有容器的边距清零 -->
}
#box{
height: 1350px;
width: 2260px;
margin: auto;
}
#box div{
height:1080px;
float: left;
border: solid 10px black;
margin: 40px;
padding: 90px;
<!-- 创造对应的框内距，让容器内部的内容和周围的容器有一定的距离 -->
text-align: center;
<!-- 让容器内部的元素居中显示 -->
}
img{
height: 1000px;
}
</style>
</head>
<body>
<div id="box">
<div>
<img src="../img/Wallpaper1.jpg"/>
<br>
<span>游戏场景1</span>
</div>
<div>
<img src="../img/Wallpaper2.jpg"/>
<br>
<span>游戏场景2</span>
</div>
<div >
<img src="../img/Wallpaper3.jpg"/>
<br>
<span>游戏场景3</span>
</div>
</div>
盒子的接本构成
- 内容：容器中的实际的元素
- 填充：容器内部的内容和容器的距离
- 边框：容器的边框
- 边距：容器与别的容器的距离
