1. 对盒子模型的理解

盒模型由四个元素组成，margin、border、padding、content

盒模型有两种：标准盒模型和IE盒模型

标准盒模型的width和height属性范围只包含了content
IE盒模型的width和height属性范围包含了border、padding、content

可以通过修改元素的bos-sizing属性来改变盒模型

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

2. 居中方式

水平居中一个块级元素：可以使用margin属性将元素的左右margin设置为auto。

.myelement {
  width: 200px;
  margin: 0 auto;
}

垂直居中一个块级元素：可以使用flex布局或grid布局

//flex
.mycontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}
//grid
.mycontainer { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 100px); 
    height: 100vh; 
} 
.myelement { 
    background-color: red; 
    grid-column: 2 / 3; 
    grid-row: 2 / 3; 
}
//在上述代码中，我们创建了一个名为`mycontainer`的grid容器，并设置了3列和3行，将元素放置在第2列第2行的位置上，从而实现了居中效果。

水平和垂直居中一个块级元素：可以使用绝对定位和负边距实现，例如：

.myelement {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

这里的.myelement使用了绝对定位，将top和left属性设置为50%，表示元素的左上角应该位于父元素的中心位置。然后，使用负边距将元素的宽度和高度的一半向上和向左移动，使其居中。

3. BFC

BFC是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗的来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器内部的元素不会受到外界的干扰。

3.1 创建BFC

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

3.2 BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致；
BFC区域不会与浮动的容器发生重叠；
BFC是独立的容器，容器内部元素不会影响外部元素；

3.3 BFC的作用：

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

4. position的值有哪些

静态定位：static 默认值不脱离文档流，top，right，bottom，left 等属性不生效；

绝对定位：absolute 绝对定位的关键是找对参照物，找到最近的一级带有带定位的父级元素进行位置移动如果找不到，那么相对于浏览器窗口进行定位。元素会脱离正常文档流；

相对定位：relative 参照物：元素自身偏移前位置；

固定定位：fixed 参照物：浏览器窗口；固定定位会脱离文档流；

面试|CSS