边玩Minecraft边学CSS的定位方式

相对定位、绝对定位

准备工作

           background:url('images/grass.png')

将上次的土块模型中的background换成土块
在css块状结构中换背景图
但是将图形放上去以后被拉升了
要使图像像素保持不变，有一个css的background-size来限定

           background-size: contain;是限定在盒装大小之内

这是现在的效果图

最后一步：在顶上放一朵小花

image.png

在css中写了一朵花的样式，然后在HTML中加入新的标签样式

准备工作完成

相对定位

目标：把花移动到第二层空白的位置
相对定位：定位系统的参照坐标系和坐标点
相对于自己之前本应该在的位置的偏移量

左上角

距离顶部偏移64px，距离左侧偏移128px

                    position: relative;
                    left: 64px;
                    top:64px;

偏移后的位置

之前的空白占位不会消失

绝对定位

新增了一个小黄花的样式，将在两个土块之间，用绝对定位看看会发生什么把

                   position: absolute;

在css中加入一行代码后小黄花的占位消失了

image.png

原始

改成abusolute占位以后原有的占位就不存在了

偏移之后发现小黄花的红点占位并不在空白的位置，说明便宜还是有问题的

问题的原因是yellow-flower的父级没有定义是absolute还是relative

定位父级bg后

出现刚刚偏差的原因：当上次没有定义是绝对还是相对的时候就会往上追溯，刚才BG的父级是body，由于默认的margin不为0，就有了8px的偏差

基于定位的居中

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

居中定位之前的准备工作

加一个画框和一个背景墙

用绝对定位的百分百
内层元素处于外层元素的50% 的位置

要先把定位方式改成absolute

               position: absolute;
               left:50%;
               top:50%;

css的缺陷

用transform属性修改定位点的位置

              transform: translate(-50%,-50%);

侯爵老师的小讲解