css高频面试题

css面试题

01-盒子水平垂直居中

<div class="box">
  <div class="box-content">

  div>
div>
1
2
3
4
5

1.1-flex

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.2-flex+margin

.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  display: flex;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12

1.3-定位+transform

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  position: relative;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.4-定位+margin

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  position: relative;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

02-盒模型

盒模型主要分为4部分：内容、外边距、内边距

Css3盒子模型可以通过box-sizing来改变

2.1-w3c标准盒模型

默认就是content-box，也就是默认标准盒模型，标准盒模型width设置了内容的宽，所以盒子实际宽度加上padding和border

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    div {
      background-color: hotpink;
      padding: 10px;
      border: 10px solid #000;
      width: 100px;
      height: 100px;
    }
  style>
head>
<body>
  <div>
    132
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

以上示例代码盒子最终宽高就是：140 * 140

2.2-ie盒模型/怪异盒模型/c3盒模型

通过设置box-sizing: border-box;盒模型为ie盒模型，也称怪异盒模型，设置width后，实际盒子的宽度就固定为该宽度，包含了内容+padding+border

ie盒模型主要表现在ie浏览器，当然其他浏览器也保留了ie盒模型的支持

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    div {
      background-color: hotpink;
      padding: 10px;
      border: 10px solid #000;
      width: 100px;
      height: 100px;
      box-sizing: border-box;
    }
  style>
head>
<body>
  <div>
    132
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

以上示例代码盒子最终宽高就是：100px，内容宽度：60*60

03-flex:1什么意思

flex:1实际代表的是三个属性的简写

在这里插入图片描述

3.1-flex-grow:1

flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比

以下示例代码：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 100px;
    }

    .box div:nth-child(1) {
      flex-grow: 1;
    }


  style>
head>
<body>
  <div class="box">
    <div>1div>
    <div>2div>
    <div>3div>
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

父盒子的宽度为500，三个子盒子的宽度啊为100，剩余空间还有200，此时第一个盒子设置了flex-grow:1,代表剩余空间全部交给第一个盒子100+剩余的200 = 300

再比如以下代码：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 100px;
    }

    .box div:nth-child(1) {
      flex-grow: 1;
    }

    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }


  style>
head>
<body>
  <div class="box">
    <div>1div>
    <div>2div>
    <div>3div>
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

父盒子剩余空间的200

第一个盒子扩大1/5，100+40 = 140
第二个盒子扩大3/5，100+120=220
第三个盒子扩大1/5，100+40= 140

3.2-flex-shrink:1

flex-shrink用来设置子盒子超过父盒子的宽度后，进行缩小的比例取值

以下示例代码：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }

    .box div {
      width: 200px;
    }

    .box div:nth-child(1) {
      flex-shrink: 1;
    }

    .box div:nth-child(2) {
      flex-shrink: 2;
    }

    .box div:nth-child(3) {
      flex-shrink: 1;
    }
  style>
head>
<body>
  <div class="box">
    <div>1div>
    <div>2div>
    <div>3div>
  div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

父盒子的宽度为500，子盒子的宽度为600，超出100，超出的100，如何进行比例缩放

第一个盒子：1/4 * 100 = 25 最终第一个盒子200-25=175

第二个盒子：2/4 * 100 = 50 最终第二个盒子200-50 = 150

第三个盒子：1/4 * 100 = 25 最终第一个盒子200-25=175

3.3-flex-basis:0%

设置盒子的基准宽度，并且basis和width同时存在会把width干掉

示例代码：

04-c3新属性

c3盒模型box-sizing
flex布局
transition过渡
transform2D转换
background-size背景缩放
border-radius圆角
等等，不用都说说一些常用的就ok

05-bfc

5.1-概念

Block Formatting Context,翻译过来就是块级格式化上下文

bfc实际是一种属性，拥有这种属性后，就会让该渲染区域独立，并且该渲染区域中的内容布局不会影响到外界

5.2-如何触发

根元素(html) float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible

5.3-解决什么问题

5.3.1-外边距重叠

外边距重叠,要注意这不是bug，规范就是这样的，当两个盒子上下同时拥有上下间距，会取最大值

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      margin: 100px 0;
    }
  style>
head>
<body>
  <div>div>
  <div>div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

会发现两个盒子和中间只有100px

解决方案：触发bfc




  
  
  Document
  


  "box">
    "content">
  
  "box">
    "content">
  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5.3.2-清除浮动

当子盒子开启float后会影响后面的布局以及盒子高度

代码示例：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .box {
     width: 500px;
     border: 2px dashed #000;
    }
    .content {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      float: left;
    }
  style>
head>
<body>
  <div class="box">
    <div class="content">div>
  div>
  <h1>213h1>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5.3.3-浮动覆盖

由于浮动导致盒子被覆盖

示例代码：

由于浮动导致盒子被覆盖

示例代码：

解决方案：触发bfc，独立的渲染区域

相关阅读:
IDEA连接hadoop hdfs
数据分析技能点-数据挖掘及入门
 Gin+getway+Fabric2.4.4演示（二）初始化账本和前端写入数据到账本
 Flume学习笔记（3）—— Flume 自定义组件
 Python分享之路径与文件 (os.path包, glob包)
PAT 1005 Spell It Right
SysML与MBSE的关系
 使用 MediaPipe 轻松实现设备端机器学习
 记一次HEAP CORRUPTION DETECTED问题及解决
 php公用方法
原文地址：https://blog.csdn.net/weixin_46862327/article/details/126458628

css高频面试题

文章目录

css面试题

01-盒子水平垂直居中

1.1-flex

1.2-flex+margin

1.3-定位+transform

1.4-定位+margin

02-盒模型

2.1-w3c标准盒模型

2.2-ie盒模型/怪异盒模型/c3盒模型

03-flex:1什么意思

3.1-flex-grow:1

3.2-flex-shrink:1

3.3-flex-basis:0%

04-c3新属性

05-bfc

5.1-概念

5.2-如何触发

5.3-解决什么问题

5.3.1-外边距重叠

5.3.2-清除浮动

5.3.3-浮动覆盖