Python Web开发实战：边玩Minecraft边学CSS定位

这堂课非常有趣，侯老师把上一堂课中的代码进行了简单修改，就成了minecraft中的三层砖墙：实在是用心良苦！这种方法讲解CSS样式的相对定位和绝对定位，让人印象深刻！

最终效果：

把一幅画挂在墙的正中

我的代码(html 部分)：

我的代码（CSS部分）：

.block-1 {

        background: url('images/grass.png');
        background-size: contain;
        box-sizing:border-box;
        width: 64px;
        height:64px;

}

.block-2 {

        background: url('images/grass.png');
        background-size: contain;
        box-sizing:border-box;
        width: 128px;
        height:64px;

}

.block-3 {

        background: url('images/grass.png');
        background-size: contain;
        box-sizing:border-box;
        width: 192px;
        height:64px;

}

.flower {
        background: url('images/rose.png');
        background-size: contain;
        box-sizing:border-box;
        width: 64px;
        height:64px;
        position: relative;
        left: 64px;
        top: 64px;

}

.yellow-flower {
        background: url('images/flower.png');
        background-size: contain;
        box-sizing:border-box;
        width: 64px;
        height:64px;
        position: absolute;
        left: 128px;

}

.point  {

        width: 8px;
        height: 8px;
        background: rgb(194, 142, 28);
      }

.bg {

      background: rgb(18, 64, 227);
      width: 320px;
      height: 256px;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%);
      border: solid 8px yellow;
}

body {

  margin:0;
  background: url('images/brick.jpg');
  background-size: 150px 150px;
}

总结：

1. 相对定位（position：relative；）可以使用偏移量（left：？px；top：？px；）实现定位；
2. 绝对定位（position：absolute；）可以使用百分比来实现居中；
3. 每个css语句后面的；千万不能少，会导致后面的语句失效；
4. 使用Ctrl+/可以把选中的语句屏蔽掉（实际上是认为该语句是注释）；
5. 背景background可以使用颜色和图片{background: url('images/flower.png');}两种填充方式
6. 使用background-size: 150px 150px;或者background-size: contain;来实现精细的背景（固定像素大小或者不缩放）。