1 BFC是什么

  1. 是什么：块级格式化上下文，通俗地讲就是“被隔离的区间”，BFC元素的子元素不会对外面的其他元素产生影响

  2. 怎么做：

    • 触发条件：
      • 浮动元素（元素的float非none）
      • 绝对定位元素（元素的position为absolute或fixed）
      • 行内块（inline-block）元素
      • overflow值不为visible的块元素
      • 弹性元素（display为flex或inline-flex元素的直接子元素）

  3. 解决了什么问题：

    1. 清除浮动（Why not .clearfix）
    2. 外边距重叠（兄弟，间距）
      • 定义两个div，分别指定两个盒子的margin-bottom和margin-top属性为10，理论上两者的间距应为20，但实际上间距为10，即出现了margin重合现象，如果两个元素的外边距不同，则取最大值，如果相同则仅为其中一个
      • 可以分别在两个div外包裹一个父元素container，指定container的css属性为以上任意属性值即可触发BFC，使得两个container中的div被分别“隔离”，解决margin重合的问题。
    3. margin塌陷（父子，高度）
      • 定义父元素box，子元素box1，当子元素box1指定了margin-top属性为20px后，理论上子元素向下20px，父元素保持不动，但实际上父元素与子元素都向下移动了20px
      • 可以让父元素box变成BFC来解决
      • 出现这个问题的原因是子元素的margin没有参照，可以给父元素添加border-top属性，也可以解决这个问题
    4. 高度坍塌，清除浮动（父子，浮动）
      • 定义父元素的宽度与子元素的宽高，当子元素是浮动布局时，理论上虽然父元素没有定义高度，但子元素可以自动将父元素“撑开”。但实际上子元素的浮动属性使其脱离了文档流，导致父元素出现高度坍塌的情况
      • 将父元素变成BFC，使得子元素无法影响到父元素，实现了清除浮动的作用
    5. 阻止元素被浮动元素覆盖（兄弟，浮动）
      • 定义两个div，一个是正常元素，另外一个是浮动元素，那么浮动元素就会覆盖到正常元素上面
      • 将正常元素变为BFC元素，这样两个元素就不会互相干扰

2 如何实现(水平)垂直居中

  • 如果.parent的height不确定，只需padding:10px 0就能将.child垂直水平居中
  • 如果.parent的height是确定的，就很难把.chlid居中

    • table自带的功能

      1
2
3
4
5

      <table>
  <tr>
    <td>content</td>
  </tr>
</table>

    • div装成table

      • 外部div的display:table，内部div的display:table-cell; vertical-align:middle

    • (子元素高度也确定)相对定位 + margin-top: -50%*height

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

      .parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  /* left: 50%; */
  /* width: 300px; */
  height: 100px;
  /* margin-left: -150px; */
  margin-top: -50px;
}

    • （子元素高度不确定）translate(-50%,-50%)

       1
 2
 3
 4
 5
 6
 7
 8
 9
10

      .parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%,-50%);
}

    • （子元素高度确定）定位0 + margin:auto

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

      .parent{
  height: 600px;
  position: relative;
}
.child{
  position: absolute;
  width: 300px;
  height: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

    • flex

      1
2
3
4
5
6
7
8
9

      .parent{
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  width: 300px;
}

3 CSS选择器优先级如何确定

  1. 选择器越具体，其优先级越高
  2. 相同优先级，出现在后面的，覆盖前面的
  3. 属性后面加!important的优先级最高，但是要少用

4 如何清除浮动

  • 方法一，给父元素添加.clearfix
1
2
3
4
5

.clearfix:after{
  content: '';
  display: block; /*或者 table*/
  clear: both;
}
  • 方法二，利用BFC（overflow: hidden…）

5 两种盒模型（box-sizing）的区别

  1. 先说第一种：content-box，width指定的是content区域宽度，而不是实际宽度，公式为

      • 实际宽度 = width + padding + border

  2. 再说第二种：border-box，width指定的是左右边框外侧的距离（IE默认盒模型），公式为

      • 实际宽度 = width

  3. 相同点：用来指定元素高度/宽度的计算标准

  4. 不同点：计算高度或宽度的方式不同，border-box更好用，符合我们的第一直觉

6 Sass与Less的区别

CSS预处理器，都内置函数

都支持

变量符号不同：sass$ less@

Webpack配置：（按需引入）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

module: {
	rules: [
		{
			test: /\.s[ca]ss$/,
			use: [
				'style-loader',
				'css-loader',
				'sass-loader'
			]
		}
	]
}

Vite配置：

1
2
3
4
5
6
7

// 默认支持，无需其他配置
// 可以配置全局变量引入
preprocesserOptions: {
	scss: {
		additionalData: '@import "./src/styles/var.scss";'
	}
}

7 尽可能多的实现三栏布局

1
2
3
4
5

<div class="container">
	<div class="main"></div>
	<div class="sub"></div>
	<div class="extra"></div>
</div>
  • 浮动（适用于main在最后绘制）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.extra {
  height: 400px;
  width: 100px;
  float: right;
}
.sub {
  height: 400px;
  width: 100px;
  float: left;
}
.main {
  height: 400px;
  margin: 0 110px; // 也可以把它变成BFC
}
  • Flex: 要使用order决定顺序
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.container {
  display: flex;
}
.sub {
  order: 3;
  width: 100px;
  height: 400px;
}
.extra {
  order: 1;
  width: 100px;
  height: 400px;
}
.main {
  order: 2;
  flex: 1;
  height: 400px;
}
  • grid：grid-template-areas
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 如果是按顺序的，则直接用grid-template-columns: 200px auto 200px;
.container {
  display: grid;
  grid-template-areas: "sub main extra";
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 400px;
  /* 可以简写为 */
  grid-template: "sub main extra" 400px / 100px 1fr 100px;
}
.main {
  grid-area: main;
}
.sub {
  grid-area: sub;
}
.extra {
  grid-area: extra;
}
  • 按顺序的话用table和table-cell也行

8 CSS3新特性

过渡

动画

选择器 :root :last-child :nth-child(n)

阴影

渐变

滤镜

flex-grid

3d-2d