精灵图在放大时，需要将包括width，height内的所有相关数值全部*2
——15.00记录
滑动门背景（一种背景布局思路）
这里是一个崭新的背景思路，就是说在前端设计中，背景其实并不是像浏览者看到的一整块背景布，其实在设计时，很可能该背景是由多个盒子分割而成，截取重复的部分，使用平铺的方法做成，这样做的目的，是为了最大程度减少背景图的变形。这里放下一个简单的例子：
具体代码参考2022.2.14日滑动门背景代码
居中元素的整理
1.使用外边距margin
2.使用 position定位（像素单位）
3.使用 position定位（百分比单位，然后使用复数减去多余的部分，详情见代码）
.parent {
width: 400px;
height: 300px;
background-color: gray;
/* 相对定位 */
position: relative;
}
.child {
width: 100px;
height: 80px;
background-color: blue;
/* 绝对定位 */
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -40px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
4.行高配合vertical-align: middle;（但我不明白为什么）
.parent {
width: 400px;
height: 300px;
background-color: #ccc;
font-size: 0;
text-align: center;
/* 设置行高 */
line-height: 300px;
}
.parent img {
/* 针对行内（块）元素垂直对齐方式 */
vertical-align: middle;
}
<div class="parent">
<img src="../img/qq.png" alt="">
</div>
行内块空隙解决办法：
1.font-size: 0;
2.vertical-align: middle;
3.float: left;
属性选择器（题外话，有空看）
元素的隐藏 display 、visibility: hidden、设置透明程度（opacity和直接设置为透明色）
弹性盒子（重点中的重点）
呼呼，关于居中定位第四点我都没搞懂，就来记录这个了，没办法，感觉有点多，所以趁着还没忘掉，赶紧记一下。
首先，我这里同浮动定位来对标弹性定位，因为他们都有共同点：
float属性定义元素脱离文档流浮动，默认值none,left和right控制元素向左右浮动,值inherit继承父元素的float的属性
display:flex称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目，会使块级元素和行内元素均具有行内块特点
。这只是他们相似的地方，但这两个东西一个是爸爸级别的，一个是儿子级别的，不能说五五开，只能说完全吊打，在各个方面，弹性都是优于浮动的，我这两天应该只有在拉按钮或者文本内容的时候考虑过浮动。
欧克，那么现在开始详细记录弹性的各个要点：
首先弹性并非在需要做布局的盒子上使用，而是在其镶嵌的大盒子上使用，这会让盒子中的所有元素拥有弹性布局特点，代码为：display:flex
一.元素在水平方向上的布局方式justify-content
（此处这个图，妈蛋这破网上传了30分钟%@￥#%@#@%）
.parent-1 {
/* 设置子元素在主轴方向结束的位置 */
justify-content: flex-end;
}
.parent-2 {
/* 设置子元素在主轴方向的位置 ，元素左右两侧是相同的间距 */
justify-content: space-around;
}
.parent-3 {
/* 设置子元素在主轴方向的位置 ，元素左右对齐 */
justify-content: space-between;
}
.parent-4 {
/* 设置子元素在主轴方向的位置 ，除了元素所占的位置，平均计算元素之间的间距*/
justify-content: space-evenly;
}
这里， justify-content主要设置水平的布局。
二.元素在竖直方向上的布局方式align-items
.parent-1 {
/* 设置子元素在垂直方向的位置 */
/* flex-start center flex-end */
align-items: flex-end;
}
三.元素的居中方式
这里也就是用水平和数值方向上的两个属性justify-content和 align-items来设置
justify-content: center;
align-items: center;
四.元素的摆放方向flex-direction
这里要使用的属性是flex-direction，该属性负责将元素以行或者列的形式来摆放，同时还可以将元素反向摆放：
display: flex;
/* 设置子元素的摆放的方向 */
/* column 列 （垂直方式摆放） */
/* row 行 （水平方式摆放）*/
/* row-reverse 行 （水平方式摆放）反向摆放*/
/* column-reverse 列 （垂直方式摆放） 反向摆放*/
/* flex-direction: column-reverse; */
/* 例如： */
/* 设置子元素为侧轴方向摆放*/
flex-direction: column;
/* 设置子元素在垂直方向的位置 */
justify-content: flex-end;
/* 设置子元素在水平方向的位置 */
align-items: flex-end;
五.元素换行flex-wrap
弹性布局并不像浮动布局，浮动布局依次排列，在父盒子宽度不够时，会自动换行，这也是弹性布局的一个大问题，当浏览器伸缩时，可能会导致一排元素掉到下一行。弹性布局换行代码为flex-wrap，值为nowrap,wrap,wrap-reverse
display: flex;
/* 设置子元素换行显示 */
/* nowrap : 不换行 */
/* wrap ： 换行 */
flex-wrap: wrap;
六.控制元素大小
这里分别有三个值：flex-grow，flex-shrink，flex-basis
这三个值也是flex的简写属性，flex-grow更广泛，此属性表示元素的扩大数值，也用于表示各元素占据的比例，如下
.parent .child {
/* width: 100px; */
height: 100px;
background-color: red;
/* 拓展（扩大） */
flex-grow: 1;
}
.parent .demo {
height: 100px;
background-color: green;
/* 拓展（扩大） */
flex-grow: 1;
flex-shrink目前用于当弹性布局让元素内容缩小时使用，设置为0可以让元素不再缩小
flex-basis，目前我还是不太懂这个值和width有什么区别这里先记录为flex专用的宽度属性
.example-1 {
/* 设置当前元素的宽度为100px */
/* flex-basis 是根据flex-direction来设置元素的尺寸 */
flex-basis: 100px;
height: 100px;
background-color: deepskyblue;
}
.example-2 {
/* flex-basis: 500px; */
/* 把父元素剩余的宽度设置给当前元素*/
flex-grow: 1;
height: 100px;
background-color: purple;
}
<div class="parent">
<div class="example-1"></div>
<div class="example-2"></div>
</div>
最后总结一下:
一类：给父元素设置的属性
1） 设置元素为弹性盒子
display: flex
2）设置元素在主轴方向的摆放（默认是水平方向）
justify-content: flex-start /center /flex-end/ space-around/ space-between / space-evenly
3）设置元素在侧轴方向的摆放(默认是垂直方向)
单行元素的垂直位置以及行与行之间存在间距
align-item: flex-start / center / flex-end
4）设置元素在侧轴方向的摆放(默认是垂直方向)
多行元素的垂直位置以及行与行之间不存在间距
align-content: flex-start / center / flex-end
5）设置子元素尺寸相加超过父元素 设置换行显示
flex-wrap: nowrap/ wrap / reserve-wrap
6）设置子元素摆放方向（X，Y）控制元素在主轴或侧轴的位置
flex-direction: row (行) / column (列) / row-reserve / column-reserve
一类：给子元素设置的属性
控制元素的尺寸
flex : flex-grow flex-shrink flex-basis
1）设置元素扩大
flex-grow: 数字
.box-1 { flex-grow: 2 ;}
.box-2 { flex-grow: 3 ;}
.box-3 { flex-grow: 5 ; }
.box-1 : .box-2 : .box-3 = 2: 3 : 5
占父元素的多少分值几
.box-1 占父元素宽度的2/10
.box-2 占父元素宽度的3/10
.box-3 占父元素宽度的5/10
2）设置元素收缩
flex-shrink: 数字
flex-shrink: 0 表示当前元素不会缩小。
3）设置元素的基础值（width/height）
根据元素所在的轴设置其尺寸
主轴 设置宽度
侧轴 设置高度
flex-basis： 跟width / height 属性值是一样的
4）设置元素的垂直位置
align-slef: flex-start / center / flex-end
5）设置元素渲染的先后顺序
order: 数值
数值越小 位置越往前摆放
