基础问题

说说你对盒子模型的理解
盒子模型的图例

盒子模型主要分为两种：
- 标准盒子模型：content的width/height不包含padding/border
- 怪异盒子模型：content的width/height包含padding/border
CSS选择器有哪些？优先级如何？
- 常用的选择器有：
  - ID选择器 #a
  - 类选择器 .a
  - 标签选择器 div
  - 子选择器 #a b
  - 后代选择器 a>a_1
  - 相邻同胞选择器 .a+.b
  - 群组选择器 div,p
- 不常用的选择器有：
  - 伪类选择器
  - 伪元素选择器
  - 属性选择器
  - 层次选择器
- 优先级: 内联>ID>类>…
谈谈你对Flex布局的理解

Flex布局，即弹性盒子布局，容器内部是有一条主轴和与之形成直角的交叉轴构成，容器内元素默认沿主轴方向排列，其方向由flex-direction决定。

Flex布局图例

容器属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
成员属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
谈谈你对BFC的理解
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
  
  BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
触发条件
- 根元素，即HTML元素
- 浮动元素：float值为left、right
- overflow值不为 visible，为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed

基础问题

说说你对盒子模型的理解

CSS选择器有哪些？优先级如何？

谈谈你对Flex布局的理解

容器属性

成员属性

谈谈你对BFC的理解