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: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：子元素之间的空间和子元素到容器边缘的空间都均匀分布
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>
原文地址：https://blog.csdn.net/qq_36492090/article/details/144020986
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！