前端面试题整理之CSS篇

  |     |   本文总阅读量:

前端面试题整理之CSS篇

此篇文章是对前端面试题CSS部分的整理,会不断进行更新

  • 请使用CSS实现一个持续的动画效果

    • 考察知识点

    • 属性 描述
      animation-name 规定需要绑定到选择器的 keyframe 名称
      animation-duration 规定完成动画所花费的时间,以秒或者毫秒计算
      animation-timing-function 规定动画的速度曲线
      animation-delay 规定在动画开始之前的延迟
      animation-iteration-count 规定动画应该播放的次数
      animation-direction 规定是否应该轮流反向播放动画

      实现代码

      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
      41
      42
      43
      <html>
      <head>
      <title>使用CSS实现一个持续的动画效果</title>
      <style>
      div {
      width: 100px;
      height: 100px;
      position: relative;
      animation: firstdiv 2s linear 1s infinite alternate;
      }
      @keyframes firstdiv {
      0% {
      top: 0;
      left: 0;
      background-color: greenyellow;
      }
      25% {
      top: 0;
      left: 100px;
      background-color: green;
      }
      50% {
      top: 100px;
      left: 100px;
      background-color: yellow;
      }
      75% {
      top: 100px;
      left: 0;
      background-color: gold;
      }
      100% {
      top: 0;
      left: 0;
      background-color: greenyellow;
      }
      }
      </style>
      </head>
      <body>
      <div></div>
      </body>
      </html>
    • 扩展:使用JS实现一个持续的动画效果

      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
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      <html>
      <head>
      <meta charset="utf-8" />
      <title>使用JS实现一个持续的动画效果</title>
      <style>
      #box {
      position: absolute;
      width: 300px;
      height: 300px;
      background-color: greenyellow;
      }
      </style>
      </head>
      <body>
      <div id="box"></div>

      <script>
      const box = document.getElementById("box");
      const end = 300,
      duration = 5;
      let start = 0;

      function move() {
      let precent =
      (((Date.now() - start) / 1000) % duration) / duration;
      box.style.left = precent * end + "px";
      }

      // 方式一
      // function startMove() {
      // start = Date.now();
      // setInterval(() => {
      // move();
      // }, 1000 / 60);
      // }
      // startMove();

      // 方式二
      // function startMove() {
      // setTimeout(() => {
      // move();
      // startMove();
      // });
      // }
      // start = Date.now();
      // startMove();

      // // 方式三
      function startMove() {
      requestAnimationFrame(() => {
      move();
      startMove();
      });
      }
      start = Date.now();
      startMove();
      </script>
      </body>
      </html>
  • 如何清除浮动

    清除浮动的方式有两种:

    • 使用 clear 属性清除浮动
    • 使父容器形成 BFC
    • 考查知识点:clear 属性BFC

    • 实现代码:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      /* 兼容IE6/7 */
      .floatfix{
      *zoom:1;
      }

      .floatfix:after{
      content:"";
      display:table;
      clear:both;
      }
    • 扩展:对BFC的理解

      • BFC:格式化上下文(Block Formatting Context),CSS2.1规范中定义
      • BFC的创建方法:
        • 根元素 或其他包含它的元素
        • 浮动 (元素的 float 不为 none)
        • 绝对定位元素 (元素的 position absolutefixed)
        • 行内块 inline-blocks (元素的 display: inline-block)
        • 表格单元格 (元素的 display: table-cell , HTML表格单元格的默认属性)
        • overflow 的值 不为 visible 的元素
        • 弹性盒 flex boxes (元素的 display 的值为 flexinline-flex)
        • 最常见的有三种:overflow: hiddenfloat: left/rightposition: absolute
  • CSS盒模型

    • 一个盒模型包含四个部分:margin(外边距)padding(内边距)border(边框)content(实际内容)

    • CSS盒模型分为两种:

      • 标准盒模型: width 属性的值与 contentwidth 相等
      • 标准盒模型
      • IE盒模型(怪异盒模型): width 属性的值为 contentwidth 加上两边 padding 的值再加上两边 border 的值
      • IE盒模型
    • CSS盒模型的切换:

      • 使用 CSS3 新增的 box-sizing 属性切换

      • 1
        2
        3
        4
        5
        /* W3C标准盒模型 */
        box-sizing: content-box

        /* IE盒模型 */
        box-sizing: border-box
  • CSS中四种定位方式的区别

    • static:默认值, 不会创建BFC
    • absolute:绝对定位。相对于最近的已定位的祖先元素,有已定位的祖先元素(position不是static),以最近的祖先元素为参考标准。如果没有已定位的祖先元素,则以 body 元素为偏移参照基准,完全脱离了标准文档流。*父元素一般设置为相对定位, 即 父相子绝 *
    • relative:相对定位。相对于自身原有位置进行偏移,仍处于标准文档流之中
    • fixed:固定定位。相对于视窗来定位,这意味着即使页面滚动,它还是会停留在相同的位置。一个固定定位的元素不会保留它原本在页面应有的空隙
  • 如何实现水平垂直居中

    • 水平居中——margin方式

      • 先决条件

        • 元素定宽
        • 元素为块级元素
      • 示例代码

        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
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>水平垂直居中demo</title>
        <style>
        * {
        margin: 0;
        padding: 0;
        box-sizing: content-box;
        }
        .container {
        width: 480px;
        height: 360px;
        background-color: hotpink;
        }
        .content {
        width: 120px;
        height: 120px;
        background-color: greenyellow;
        margin: 0 auto;
        }
        </style>
        </head>
        <body>
        <div class="container">
        <div class="content"></div>
        </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
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>水平垂直居中demo</title>
        <style>
        * {
        margin: 0;
        padding: 0;
        box-sizing: content-box;
        }
        .container {
        width: 480px;
        height: 360px;
        background-color: hotpink;
        position: relative;
        }
        .content {
        width: 120px;
        height: 120px;
        background-color: greenyellow;
        position: absolute;
        left: 50%;
        /* - width/2 - 120/2 = -60 */
        margin-left: -60px;
        }
        </style>
        </head>
        <body>
        <div class="container">
        <div class="content"></div>
        </div>
        </body>
        </html>
    • 水平居中——文字水平居中

      • 单行文字,直接使用 text-align: center
      • 多行文字看做一个块级元素,使用上边两种方法
    • 垂直居中——定位法

      • 先决条件

        • 元素定宽
      • 示例代码

        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
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>水平垂直居中demo</title>
        <style>
        * {
        margin: 0;
        padding: 0;
        box-sizing: content-box;
        }
        .container {
        width: 480px;
        height: 360px;
        background-color: hotpink;
        position: relative;
        }
        .content {
        width: 120px;
        height: 120px;
        background-color: greenyellow;
        position: absolute;
        top: 50%;
        /* - width/2 - 120/2 = -60 */
        margin-top: -60px;
        }
        </style>
        </head>
        <body>
        <div class="container">
        <div class="content"></div>
        </div>
        </body>
        </html>
    • 垂直居中——单行文本垂直居中

      • 将其 line-height 属性值设置为 父元素 height 的值

      • 示例代码

        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
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>水平垂直居中demo</title>
        <style>
        * {
        margin: 0;
        padding: 0;
        box-sizing: content-box;
        }

        .text {
        width: 400px;
        height: 300px;
        background-color: lightblue;
        }

        span {
        line-height: 300px;
        }
        </style>
        </head>
        <body>
        <div class="text">
        <span>我是单行文本</span>
        </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
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>水平垂直居中demo</title>
      <style>
      * {
      margin: 0;
      padding: 0;
      box-sizing: content-box;
      }
      .container {
      margin: 20px;
      width: 480px;
      height: 360px;
      background-color: hotpink;
      position: relative;
      }
      .content {
      width: 120px;
      height: 120px;
      background-color: greenyellow;
      position: absolute;
      left: 50%;
      top: 50%;
      /* - width/2 - 120/2 = -60 */
      margin-left: -60px;
      margin-top: -60px;
      }

      .text {
      margin: 20px;
      width: 480px;
      height: 300px;
      background-color: lightblue;
      text-align: center;
      }

      span {
      line-height: 300px;
      }
      </style>
      </head>
      <body>
      <div class="container">
      <div class="content"></div>
      </div>
      <div class="text">
      <span>我是单行文本</span>
      </div>
      </body>
      </html>
    • 水平垂直居中——Flexbox方式

      • 示例代码

        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
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>水平垂直居中demo</title>
        <style>
        * {
        margin: 0;
        padding: 0;
        box-sizing: content-box;
        }
        .container {
        margin: 20px;
        width: 480px;
        height: 360px;
        background-color: hotpink;
        display: flex;
        }
        .content {
        width: 120px;
        height: 120px;
        background-color: greenyellow;
        margin: auto;

        /* 让文本水平垂直居中 */
        display: flex;
        align-items: center;
        justify-content: center;
        }
        </style>
        </head>
        <body>
        <div class="container">
        <div class="content">
        <span>我是单行文本</span>
        </div>
        </div>
        </body>
        </html>

更新方式: 不断追加的方式进行文章的更新;文章的内容会越来越多。


赏作者一颗糖吧, 您的支持将鼓励我继续创作!



文章目录
  1. 1. 前端面试题整理之CSS篇
您是第 位小伙伴 | 本站总访问量 | 已经写了 22.6k 字啦

载入天数...载入时分秒...