CSS面试基础（一）

1. CSS 选择器及其权重

• 简单选择器

   - 标签选择器    1
   - 类选择器      10
   - id选择器      100
   - 通配符选择器   0
  

• 属性选择器 10

• 伪类选择器 10

• 伪元素选择器 1 ::after 【可以用来实现遮罩层！！】

• 组合选择器 A>B （A的儿子B）A,B (A和B都要加的样式)

• 多用选择器

2. 样式优先级

!import > 行内 1000 > 内联and外联（看执行顺序了，谁后执行谁生效！！）

注意：

• 如果是给目标元素的祖父添加样式，此时离目标元素最近的元素的样式生效！！

3. 普通文档流布局 vs BFC布局规则 vs IFC布局规则

3.1 普通文档流布局规则

• 普通文档流的块级元素之间会发生外边距重叠合并 【开启 BFC】

  • 同一层的相邻元素之间。如果上面的元素有下外边距，下面的元素有上外边距，那么此时 两者的外边距会发生合并，即会取两者中较大的那个！！
  • 没有内容将父元素与子元素分开的父子元素之间。即如果子盒子有上外边距，而父盒子没 有的话，父子的外边距也会发生重叠，即父盒子会跟着子盒子一起下来！！
  • 内容为空的块级盒子自己的上下外边距会发生重叠并合并！！

• 浮动的元素不会被父级元素计算高度，即会发生父盒子高度塌陷 【开启BFC ，给父盒子设置高度，清除浮动】

  • 高度塌陷其实就是，父盒子中装了一个浮动的子盒子，那此时由于浮动的元素不占位置，而 此时如果没有给父盒子设置高度，那么父盒子会以为自己里面没东西，从而高度塌陷为0！！

• 非浮动的元素会占据排在自己前面的浮动元素的位置 【清除浮动】

3.2 BFC布局规则

3.2.1 何为 BFC ？

BFC(Block Formatting Context) 块级格式化上下文。它本质上就是页面中的一块渲染区域，并且有一套渲染规则，它决定了开启了BFC的元素将如何定位，以及和其他元素的关系和相互作用。

简单来说，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。 并且 BFC 具有普通容器所没有的一些特性。 通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

3.2.2 如何开启BFC ？

• 是body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed) 脱标操作！
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

3.2.3 BFC的布局规则 ？

• 同一个BFC里的元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠 （解决外边距重叠问题）
• 解决高度塌陷问题（可以包含浮动的元素）
• BFC的区域不会占据浮动元素的布局

3.3 IFC布局规则

3.3.1 何为 IFC ？

IFC (Inline Formatting Contexts)，也就是“内联格式化上下文”。

3.3.2 如何开启 IFC ？

• 块级元素中仅包含内联级别元素就会形成一个 IFC

3.3.3 IFC 布局规则 ？

• 子元素水平方向横向排列，并且垂直方向起点为元素顶部。
• 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。

4. 浮动（不完全脱离标准文档流）and 清除浮动

4.1 float

float元素并不是完全脱离文档流，即后面的元素不是可以完全升上去被它压在下面！！！ ，因为浮动最初是设计用来实现文字环绕图片的效果，如果完全脱离文档流，那岂不是文字会盖住图片！！！

• 对于位于后面的`块级非浮动元素

  - 边框和背景会升上去被它压在下面，但内容会跑到`浮动元素外面`，并环绕浮动元素
  显示
  

• 对于位于后面的行内/行内块非浮动元素

  - 直接就不会升上去，**会环绕在它周围**
  

4.2 清除 float

清除浮动clear，是css的一个样式属性。用来指定一个元素是否必须在(清除浮动后)移动到在它之前的浮动元素下面。即是否去占领原属于浮动元素的位置！！！

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的顶部外边距会折叠。

清除浮动可以解决的问题：

• 高度塌陷：

  • 在父盒子的浮动子盒子后加一个子盒子并对其进行清除浮动

  • 利用伪元素在父盒子后面加一个伪元素（默认是内联元素） ，并为其设置清除浮动

        parent::after{
            content : ""
            display ：block
            clear ：both
        }
    

• 未浮动元素向上占据浮动元素的位置

  • 给未浮动元素加上清除浮动属性即可！！