前端面试题整理之CSS篇

前端面试题整理之 CSS 篇

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

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

    • 考察知识点

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

      实现代码

      <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 实现一个持续的动画效果

      <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

    • 实现代码:

      /* 兼容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 属性切换

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

  • static:默认值, 不会创建 BFC

  • absolute:绝对定位。相对于最近的已定位的祖先元素,有已定位的祖先元素(position 不是 static),以最近的祖先元素为参考标准。如果没有已定位的祖先元素,则以 body 元素为偏移参照基准,完全脱离了标准文档流。*父元素一般设置为相对定位, 即 父相子绝 *

  • relative:相对定位。相对于自身原有位置进行偏移,仍处于标准文档流之中

  • fixed:固定定位。相对于视窗来定位,这意味着即使页面滚动,它还是会停留在相同的位置。一个固定定位的元素不会保留它原本在页面应有的空隙

  • 如何实现水平垂直居中

    • 水平居中——margin 方式

      • 先决条件

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

        <!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>
    • 水平居中——定位法

      • 先决条件

        • 元素定宽
      • 示例代码

        <!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
      • 多行文字看做一个块级元素,使用上边两种方法
    • 垂直居中——定位法

      • 先决条件

        • 元素定宽
      • 示例代码

        <!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 的值

      • 示例代码

        <!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>
    • 水平垂直居中完整示例

      <!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 方式

      • 示例代码

        <!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>

-

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


  转载请注明:

文章作者: Diviner
文章链接: http://www.diviner.site/archives/b12d3374.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Divinerの博客 !

评论
 上一篇
Hexo和Gitee搭建个人博客网站 Hexo和Gitee搭建个人博客网站
Hexo 和 Gitee 搭建个人博客网站前置环境搭建安装 Node.js 和 git 根据自己的操作系统下载对应的安装包,进行安装 NodeJS 下载地址 Git 下载地址 检查安装是否成功 打开终端,分别输入 node -v 和
下一篇 
Koa2快速入门上手 Koa2快速入门上手
Koa2 快速入门上手Koa2 快速开始 Koa2 路由 Koa2 快速开始 环境准备 由于 Koa 中使用的是 async/await 的语法,所有需要 NodeJS 的版本在 7.6.0 以上,注:7.6.0 开始完全支持 as
  目录