方法一：定位
.child{
? height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}方法二：定位
.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}方法三：定位
child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}方法四：弹性盒子
father{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}方法五：表格
father{
width: 500px;
height: 500px;
border: 1px solid red;
/* 将元素转成表格单元格显示 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
子元素需设置{
display: inline-block;
vertical-align: middle;//消除行内块元素三像素问题
}将一个内容放在页面合适的位置，需要考虑到这个内容大小，位置，形状，就相当于，买一个家具
css将所有内容的形状统一成矩形，然后只需要考虑内容大小。
盒模型、盒子模型、框模型（box model）*/
? ? ? ? ? ?1:内容区(content) ? ? 冰箱
? ? ? ? ? ? 2、内边距（padding） ? 泡沫
? ? ? ? ? ? 3、边框（border） ? ? ?纸箱
? ? ? ? ? ? 4、外边距（margin） ? 控制位置(元素与元素之间)? ?
? 浏览器的一种规则，元素水平方向七个值数值相加，要等于其父元素内容区宽度，
? 如果不等于，浏览器会进行强制调整，这个过程就叫过度约束
? 怎么调整：
? ? 1、七个值当中没有auto，就调整margin-right
? ? ? 0+0+0+100+0+0+500=600
? ? 2、如果有auto，margin-left，width，margin-right可以被设置为auto
? ? 1个auto ?谁是auto调整谁
? ? ? ? margin-left为auto，width，margin-right为固定值
? ? ? ? margin-right为auto，width，margin-left为固定值
? ? ? ? width为auto，margin-left，margin-left为固定值
? ? ? ? 0+0+0+auto+0+0+0=600
? ? 2个auto
? ? ? margin-left，width为auto，margin-right为固定值 ?调整width
? ? ? width，margin-right为auto，margin-left为固定值 ?调整width
? ?margin-left，margin-right为auto，width为固定值 ?同时调整margin-left，margin-right
? ? 3个auto
? ? margin-left，width，margin-right为auto ?调整的width
? ? 总结：如果width为auto，就只调整width
? ? 解决方案：
? ? ? 1、用透明边框隔开两者的外边距
? ? ? 2、overflow: 非visible的值;(可以开启元素的BFC属性)
? ? ? 3.用伪类前面加一个display:table;（在父元素的外面添加）*/
边框和背景：
文本效果：
字体：
变换和过渡：
动画：
布局：
媒体查询：
是解决高度塌陷
给元素开启BFC（块级格式化上下文）
? ? ? BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块
? ? ? 具有一些特点，这些特点，可以帮助我们解决一些问题
? ? ? 1、开启BFC的元素，垂直方向外边距不会重叠
? ? ? 2、开启BFC的元素，不会被浮动元素覆盖
? ? ? 3、开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题
? ? ? 如何开启BFC
? ? ? 1、设置浮动
? ? ? 可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响
? ? ? 2、将元素转成行内块
? ? ? 可以解决高度塌陷，但宽度会丢失，且有三像素问题
? ? ? 3、overflow属性 非visible值
? ? ? 副作用最小，建议使用
? ? ? 4、开启绝对定位
? ? ? 可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响
使用相对单位：可以使用相对单位如 em、rem 或者百分比来设置字体大小，这样可以相对于父元素或者根元素进行缩放，而不会受到浏览器的最小字体限制。
使用 transform 进行缩放：可以使用 CSS3 的 transform 属性对文字进行缩放，例如 transform: scale(0.8); 可以将文字缩小到原来的 80%。
使用 SVG：将文字作为 SVG 图像来显示，这样可以绕开浏览器对于文字最小字号的限制。
使用图片或图标字体：将小于 12px 的文字内容制作成图片或者使用图标字体来展示，这样可以规避浏览器对于文字最小字号的限制。
需要注意的是，小于 12px 的文字可能会影响到可读性和用户体验，建议在使用时进行充分的测试和考虑。?
js有同步和异步：
注意：代码先执行同步代码，后执行异步代码
对promise的理解：异步容易造成回调地狱，promise是一个内置构造函数，接受一个函数作为参数，该参数函数立即调用，该执行函数可以放同步或异步任务，参数函数接受两个形参resolve,reject这两个参数是函数，resolve()调用表示成功，reject()调用表示失败，promise有三个状态 默认状态(等待态、成功态、失败态)
js是单线程，同一时间只能做一件事，为了避免耗时任务阻塞代码，js通过事件环来处理这种耗时任务(异步）
执行程序：
先同步，再异步
异步分微任务(then、catch方法),宏任务(ajax、定时器、事件回调、script标签)
事件环是先执行宏任务(解析script)
从上往下执行，遇到同步代码，立刻放入js调用栈执行，遇到宏任务放到宿主环境(浏览器)
遇到微任务放到微任务队列。当宿主环境的时间或事件触发，对应的回调进入宏任务队列
当Js调用栈空闲时，会清空微任务队列，然后在执行宏任务队列，执行完一个宏任务，再清空微任务队列
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它主要用于集中管理应用程序中的所有组件的状态，并以一种可预测的方式进行状态的修改和管理。
State（状态）：应用程序中需要集中管理的状态数据，类似于组件中的 data。
Getters（获取器）：用于从 state 中派生出一些状态，类似于组件中的计算属性。
Mutations（突变）：用于修改 state 中的数据，必须是同步函数。
Actions（动作）：用于提交 mutations，可以包含任意异步操作。
Modules（模块）：用于将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions。
2 Vue 如何定义指令
全局方式
// 全局注册一个自定义指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})局部方式
// 在组件中定义局部指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}Vue路由模式区别
hash模式
?默认hash 哈希模式，地址上带#
?优点：兼容性好
?缺点：不美观
?原理 ：#后面地址改变不会引起页面刷新，路由会检测到地址变化(window.onhashchange)，拿到最新的地址找到
匹配的组件进行渲染
?mode: 'hash',
history模式
history模式 地址上不带#
优点：美观 缺点：兼容不好
原理：采用h5的history相关api(pushState, replaceState)
必须服务器支持,配合后台
在脚手架环境下，默认支持history模式
可以这样使用
<div v-for="item in items" v-if="item.isActive">
{{ item.name }}
</div>?