CSS笔记（一）炉石传说卡牌设计1

目标

我要通过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:flex

• flex-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：子元素之间的空间和子元素到容器边缘的空间都均匀分布

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>