持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
1. CSS选择器的优先级是怎么样的？
CSS选择器的优先级顺序：
内联样式 > ID选择器 > 类选择器 > 标签选择器
优先级的计算：
优先级是由 A、B、C、D 四个值来决定的，具体计算规则如下
- A={如果存在内联样式则为1，否则为0}
- B={ID选择器出现的次数}
- C={类选择器、属性选择器、伪类选择器出现的总次数}
- D={标签选择器、伪元素选择器出现的总次数}
计算示例：
样式一：
/*
A=0 不存在内联样式
B=0 不存在ID选择器
C=1 有一个类选择器
D=3 有三个标签选择器
最终计算结果：{0,0,1,3}
*/
div ul li .red { ... }
样式二：
/*
A=0 不存在内联样式
B=1 有一个ID选择器
C=0 不存在类选择器
D=0 不存在标签选择器
最终计算结果：{0,1,0,0}
*/
#mydiv { ... }
计算完成后，我们通过从A到D的顺序进行值的大小比较，权重由A到D从高到低，只要比较出最大值即可。例如上面的两个样式：
1. 样式一的A=0，样式二的A=0 【相等，继续往下比较】
2. 样式一的B=0 < 样式二的B=1 【样式二的大，不继续往下比了，即认为样式二的优先级更高】
2. 通过 CSS 的哪些方式可以实现隐藏页面上的元素？
| 方式 | 说明 |
|---|---|
| opacity: 0 | 通过将元素的透明度设置为0，实现看起来隐藏的效果；但是依然会占用空间并可以进行交互 |
| visibility: hidden | 与透明度为0的方案非常类似，会占据空间，但不可以进行交互 |
| overflow: hidden | 只会隐藏元素溢出的部分；占据空间且不可交互 |
| display: none | 可以彻底隐藏元素并从文档流中消失，不占据空间也不能交互，且不影响布局 |
| z-index: -9999 | 通过将元素的层级置于最底层，让其他元素覆盖住它，达到看起来隐藏的效果 |
| transform: scale(0,0) | 通过将元素进行缩放，缩小为0；依然会占据空间，但不可交互 |
| left: -9999px | 通过将元素定位到屏幕外面，达到看起来看不到的效果 |
3. px、em、rem之间有什么区别？
考察点: 相对单位, 绝对单位, 以及适配问题
| 单位名称 | 说明 |
|---|---|
| px | 绝对单位。代表像素数量，页面会按照给出的精确像素进行展示 |
| em | 相对单位。默认的基准点为父元素的字体大小，而如果自身定义了字体大小则按自身的来算。所以即使在同一个页面内，1em可能不是一个固定的值。 |
| rem | 相对单位。可以理解为 root em，即基准点为根元素<html>的字体大小。rem是CSS3中新增单位，Chrome/FireFox/IE9+都支持, 一般用于做移动端适配 |
正常开发 px 使用率较高, 如果要做 rem 适配, 会用到 rem 单位!
rem布局的原理:
- 使用 rem 为单位
- 动态的设置 html font-size (媒体查询, js设置, 插件设置都可以)
webpack有工具, 可以写 px, 自动转 rem youzan.github.io/vant/#/zh-C…
4. 让元素水平居中的方法有哪些？
方法一：使用 margin
通过为元素设置左右的 margin 为 auto，实现让元素居中。
<div class="center">本内容会居中</div>
.center {
height: 500px;
width: 500px;
background-color: pink;
margin: 0 auto;
}
方式二: 转成行内块, 给父盒子设置 text-align: center
<div class="father">
<div class="center">我是内容盒子</div>
</div>
.father {
text-align: center;
}
.center {
width: 400px;
height: 400px;
background-color: pink;
display: inline-block;
}
方法三：使用 flex 布局
使用 flex 提供的子元素居中排列功能，对元素进行居中。
<div class="father">
<div class="center">我是内容盒子</div>
</div>
.father {
display: flex;
background-color: skyblue;
justify-content: center;
align-items: center;
}
.center {
width: 400px;
height: 400px;
background-color: pink;
}
方式四: 使用定位布局
<div class="father">
<div class="center">我是内容盒子</div>
</div>
.father {
background-color: skyblue;
position: relative;
height: 500px;
}
.center {
width: 400px;
height: 400px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
