本文共 877 字，大约阅读时间需要 2 分钟。

导引

• 设置边距，让每个图片有自己的盒子，自己的空间，采用margin

以图片为容器的背景进行设置，为容器设置盒子

• 让三张图片居中，给三张图片设置父元素，让父元素居中
• 手动设置父元素的高度，计算父元素的宽度，使用margin-auto，让父元素两边的间距相同，自动剧中

分析与总结

• 为什么设置了背景的div容器没有撑开对应的父容器，在未对div容器设置的情况下，默认宽度是无限的，高度为零，除非设置对应的容器的高度
• html页面的子容器，必须是确定的高度，若采用百分比，则不能默认的html的高度为0.所以原来的高度仍旧为零
  
• box不能使得其中的子容器div居中显示？
• 要给box一个特定的宽度，具体的大小，留出一定的空白，然后设置留白间距，两边同时自动分配
• 然后再用p或者span将的图片包装起来，用text-align属性
• 或者自动计算对应的容器构成的图片的高度，父容器的宽度为所有子容器宽度的和，采用margin：auto，自动将两边的留白进行的平均分配
  

使用填充构造边框——增加内边距

• 填充的介绍：向一个元素内部增加空间，亦或是内边距。不同于外边距，填充会改变元素的大小，随着填充的增大，元素会被撑大。
• 不同于刚才的两个空盒子之间的设置，现在在盒子里面增加相应的内容，让盒子的内容彼此进行的相互的设置

    
           
   
    
    
        
             
     
        
     游戏场景1    
    
    
    
        
             
     
        
     游戏场景2    
    
    
    
        
             
     
        
     游戏场景3    
    
   

盒子的接本构成

• 内容：容器中的实际的元素
• 填充：容器内部的内容和容器的距离
• 边框：容器的边框
• 边距：容器与别的容器的距离
  

转载地址：http://zwwvb.baihongyu.com/