从今天起，“小葵花妈妈课堂”啦！????

大家都晓得，面试犹如考试，在考试之前，老师个别都会先给咱们理清常识脉络，整顿温习纲要，依照纲要精准学习，疾速达到应试状态。所以，一本精炼的温习纲要对面试尤为重要。本武林秘笈从本周开始，每周会更新3-5个知识点，尽量的精简与提炼常识脉络，极为适宜利用碎片工夫来学习。心愿你和我一起，每周提高一点点～????

1. CSS选择器及其优先级

选择器的优先级由高到低：

  • !important
  • 内联款式(style='xxx')（1000）
  • ID选择器(#example)（0100）
  • 类选择器(.example)/属性选择器([type="radio"])/伪类选择器(:hover)（0010）
  • 标签选择器(h1)/伪元素选择器(::before)(0001)
  • 通配符选择器(*)/关系选择器(+,>,~,' ',||)/否定伪类（:not()）(0000)

注：通配选择器(*)、组合选择器(+,>,~,' ',||)和否定伪类（:not()）不会影响优先级（然而，:not()外部申明的选择器会影响优先级）。

优先级是由A、B、C、D的值来决定的，其中它们的值计算规定如下：

  1. 如果存在内联款式，那么A = 1,否则A = 0;
  2. B 的值等于 ID选择器 呈现的次数;
  3. C 的值等于 类选择器 和 属性选择器 和 伪类 呈现的总次数;
  4. D 的值等于 标签选择器 和 伪元素 呈现的总次数 。

这么很形象，那么来个例子你就懂了：

#nav-global > ul > li > a.nav-link

套用下面的算法，顺次求出 A B C D 的值：

  1. 因为没有内联款式 ，所以 A = 0;
  2. ID选择器总共呈现了1次， B = 1;

类选择器呈现了1次， 属性选择器呈现了0次，伪类选择器呈现0次，所以 C = (1 + 0 + 0) = 1；
标签选择器呈现了3次， 伪元素呈现了0次，所以 D = (3 + 0) = 3;

下面算出的A、 B、C、D 能够简记作：(0, 1, 1, 3)。

拜访MDN来理解更多对于优先级的详细信息。

2. 伪类和伪元素的区别

伪元素：次要是用来创立一些不存在原有dom构造树种的元素，例如：用::before和::after在一些存在的元素前后增加文字款式等，这些被增加的内容会以具体的UI显示进去，被用户所看到的，这些内容不会扭转文档的内容，不会呈现在DOM中，不可复制，仅仅是在CSS渲染层退出。CSS3中倡议应用::示意伪元素，如：div::before。

::before和::after这两个伪类下有特有的属性content，必须有这个属性。

伪类：示意已存在的某个元素处于某种状态，然而通过dom树又无奈示意这种状态，就能够通过伪类来为其增加款式。例如a元素的:hover, :active等。CSS3中倡议应用:示意伪元素，如：a:hover。

3. 你晓得什么是BFC么？

3-1. 什么是BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 外部的元素与内部的元素互相隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

3-2. 触发BFC的条件

  • 根元素
  • float元素
  • position: absolute/fixed
  • display: inline-block / table
  • ovevflow !== visible
  • display: flow-root
  • column-span: all

3-3. BFC的束缚规定

  • 属于同一个 BFC 的两个相邻 Box 垂直排列（能够看作BFC中有一个的惯例流）
  • 属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠
  • BFC 中子元素的 margin box 的右边，与蕴含块 (BFC) border box的右边相接触 (子元素 absolute 除外)
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，思考BFC所蕴含的所有元素，连浮动元素也参加计算
  • 文字层不会被浮动层笼罩，盘绕于四周

3-4.BFC能够解决的问题

  • 阻止margin重叠
  • 能够蕴含浮动元素 —— 革除外部浮动(革除浮动的原理是两个div都位于同一个 BFC 区域之中)
  • 自实用两列布局（float + overflow）
  • 能够阻止元素被浮动元素笼罩

4. 如何实现居中

4-1. 相对定位 + margin

优缺点：须要父级有具体宽高，且要晓得宽高的具体值

.parent {  position: relative;  height: 400px;  width: 100%;  border: 1px solid #000;}.child {  position: absolute;  top: 50%;  left: 50%;  width: 100px;  height: 100px;  margin-left: -50px;  margin-top: -50px;  background-color: aquamarine;}

4-2. transform

优缺点：不须要父级有具体宽高，然而兼容性不是特地好

.parent {  position: relative;  height: 400px;  width: 100%;  border: 1px solid #000;}.child {  position: absolute;  top: 50%;  left: 50%;  width: 100px;  height: 100px;  transform: translate(-50%, -50%);  background-color: aquamarine;}

4-3. 相对定位

优缺点：须要父级有具体宽高，然而不须要晓得宽高的具体值

.parent {  position: relative;  height: 400px;  width: 100%;  border: 1px solid #000;}.child {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  margin: auto;  width: 100px;  height: 100px;  background-color: aquamarine;}

4-4.flex

优缺点：更简略了，然而也是兼容性不是特地好

.parent {  display: flex;  justify-content: center;  align-items: center;  height: 400px;  width: 100%;  border: 1px solid #000;}.child {  width: 100px;  height: 100px;  background-color: aquamarine;}

4-5.table-cell

优缺点：要求父级有固定宽高，且不能应用百分比

.parent {  display: table-cell;  vertical-align: middle;  text-align: center;  height: 400px;  width: 400px;  border: 1px solid #000;}.child {  display: inline-block;  width: 100px;  height: 100px;  background-color: aquamarine;}

4-6.javascript

<script>  let html = document.documentElement  winW = html.clientWidth  winH = html.clientHeight  boxW = box.offsetWidth  boxH = box.offsetHeight  box.style.position = 'absolute'  box.style.left = (winW - boxW) / 2 + 'px'  box.style.top = (winH - boxH) / 2 + 'px'</script>

5. 盒模型

页面渲染时，dom 元素所采纳的 布局模型。可通过box-sizing进行设置。依据计算宽高的区域可分为：

  • content-box (W3C 规范盒模型)
  • border-box (IE 盒模型)
  • padding-box (FireFox 已经反对)
  • margin-box (浏览器未实现)

注：实践上是有下面 4 种盒子，但当初 w3c 与 mdn 标准中均只反对 content-box 与 border-box；

最初

既然曾经读到这里了，就在评论区打个卡吧！如果您感觉这篇内容对您有些许作用，请长按二维码关注我哦！您的关注是我保持的能源～