我不想不肯治好的“病” 叫理想主义
我不要规则做的点滴 刺入我身体
别再加重 外壳淤青
现实 逃避 只是自保而已
他说他有很多
想表达的话题
可沉默何时起变成了惯性
灵魂被“理性”冻住的悲鸣
要燃烧笑容续命
这几天在和别人做项目，CSS几天没学已经忘得差不多了，所以趁着这几天整理一下笔记。
这两天写完了登录/注册页面，学到的主要是一些布局的东西。
1.flex布局
2.绝对定位和相对定位
3.伪类
1.flex布局
flex布局的使用语法：
.div {
display: flex;
}如何设置垂直/水平居中？
在父级加入以下代码：
.div {
display: flex;
justify-content: center;
align-items: center;
}其中，
justify-content是主轴的对齐方式，有以下几个值：flex-start | flex-end | center | space-between | space-around
什么是主轴？
flex container：采用Flex布局的元素
flex item：容器的直接子元素
main start--main end 主轴（可以理解为横轴）
cross start--cross end 交叉轴（可以理解为竖轴）
各个值具体有什么效果？如图：
（我觉得这个图已经很明显了，不用多说）
之后，
align-items是交叉轴的对齐方式，有以下几个值：flex-start | flex-end | center | baseline | stretch
各个值具体有什么效果？如图：
2.绝对定位和相对定位
定位
如何开启定位？
.div {
position: absolute|relative
}其中，
relative是相对定位；absolute是绝对定位
绝对定位
mdn的解释是这样的：该元素将从正常文档流中移除，页面布局中不会为该元素创建任何空间。元素的位置是相对于其位置最近的祖先（如果有）或初始包含块。其最终位置由top、right、bottom 和 left 的值决定。
想要理解还是有点门槛的，我尽量用人话说一遍：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位（元素在没有定义宽度的情况下，宽度由元素里面的内容决定）
1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素（即html元素）定位
例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1 {
height: 25vh;
background-color: aqua;
}
.d2 {
height: 25vh;
background-color: green;
}
.d3 {
height: 25vh;
background-color: red;
}
.d4 {
height: 25vh;
background-color: yellow;
}
.d5 {
position: absolute;
top: 200px; 距根元素的上方200px
right: 500px; 距根元素的右侧500px
height: 100px;
width: 100px;
background-color: lavenderblush;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<div class="d4">d4</div>
<div class="d5">d5</div>
</body>
</html>
2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1 {
height: 25vh;
background-color: aqua;
}
.d2 {
position: absolute;
height: 25vh;
width: 600px;
background-color: green;
}
.d3 {
position: absolute;
top: 100px; 以d2为基准，距上方的距离为100px
right: 100px; 以d2为基准，距右侧的距离为100px
height: 100px;
width: 100px;
background-color: lavenderblush;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2
<div class="d3">d5</div>
</div>
</body>
</html>其中的d2包裹了d3（d2是d3的父元素）
相对定位
mdn的解释是这样的：元素根据文档的正常流程定位，然后根据 top、right、bottom 和 left 的值相对于自身偏移。偏移量不会影响任何其他元素的位置；因此，在页面布局中为该元素提供的空间与位置为 static 时相同。
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
3.伪类
这真是整篇文章最轻松的一个栏目，记几个常用的就行了。
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
再来几个：
鼠标类型
end