跟着大佬撸秘籍

书写由来

据大佬自述：

由于本秘籍为了便于记忆，快速达到应试状态，类似于复习知识大纲。知识点会尽量的精简与提炼知识脉络，并不去展开深入细节，面面俱到。有兴趣或者有疑问的童鞋可以自行谷歌下对应知识点的详细内容。😋 那我就把一些知识点的细节，网罗一下

css

1-盒模型

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

• content-box (W3C 标准盒模型)
• border-box (IE 盒模型)
• padding-box (FireFox 曾经支持)
• margin-box (浏览器未实现)

Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；

网罗

CSS盒模型详解

2-BFC

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

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

• 触发条件:

  • 根元素
  • position: absolute/fixed
  • display: inline-block / table
  • float 元素
  • ovevflow !== visible

• 规则:

  • 属于同一个 BFC 的两个相邻 Box 垂直排列
  • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  • BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，浮动子元素也参与计算
  • 文字层不会被浮动层覆盖，环绕于周围

• 应用:

  • 阻止margin重叠

  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

  • 自适应两栏布局

  • 可以阻止元素被浮动元素覆盖

网罗

# 面试官：请说说什么是BFC？大白话讲清楚

3-层叠上下文

元素提升为一个比较特殊的图层，在三维空间中（z轴）高出普通元素一等。

• 触发条件
  • 根层叠上下文（html）
  • position
  • css3属性
    • flex
    • transform
    • opacity
    • will-change
    • -webkit-overflow-scrolling
• 层叠等级：层叠上下文在z轴上的排序
  • 在同一层叠上下文中，层叠等级才有意义
  • z-index的优先级最高

网罗

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

4-居中布局

• 水平居中
  • 行内元素：text-align: center
  • 块级元素：margin: 0 auto
  • absolute + transform
  • flex + justify-content
• 垂直居中
  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table
• 水平垂直居中
  • absolute + transform
  • flex + align-items: center

网罗

面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高

5-选择器优先级

• !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
• 选择器 从右往左 解析