css高频面试题

itpeilibo

已于 2022-11-06 22:35:32 修改

阅读量593

点赞数

分类专栏： css笔记前端文章标签： css css3 html

于 2022-08-22 07:59:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46862327/article/details/126458628

版权

前端同时被 2 个专栏收录

29 篇文章

订阅专栏

css笔记

1 篇文章

订阅专栏

css面试题

01-盒子水平垂直居中

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

  </div>
</div>

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-flex+margin

.box {
  width: 100%;
  height: 100%;
  background-color: pink;
  display: flex;
}
.box-content {
  width: 300px;
  height: 300px;
  background-color: hotpink;
  margin: auto;
}

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.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;
}

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>Document</title>
  <style>
    div {
      background-color: hotpink;
      padding: 10px;
      border: 10px solid #000;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>
    132
  </div>
</body>
</html>

以上示例代码盒子最终宽高就是：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>Document</title>
  <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>

以上示例代码盒子最终宽高就是：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>Document</title>
  <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>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的宽度为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>Document</title>
  <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>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子剩余空间的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>Document</title>
  <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>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的宽度为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干掉

示例代码：

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

    .box div {
      width: 100px;
    }

    .box div:nth-child(1) {
      flex-basis: 50px;
    }

    .box div:nth-child(2) {
      flex-basis: 100px;
    }

    .box div:nth-child(3) {
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

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>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      margin: 100px 0;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
</html>

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

解决方案：触发bfc

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      margin: 100px 0;
     
    }
    .box {
       overflow: scroll;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
  <div class="box">
    <div class="content"></div>
  </div>
</body>
</html>

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>Document</title>
  <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>213</h1>
</body>
</html>

5.3.3-浮动覆盖

由于浮动导致盒子被覆盖

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 500px;
      height: 500px;
      background-color: hotpink;
      float: left;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

由于浮动导致盒子被覆盖

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 500px;
      height: 500px;
      background-color: hotpink;
      float: left;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>