浮动+页面居中+弹性盒子+定位+图片插入

　　1.浮动：float：right向右浮动，相当于图层置顶.

　　2.页面居中：margin:auto;

　　3.弹性盒子：设置弹性盒子：display:flex;width:0px;height:0px;border:2px solid red;弹性盒子会让子元素在一行显示，如果一行占不下，则会平均压缩每个盒子。

　　容器设置弹性盒子的元素，项目设置弹性盒子元素的子元素。

　　主轴默认水平方向为主轴方向，交叉轴始终垂直于主轴方向。

　　主轴上的对齐方式：

　　　　justify-content:center;居中，flex-start左对齐，flex-end右对齐，space-between分散对齐

　　　　align-items:center;居中，flex-start左对齐，flex-end右对齐。

　　允许项目在交叉轴上有自己的对齐方式：

　　　　align-self:center居中，flex-start顶部对齐，flex-end底部对齐。

　　4.定位(position)。relative相对定位，absolute绝对定位，fixed固定定位。偏移量top/bottom/left/right。

　　　　position:relative;相对于自己进行偏移，原来的位置不变。

　　　　position:absolute;如果该元素的父级或者祖先元素存在定位，就相对于父级或者祖先元素进行定位，否则相对于浏览器进行定位，原来的位置没了。子绝父相：如果一个元素要使用定位，通常将该元素设置为绝对定位，将它的父级或祖先元素设置为相对定位，让该元素相对它的父级或者祖先元素进行偏移。

　　　　position:fixed;固定定位始终相对于浏览器进行偏移，原来的位置没了。

 

小知识点：清除浏览器默认样式{margin:0;padding:0;}

To be continued......