1.CSS选择器的权重和优先级

第一等：代表内联样式，如: style="xxx"，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10。
第四等：代表元素选择器和伪元素选择器，如div，p，权值为1。

注意：!important权重为最高。通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

2.CSS的scoped 和 modules的区别

scoped

通过给不同组件的元素设置个特殊属性：data-v-48baf84c=""

// 编译后-dom

<div data-v-48baf84c="" class="demo-c">hello world!</div>

// 编译后-css

.demo-c[data-v-48baf84c] { // 属性选择器

    width: 100%;

    height: 1.333333rem;

    background-color: green;

    color: #fff;

}

modules

通过给样式名加hash字符串后缀（一个基于文件名和类名生成的标识符），有效避开了css权重和类名重复的问题。

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

//编译结果
<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

3.水平、垂直、水平垂直居中的实现和注意点

参考

水平居中

1. 行内元素（文本text、图像img、按钮超链）居中：text-align:center;

.center{
       text-align:center;
}

2. 块级元素水平居中：(有设置宽度和无设置宽度)

有宽度水平居中

width:100px + margin:0 auto， 主要是margin-left:auto; margin-right:auto;生效，top和bottom可以不为0
position:absolute/relative/fixed; left:50%(相对于父元素的宽度一半) + margin-left: 负的自身宽度的一半或者 transfrom: translateX(负的自身宽度的一半);
position:absolute/relative/fixed; left:0; right:0 + margin: auto(没有设置宽度时，会因为left:0和right:0而宽度充满整个父元素);

<div class="center">水平居中</div>
.center{
    width:200px;
    margin:0 auto;
    border:1px solid red;
}
.center{
    position: relative;
    width: 200px;
    left: 0;
    right: 0;
    margin: auto;
}
.center {
    position: relative;
    width: 200px;
    left: 50%; // %相对于父元素
    
    // 以下两种都可
    margin-left: -100px; 
    /* transform: translateX(-100px); */ // 或者translateX(-50%)，%相对于自身
    
    background-color: aqua;
}

无宽度：水平居中

display: table + margin:0 auto，
子dispaly: inline-block + 父text-align:center，将子元素块级元素改为行内块级元素，父元素设置text-align:center
dispaly:flex + justify-content:center

<div class="center">水平居中</div>
.center{
  display:table;
  margin:0 auto;
  border:1px solid red;
}

垂直居中

1. 行内元素垂直居中

单行文本垂直居中

设置padding-top=padding-bottom；
设置line-height=height；

多行文本垂直居中父display:table，子dispaly:table-cell + vertical-align:middle，意思是把元素放在父元素的中部

2. 块级元素垂直居中

有高度垂直居中

position + margin-top/transfrom:translateY()位移，需要知道自身高度
position, top:0, bottom:0 + margin:auto，自身需要设置高度

无高度垂直居中

父display:flex + 子align-items:center

水平垂直居中

方法1：绝对定位+margin:auto

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2：绝对定位+负margin

    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法3：绝对定位+transform

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

方法4：flex布局

   .box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

方法5：table-cell实现居中

设置
display:table-cell;
text-align:center;
vertical-align: middle;

4、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

5. 伪类和伪元素

参考：juejin.cn/post/697664…

1. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after

伪元素

2. 伪类表示被选择元素的某种状态，例如:hover，:first-child

6. flex布局

参考： juejin.cn/post/700462…

7. display：none； visiblity: hidden；opacity: 0；,的区别

参考： juejin.cn/post/684490…

display:none；

dom树不包含此节点，子节点不继承属性，
无法进行 DOM 事件监听，不能点击，
导致重排，
不支持transition过度动画

visiblity: hidden；

dom树包含此节点，子元素继承属性，修改子元素visiblity: visible显示子元素，
同样无法点击，
触发重绘，
支持过度动画

opacity: 0；

dom树包含此节点，子元素继承属性，但子元素的opacity样式不能改变隐藏状态，
可以进行 DOM 事件监听，可以点击
单独图层不重绘，
支持过度动画

8. BFC

什么是BFC

BFC内，块级元素会在垂直方向排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

如何触发BFC

这里简单列举几个触发BFC使用的CSS属性

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

可以用于解决

使用Float脱离文档流，高度塌陷。原理：计算高度时，float元素也参与
margin重叠
float实现两栏布局时。原理：bfc不和float重叠

9. CSS选择器的匹配原则是从右 -> 左

如果采用 left-to-right 的方式读取css规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样会做费时耗能，最后有很多都是无用的；
而如果采取 right-to-left 的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配

匹配规则是 .mod-nav h3 span，类为mod-nav的元素，且其子孙元素为tag=h3，且其子孙元素为tag=span的元素，从右往左匹配时，会直接忽略ul-li等大量的元素

10. Session与Cookie的区别

一般是服务端将session的id通过cookie传递给客户端

Session存储数据在服务器端，Cookie在客户端
Session没有数据大小限制，Cookie有
Session数据安全，Cookie相对于不安全

11. script标签的defer和async

defer是“渲染完再执行”，async是“下载完就执行”。
如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

CSS&HTML学习整理