css 面经

写代码: css div 垂直水平居中,并完成 div 高度永远是宽度的一半（宽度可以不指定）

• 知识点: padding 的使用技巧

  1. 如果 padding 后面使用百分比,百分比的值与父级容器的宽度有关

  // 例: 此时 class 为 test 的标签宽高相等
  .test {
      width: 100%;
      padding: 50% 0;
  }
  

实现俩栏式布局的方式

• 实现方式
  1. 左边 float,margin-left （右侧自适应）
  2. 左边 position,margin-left （右侧自适应）
  3. 都使用 float,然后负的 margin-left （右侧自适应）

BFC 的概念、作用、应用场景

• 概念: 一块独立渲染的区域，内部元素的渲染不会影响到边界以外的元素。

• 形成条件:

  1. float不是none
  2. position不是static和relative
  3. overflow不是visible
  4. display是flex或inline-block

• 应用场景:

  1. 清除浮动（形成的 BFC 内部会清除浮动）
  2. 消除边距重叠（可以消除父级元素和子级元素的内外边距塌陷）
  3. 两栏式布局

  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: auto;
  }
  

IFC 的概念、作用。应用场景

• 概念:
• 形成条件: 块级元素内仅包含内联元素。如果 IFC 内有块级元素插入，则会产生两个匿名块将父元素分割开，产生两个 IFC。
  1. 内联元素会从容器的顶部开始,一个一个的水平排部
  2. 水平的 padding、border、margin 对内联元素有效,但垂直的 padding、border、margin 不会影响其高度
• 应用场景
  1. 水平居中: 使用text-align: center
  2. 垂直居中: 形成一个 IFC，用一个元素讲父级元素的高度撑开，然后父级元素设置vertical-align: middle，其他内容就垂直居中了。

伪类和伪元素的区别

• 伪类选择都是选择在 dom 树上存在的元素
• 伪元素创建了文档之外一个新的元素
• css3 规定,伪类选择使用单冒号':',而伪元素使用双冒号'::'

盒模型

• 格式化上下文
  1. BFC: 块级格式化上下文(Block Formatter Context)
  2. IFC: 网格格式化上下文(Inline Formatter Context)
  3. GFC: 网格格式化上下文(Grid Formatter Context)，使用 grid 布局的时候。
  4. FFC: 自适应格式化上下文(Flex Formatter)，使用 flex 布局的时候。

W3C 盒模型和 IE 盒模型

• W3C 盒模型 (box-sizing: content-box;) width = content width

• IE 盒模型 (box-sizing: border-box;) width = content width + padding + border

最后愿大家面试进大厂，代码无BUG