目标
我要通过html实现一张炉石传说的卡牌设计
问题
其中必须就要考虑到各个元素的摆放，形状的调整来达到满意的效果。通过这个联系来熟悉一下CSS的基本操作。
1️⃣ 基本概念
在CSS里面有行元素，块元素，内联元素，常见的行元素有button、input等，块级元素有div，h1，p等，内联元素有span等
- 行元素：多个行元素放在一起会自动排成一行，不会垂直排列。且行元素不能设置
width和height - 块元素：独占一行，可以设置
width,height,margin, 和padding。 - 内联元素：可以与其他元素在一行显示，也能设置
width和height
可以通过设置style = "display:inline" 来改变某个元素的显示方式，例如：
<div style="display: inline;">这是行内显示的内容</div>
<div style="display: inline;">这是另一个行内内容</div>该代码就把块级元素的显示方式改成了行元素显示方式。
inline：行元素block：块元素inline-block：内联元素none：不设置
2️⃣ flex
flex就是用来对容器内的元素进行对齐排列的
语法说明：
dispaly:flexflex-direction：-
row将内部元素横向排列
-
column将内部元素纵向排列
-
justify-content：垂直排列align-items：水平排列
justify-content参数
首先我们要知道主轴方向，flex-direction:row的主轴方向是从左到右，flex-direction:column的主轴方向是从上到下。当然我们也可以让主轴方向从右到左，例如row-reverse
flex-end
这里主轴方向是column从上到下，而flex-end表示靠着底部排列元素
我们把主轴方向改成row看看有什么不同
显然内部元素贴着右边排列有点像右对齐的感觉，但是这里我们发现内部元素被拉伸到和容器的高度一致。原因是我们没有设置align-items，如果我们设置该参数则
其根本原因是align-items如果不被设置，则它的默认值就是stretch，它的作用就是把元素拉伸跟容器一样的属性。space-between：子元素之间的空间平均分布space-around：每个子元素周围的间距相等，两侧分配的间距是子元素间距的一半。space-evenly：子元素之间的空间和子元素到容器边缘的空间都均匀分布
flex-wrap：wrap
- 子元素在容器空间不足时换行。
- 新行的排列方向与主轴方向一致（从左到右或从上到下）。
一般默认是nowrap即容器空间不足也不换行如下：
这样十分拥挤，也会让元素丧失原本的长宽属性，如果改成wrap即十分美观：
3️⃣ 居中显示
<style>body{width:200px;height:300px;position:relative;}//水平居中显示.box1{position:absolute;top:5px;left:50%;//偏移到容器的对称轴transform:translateX(-50%)//让图片的对称轴和容器的对称轴重合}//垂直居中显示.box2{position:absolute;top:50%;//偏移到容器的对称轴transform:translateY(-50%)//让图片的对称轴和容器的对称轴重合}
</style>
4️⃣ transform
在我要插入一张图片到左上角的时候，我得到了以下的知识
<style>transform-oringin:top left // 以图片的左上角作为缩放点transform:scale(0.1) // 缩小十倍</style>
其次transform属性会被覆盖，如果我要让一张缩小10倍后的图片居中我需要把缩小和坐标偏移写在一起。
<style>transform-oringin:top left // 以图片的左上角作为缩放点transform:scale(0.1) translateX(-50%) // 把两句写在一起，不然两句只能生效一句</style>
