2022/5/23

overflow:hidden的作用

1.溢出隐藏：给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

2.清除浮动：一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。

3.解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，系统会错误的把margin-top错误的也添加给父元素，那么父级元素也会跟着下来，造成外边距塌陷，给父级元素添加overflow:hidden形成BFC，就可以解决这个问题了。

垂直居中的方式有哪些？

(1)定位版方法一：

当宽度和高度未知时使用

子元素设置了宽高且宽高小于父元素的情况下，设置position：absolute；之后给他的上下左右四个边设置为0px，再通过设置 margin：auto；实现

position: absolute;
left: 0px;top: 0px;right: 0px;bottom: 0px;
margin: auto;    在父盒子中居中
margin: 0 auto;   水平居中 
margin: auto 0;    垂直居中

(2)定位版方法二：

在子元素有宽高的情况下，先将子元素移动到父元素的最中心位置，再反向移动子元素宽高的一半。

height: 200px;
width: 200px;
position: absolute;
left: 50%;top: 50%;
margin-left: -100px;
margin-top: -100px;

(3)flex布局

给父元素设置 display:flex; justify-content:center; align-items:center;

(4)利用内联块元素

.wrap {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
}
.box {
  width: 100px;
  height: 100px; 
  line-height: 100px; /* 重新设置子元素的行高，否则会继承父元素的行高 */
  display: inline-block;
  vertical-align: middle; /* middle   把此元素放置在父元素的中部 */
}

(5)absolute+transform

.wrap {
  width: 300px;
  height: 300px;
  position: relative;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

(6)grid网格布局

.wrap {
  width: 300px;
  height: 300px;
  display: grid;
}
.box {
  width: 100px;
  height: 100px;
  align-self: center;
  justify-self: center;
}

v-if和v-show的区别

v-if是 真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是 惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

vue-router的路由模式区别

hash模式 (默认)

1. 使用URL的hash值来作为路由。支持所有浏览器。
2. url地址中带有#, 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号, 这是最安全的模式，因为他兼容所有的浏览器和服务器。
3. 不能随意的修改path地址
4. 在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式

1. 整个地址重新加载，可以保存历史记录，方便前进后退
2. 使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404
3. 可以随意修改path地址，可以进入404

总结:

• hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
• history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
• 结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。

CSS选择器及权重

选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。

常用的选择器有以下内容：

1、ID #id

2、class .class

3、标签 p

4、通用 *

5、属性 type="text"

6、伪类 :link :visited :hover :active

7、伪元素 ::first-line :first-letter

8、子选择器 div>p

9、后代选择器 div p

10、相邻兄弟 div+p

11、通用兄弟 div~p

12、结构伪类 :nth-child :first-child :last-child

权重计算规则：

1、第一等：代表内联样式，如: style=””，权值为1000。

2、第二等：代表ID选择器，如：#content，权值为0100。

3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5、通配符、*权值为0000。

6、继承的样式没有权重值。

important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符