欢迎大家加入高热度网，网站开发、小程序、技术支持和商务合作可联系： 站长邮箱：admin@gaoredu.com 站长微信：red_tea_v2(备注来意)

web前端经典面试题_最新CSS前端面试题_CSS知识点（基础，布局，特效，动画）最全总结

123次阅读
没有评论

共计 24442 个字符，预计需要花费 62 分钟才能阅读完成。

HTML，CSS，JavaScript 是前端面试中非常重要的一方面，本文总结了前端面试中 CSS 常考的 6 大知识点，帮助你在求职面试中快速梳理和建立起来 CSS 的知识体系和架构。

web 前端经典面试题_最新 CSS 前端面试题_CSS 知识点（基础，布局，特效，动画）最全总结

一、CSS 基础

1.CSS 样式（选择器）的优先级？

1.1 权重的计算规则

  1. 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6 支持上有些 bug）。
  2. 第一等：内联样式，如：style="color:red;"，权值为 1000.（该方法会造成 css 难以管理，所以不推荐使用）
  3. 第二等：ID 选择器，如：#header，权值为 0100.
  4. 第三等：类选择器、如：.bar，权值为 0010.
  5. 第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为 0001.
  6. 通配符，子选择器，相邻选择器等。如 *，>,+, 权值为 0000.
  7. 继承的样式没有权值。

CSS 选择器的优先级：!important > 行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 其他

1.2 实际案例

<style>
    a{color: yellow;} /* 权值：0,0,0,1*/
    div a{color: green;} /* 权值：0,0,0,2*/
    .demo a{color: black;} /* 权值：0,0,1,1*/
    .demo input[type="text"]{color: blue;} /* 权值：0,0,2,1*/
    .demo *[type="text"]{color: grey;} /* 权值：0,0,2,0*/
    #demo a{color: orange;} /* 权值：0,1,0,1*/
    div#demo a{color: red;} /* 权值：0,1,0,2*/
</style>

<body>
    <a href=""> 第一条应该是黄色 </a> <!- 适用第 1 行规则 ->
    <div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!- 适用第 4、5 行规则，第 4 行优先级高 ->
    <a href=""> 第三条应该是黑色 </a><!- 适用第 2、3 行规则，第 3 行优先级高 ->
    </div>
    <div id="demo">
    <a href=""> 第四条应该是红色 </a><!- 适用第 5、6 行规则，第 6 行优先级高 ->
    </div>
</body>

2. 雪碧图的作用？

减少 HTTP 的请求次数，提高加载的性能
在一些情况下可以减少图片的大小
关键在于对 background-position 概念的理解和使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 购物车特效 </title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .select{
            margin: 0 auto;
            display: block;
            width: 1000px;
            height: 35px;
            background-color:#F5FFFA;
        }
        div{
            width: 42px;
            height: 34px;
            background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -8px -335px;
        }
        div:hover{background-image: url(amazon-sprite_.png);
            background-repeat: no-repeat;
            background-position: -55px -335px;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target='_blank' class="select">
        <div></div>

    </a>
</body>
</html>

3. 自定义字体的使用场景？

宣传 / 品牌 /banner 等固定文案
字体图标中使用

<style>
@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/ 字体名称.eot');
     src:url('../font/ 字体名称.woff') format('woff'),
         url('../font/ 字体名称.ttf') format('truetype'),
         url('../font/ 字体名称.svg') format('svg');
}
/* 使用方法：html 中的代码中加一个 h1 或者其他的，里面写你自己想要的特殊文字 */
h1{
    font-size:36px; 
    color:#ccc;
    font-family: "字体名称随便起";
}

</style>

4.Base64 的使用？

4.1 概念

Base64 就是一种基于 64 个可见字符 (26 个大写字母，26 个小写字母，10 个数字，1 个 +，一个 / 刚好 64 个字符) 来表示二进制数据的表示方法。

扩展：不可见字符其实并不是不显示，只是这些字符在屏幕上显示不出来，比如：换行符、回车、退格...... 字符。

Base64 字符表中的字符原本用 6 个 bit 就可以表示，现在前面添加 2 个 0，变为 8 个 bit，会造成一定的浪费。因此，Base64 编码之后的文本，要比原文大约三分之一

4.2 原理

  • 第一步，将待转换的字符串每三个字节分为一组，每个字节占 8bit，那么共有 24 个二进制位。
  • 第二步，将上面的 24 个二进制位每 6 个一组，共分为 4 组。
  • 第三步，在每组前面添加两个 0，每组由 6 个变为 8 个二进制位，总共 32 个二进制位，即四个字节。
  • 第四步，根据 Base64 编码对照表（见下图）获得对应的值。

[!NOTE]
两个字节：两个字节共 16 个二进制位，依旧按照规则进行分组。此时总共 16 个二进制位，每 6 个一组，则第三组缺少 2 位，用 0 补齐，得到三个 Base64 编码，第四组完全没有数据则用“=”补上。因此，上图中“BC”转换之后为“QKM=”；
一个字节：一个字节共 8 个二进制位，依旧按照规则进行分组。此时共 8 个二进制位，每 6 个一组，则第二组缺少 4 位，用 0 补齐，得到两个 Base64 编码，而后面两组没有对应数据，都用“=”补上。因此，上图中“A”转换之后为“QQ==”；

4.3 作用

  • 用于减少 HTTP 请求
  • 适用于小图片
  • base64 编码图片之后的体积约为原图的 4 /3

5. 伪类和伪元素的区别？

  • 伪元素是真的有元素
  • 前者是单冒号，后者是双冒号
<style>
li:first-child {
    height: 20px;
    width: 100px;
    background-color: #139aff;
}
li:last-child {
    height: 60px;
    width: 100px;
    background-color: #89ff56;
    line-height: 60px;
}
p:first-of-type {background-color:  red;}
p:last-of-type {background-color:deeppink;}

/* 每个 p 标签之前新增一个 Hello 文本 */
.container p::before {content: 'Hello';}
.container p::after {content: 'Thanks';}
.container p::first-letter {font-size: 32px;}
.container p::first-line {background-color: #f1ffad;}

/* 所有选中的元素会变色 */
.container p::selection {
    background-color: #1025ff;
    color: red;
}
</style>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
<div>
    <h1>h1 文本 </h1>
    <p>p 文本 1 </p>
    <p>p 文本 2 </p>
    <p>p 文本 3 </p>
    <p>p 文本 4 </p>
</div>

<div class="container">
    <p> css1 </p>
    <p> css2 </p>
    <p> css3 </p>
    <p> 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素, 我在学伪元素 </p>
</div>
</body>
</html>

6. 如何美化 CheckBox？

[!NOTE]

  1. label[for]和 id
  2. 隐藏原生的 input
  3. :checked + label 选择器
<style>
#value1{display: none;}
#value1:checked+label{
    color:blue;
    background: #4cda60;
}
#value1:checked+label:before{left:31px;}
#value1+label{
    cursor: pointer;
    color:red;
    display: block;
    width:60px;
    height: 30px;
    background: #fafbfa;
    border-radius: 15px;
    position: relative;
    box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);
    transition: background 0.1s;
    -webkit-transition: background 0.1s;
    -moz-transition: background 0.1s;
    -o-transition: background 0.1s;
}
#value1+label:before{
    content:'';
    position: absolute;
    background: #fff;
    top:1px;
    left:1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);
    transition: left 0.1s;
    -webkit-transition: left 0.1s;
    -moz-transition: left 0.1s;
    -o-transition: left 0.1s;
}
</style>
<body>
    <input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>
    <label for="value1"></label>
</body>

二、CSS 布局

1. 实现两栏 / 三栏布局的方法?

  1. 表格布局
  2. float + margin 布局
  3. inline-block 布局
  4. flexbox 布局（兼容性的问题）

1.1 基础布局

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .layout {margin-top: 10px;}
    .layout div{min-height: 100px;}
</style>
<body>
  <!--1. 浮动的方式来实现布局 -->
  <section class="layout float">
      <style>
          .layout.float .left {
              float: left;
              width: 300px;
              background-color: #48adff;
          }
          .layout.float .main {background-color: #ff4344;}
      </style>
      <article class="left-main">
          <div class="left"></div>
          <div class="main">
              <h1> 浮动两栏布局 </h1>
              <p> 两栏布局的中间部分 </p>
              <p> 两栏布局的中间部分 </p>
          </div>
      </article>
  </section>

  <!--2. 定位的方式来实现布局 -->
  <section class="layout absolute">
      <style>
          .layout.absolute .left-main {width: 100%;}
          .layout.absolute .left {
              left : 0;
              width: 300px;
              background-color: #48adff;
              position: absolute;
          }
          .layout.absolute .main {
              /* 默认是以正常文档流的方式来展现的 */
              background-color: #ff4344;
              margin-left: 300px;
              right: 0;
          }
      </style>
      <article class="left-main">
          <div class="left"></div>
          <div class="main">
              <h1> 绝对定位两栏布局 </h1>
              <p> 两栏布局的中间部分 </p>
              <p> 两栏布局的中间部分 </p>
          </div>
      </article>
  </section>

  <!--3.flex 布局的实现 -->
  <section class="layout flex">
      <style>
          .layout .left-main {display: flex;}
          .layout .left {
              width: 300px;
              background-color: #48adff;
          }
          .layout .main {
              flex: 1;
              background-color: #ff4344;
          }
      </style>
      <article class="left-main">
          <div class="left"></div>
          <div class="main">
              <h1>flex 两栏布局 </h1>
              <p> 两栏布局的中间部分 </p>
              <p> 两栏布局的中间部分 </p>
          </div>
      </article>
  </section>

  <!--4.table 布局的实现 -->
  <section class="layout table">
      <style>
          .layout .left-main {
              display: table;
              width: 100%;
          }
          .layout .left {
              display : table-cell;
              width: 300px;
              background-color: #48adff;
          }
          .layout .main {background-color: #ff255f;}
      </style>
      <article class="left-main">
          <div class="left"></div>
          <div class="main">
              <h1>table 两栏布局 </h1>
              <p> 两栏布局的中间部分 </p>
              <p> 两栏布局的中间部分 </p>
          </div>
      </article>
  </section>

  <!--5.grid 布局 -->
  <section class="layout grid">
      <style>
          .layout.grid .left-main {display: grid;}
          .layout.grid .left-main {
              grid-template-rows : 100px;
              /* 按照顺序指定盒子的宽度 */
              grid-template-columns : 300px  auto;
          }
          .layout.grid .left {background-color: #48adff;}
          .layout.grid .main {background-color: #ff4344;}
      </style>
      <article class="left-main">
          <div class="left"></div>
          <div class="main">
              <h1>grid 两栏布局 </h1>
              <p> 两栏布局的中间部分 </p>
              <p> 两栏布局的中间部分 </p>
          </div>
      </article>
  </section>
</body>

1.2 圣杯布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title> 实现三栏水平布局之圣杯布局 </title>
    <style type="text/css">
      /* 基本样式 */
      .left, .right, .main {min-height: 300px;}
      .left {
        width: 200px;
        background-color:thistle;
      }
      .main {background-color: #999;}
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 圣杯布局关键代码 */
      .left, .main, .right {
        float: left;
        position: relative;
      }
      .main {width: 100%;}
      .container {
        padding-left: 200px;
        padding-right: 300px;
      }
      .left {
        margin-left: -100%;
        left: -200px;
      }
      .right {
        margin-left: -300px;
        right: -300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main">main</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

1.3 双飞翼布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 双飞翼布局 </title>
    <style>
      .left,
      .right,
      .main {min-height: 200px;}
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {background: #999;}
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {float: left;}
      .main {width: 100%;}
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {margin-left: -100%;}
      .right {margin-left: -300px;}
    </style>
  </head>
  <body>
    <div class="main"><div class="main-inner"> 中心区 </div></div>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>

2.absolute/fixed/static/sticky 定位?

  1. 前者相对于最近的 absolute/relative
  2. 后者相对于屏幕进行定位
  3. fixed 是相对于屏幕的可视区域的，也会直接脱离于文档流独立存在的
  4. 元素未滚动，在当前可视区域他的 top 值不生效，只有 margin 生效，滚动起来后 margin 失效，top 值生效
<style type="text/css">
  p{
  font-size:11pt;
  color:#363636;
  text-indent:2em;
  }
  .parent{
  width:500px;
  height:150px;
  margin-top:20px;
  margin-left:20px;
  border:solid 1px #555555;
  background:#aaaaaa;
  }
  .parent div{
  width:100px;
  height:80px;
  float:left;
  background:#708090;
  border:dashed 1px #008B8B;
  font-size:12pt;
  font-weight:bold;
  color:#104E8B;
  }
</style>
</head>
<body>
  <!-- 相对定位!-->
  <h2>relative</h2>
  <p> 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。</p>
  <div class="parent">
  <div>child 1</div>
  <div style="position:relative;left:20px;top:20px;">child 2</div>
  <div>child 3</div>
  </div>

<!-- 绝对定位!-->
<h2>absolute</h2>
<p> 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。对于定位的主要问题是要记住每种定位的意义。</p>
<p> 绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。所以如果要设定元素与其父元素的绝对位置定位就必须设定父元素的定位。</p>
<p> 注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。</p>
<div class="parent" style="position:relative;"<!-- 如果该处不定位，那么 child5 框的定位是相对于最初的包含块!-->>
<div>child 4</div>
<div style="position:absolute;left:20px;top:20px;">child 5</div>
<div>child 6</div>
</div>

<!-- 相对定位!-->
<h2>fixed</h2>
<p> 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。</p>
<div class="parent">
<div>child 7</div>
<div style="position:fixed;right:20px;top:20px;">child 8</div>
<div>child 9</div>
</div>

<!-- 相对定位!-->
<h2>static</h2>
<p> 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。</p>
<div class="parent">
<div>child 10</div>
<div style="position:static;right:20px;top:20px;">child 11</div>
<div>child 12</div>
</div>
</body>

3. 什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？

<style>
    .father-green {
        width:500px;
        height:300px;
        background-color:green;
    }
    .son-red {
        width:200px;
        height:100px;
        background-color:red;
        display:inline-block;
    }
    .subson-yellow {
        height:50px;
        width:200px;
        background-color: yellow;

    }
    .son-purple {
        width: 200px;
        height:100px;
        background-color:purple;
        display:inline-block;
        margin-left:-50px;
    }
    .mather-pink {
        width: 300px;
        height:100px;
        background-color:pink;
    }
    .daughter-blue {
        width:100px;
        height:50px;
        background-color:blue;
        margin-top:-20px;
    }
</style>
<body>
    <div class="father-green">
        <div class="son-red">
            <div class="subson-yellow">
                我是孙子辈的我是孙子辈的我是孙子辈的
            </div>
        </div>

        <div class="son-purple">
            我是第二个子元素
        </div>
    </div>
    <div class="mather-pink"><div class="daughter-blue">daughter-blue</div>
    </div>
</body>

3.1 形成层叠上下文的方法？

  • 根元素
  • position 值为 absolute|relative，且 z-index 值不为 auto
  • position 值为 fixed|sticky
  • z-index 值不为 auto 的 flex 元素，即：父元素 display:flex|inline-flex
  • opacity 属性值小于 1 的元素
  • transform 属性值不为 none 的元素
  • mix-blend-mode 属性值不为 normal 的元素
  • filter、perspective、clip-path、mask、mask-image、mask-border、motion-path 值不为 none 的元素
  • perspective 值不为 none 的元素
  • isolation 属性被设置为 isolate 的元素
  • will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
  • -webkit-overflow-scrolling 属性被设置 touch 的元素

[NOTE]

  • 层叠上下文可以包含在其他层叠上下文中，并且一起组建了一个有层级的层叠上下文
  • 每个层叠上下文完全独立于它的兄弟元素，当处理层叠时只考虑子元素，这里类似于 BFC
  • 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠

3.2 CSS 层叠上下优先级

  • 1. 形成堆叠上下文环境的元素的背景与边框
  • 2. 拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
  • 3. 正常流式布局，非 inline-block，无 position 定位（static 除外）的子元素
  • 4. 无 position 定位（static 除外）的 float 浮动元素
  • 5. 正常流式布局，inline-block 元素，无 position 定位（static 除外）的子元素（包括 display:table 和 display:inline）
  • 6. 拥有 z-index:0 的子堆叠上下文元素
  • 7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

3.3 层叠上下文的堆叠顺序？

[NOTE]
总结：层叠上下文（border/background）< 负 z -index < block 块状盒子 < 浮动的盒子 < inline/inline-block 水平盒子 < z-index:auto 或者 z-index:0 < 正 z -index（定位并设定了正的 z -index 值，z-index 值越大 层级越高）

4. 如何解决 inline-block 的间隙问题？

4.1 字符间距问题

<style>
*{
        margin: 0;
        padding: 0;
    }
    ul{list-style: none;}
    li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;    
    }
</style>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

4.2 解决方法

  • 1. 解决方法 1：直接删除换行符（IE1 像素残留）
  • 2. 设置父元素的 font-size 为 0，在子元素重新设置字体大小（低版本 safari 兼容性）
  • 3. 父元素 设置 font-size：0；letter-spacing：-3px，子元素重新设置 font-size（推荐方案）

5.BFC 是什么？如何清除浮动？

BFC：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 overflow 值不为“visiable”的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。它是指一个独立的块级渲染区域，只有 Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关

5.1 如何触发 BFC?

  • float 的值不为 none
  • overflow 的值不为 visible
  • display 的值为 inline-block、table-cell、table-caption
  • position 的值为 absolute 或 fixed

5.2 BFC 布局规则

  1. 内部的 Box 会在垂直方向，一个接一个地放置。
  2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的margin 会发生重叠（高频考点）
  3. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC 的区域不会与 float box 重叠。
  5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算 BFC 的高度时，浮动元素也参与计算

5.3 如何清除浮动？

  1. 原因：浮动的元素不会占据父元素的布局空间（父元素布局不会管浮动元素）
  2. 清除方式：让盒子负责自己的布局：

5.3.1 添加额外标签

<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

5.3.2 父元素设置 overflow：hidden

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

5.3.3 使用:after 伪元素

<style type="text/css">
 .clearfix:after {  
   content: ".";
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
    }  
.clearfix {
  display: inline-block;
  *zoom:1;
  }  /* for IE/Mac */  
</style>
<!--[if IE]>
 <style type="text/css">
 .clearfix {zoom: 1;/* triggers hasLayout */  display: block;/* resets display for IE/Win */} </style>
<![endif]-->

5.3.4 双伪元素清除法(推荐)

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

6. 如何适配移动端？

6.1 viewport 进行缩放

<meta name="viewport" content="width=device-width,initial-scale=1">

6.2 使用 rem

rem 是什么(CSS3 新增)，初始值：1rem=16px？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位

[!NOTE]
rem(1rem = 16px) / viewport（固定宽度）/ media query（屏幕大小自适应）

6.3 设计上（响应式方法）

隐藏（移动端隐藏元素）折行（横排变纵排）自适应（留下自适应的空间）（media query）

6.4 固定宽度做法

定宽布局（版心）

7.em 和 rem 的区别？

  1. rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
  2. em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位

8. 垂直居中的 6 中实现方式？

8.1 方法一：基于视口的垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 垂直居中 </title>
  </head>
  <style>
    .wrapper {
      overflow: hidden;
      width: 1000px;
      height: 500px;
      background: #999;
    }
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      /* 1vh = 1% * 视口高度 */
      margin: 50vh auto;
      transform: translateY(-50%);
    }

  </style>
  <body>
    <div class="wrapper">
      <div class="center">
        基于视口的垂直居中 <br />
        不要求原生有固定的宽高。<br />
        但是这种居中是在整个页面窗口内居中，不是基于父元素 <br />

      </div>
    </div>
  </body>
</html>

8.2 方法二：定宽居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 垂直居中 </title>
  </head>
  <style>
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -9rem;
      margin-top: -5rem;
    }
  </style>
  <body>
    <div class="center">
        要求原生有固定的宽高。<br/>
        position: absolute;<br/>
        top 和 left 为 50%;<br/>
        margin 上为高的一半 <br/>
        margin 左为宽的一半 <br/>
    </div>

  </body>
</html>

8.3 方法三：calc 居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 垂直居中 </title>
  </head>
  <style>
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      position: absolute;
      top: calc(50% - 5em);
      left: calc(50% - 9em);
    }
  </style>
  <body>
    <div class="center">
        要求原生有固定的宽高。<br/>
        position: absolute;<br/>
        top 为 calc(50% 剪 一半高)
        left 为 calc(50% 剪 一半宽)
    </div>

  </body>
</html>

8.4 方法四：transform 居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 垂直居中 </title>
  </head>
  <style>
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="center">
        不要求原生有固定的宽高。<br/>
        position: absolute;<br/>
        top 和 left 为 50%;<br/>
        transform: translate(-50%, -50%);
    </div>

  </body>
</html>

8.5 方法五：flex 居中方法 1 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 垂直居中 </title>
  </head>
  <style>
    .wrapper {
      width: 1000px;
      height: 600px;
      background: #999;

      display: flex;
    }
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      margin: auto;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
        使用 flex 居中 <br/>
        父元素 display: flex; <br/>
        居中块：margin: auto;
      </div>
    </div>
  </body>
</html>

8.6 方法六: flex 居中方法 2 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 垂直居中 </title>
  </head>
  <style>
    .wrapper {
      width: 1000px;
      height: 600px;
      background: #999;

      display: flex;
      /* 盒子横轴的对齐方式 */
      justify-content: center;
      /* 盒子纵轴的对齐方式 */
      align-items: center;
    }
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
        使用 flex 居中 <br/>
        父元素 display: flex; <br/>
        justify-content: center;<br/>
        align-items: center;<br/>
      </div>
    </div>
  </body>
</html>

9. 水平居中的 4 种实现方式？

9.1 方法一：text-align 的 center 属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 水平元素居中 </title>
  </head>
  <style>
    .wrapper {
      text-align: center;
      height: 1000px;
    }
    .center {
      display: inline-block;
      width: 500px;
      height: 200px;

      background: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center"> 如果需要居中的元素为常规流中 inline / inline-block 元素，为父元素设置 text-align: center;</div>
    </div>
  </body>
</html>

9.2 方法二：margin 的 auto 属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 水平元素居中 </title>
  </head>
  <style>
    .wrapper {
      width: 100%;
      height: 500px;

      text-align: center; /* 3 */
    }
    .center {
      width: 500px;
      text-align: left; 
      margin: 0 auto; 

      background-color: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
          父元素上设置 text-align: center;<br />
          居中元素上 margin 为 auto。</div>
    </div>
  </body>
</html>

9.3 方法三：绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 水平元素居中 </title>
  </head>
  <style>
    .wrapper {
      width: 80%;
      height: 500px;
      background: #888;

      position: relative;
    }
    .center {
      width: 500px;
      position: absolute;
      left: 50%;
      margin-left: -250px;

      background-color: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center"> 如果元素 positon: absolute; 那么 0）设置父元素 postion: relative 1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以 -1</div>
    </div>
  </body>
</html>

9.4 方法四：相对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title> 水平元素居中 </title>
  </head>
  <style>
    .wrapper {
      width: 80%;
      height: 500px;
      background: #888;
    }
    .center {
      width: 500px;
      position: relative;
      left: 50%;
      margin-left: -250px;

      background-color: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center"> 如果元素 positon: relative。那么 1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以 -1</div>
    </div>
  </body>
</html>

10 居中问题要点总结

10.1 被居中元素宽高固定

10.1.1 绝对定位 +margin

top 和 left 为 50%，margin 的 left 和 top 为自身宽高一半

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -9rem;
  margin-top: -5rem;
}

10.1.2 绝对定位 +calc

top 和 lefe 为父元素一半剪自身一半

.center {
  position: absolute;
  top: calc(50% - 5em);
  left: calc(50% - 9em);
}

10.2 被居中元素宽高不定

10.2.1 transform 变换

使用 CSS3 的 transform将位置在中心点平移自身宽高一半

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

10.2.2 flex 布局 +auto

.wrapper {display: flex;}
.center {margin: auto;}

10.2.3 flex 布局 +align

父元素指定子元素居中。

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

10.3 在浏览器窗口中居中

10.3.1 基于视口的垂直居中

不要求原生有固定的宽高，但是这种居中是在整个页面窗口内居中，不是基于父元素

.center{
  margin: 50vh auto;
  transform: translateY(-50%);
}

三、CSS 效果

1. 使用 div 绘制图形（三角形）？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-top {
            width: 0;
            height: 0;
            border-width: 0 40px 40px;
            border-style: solid;
            border-color: transparent transparent red;
        }

        .triangle-bottom {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 40px 0 40px;
            border-color: blueviolet transparent transparent transparent;
        }

        .triangle-left {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 0 40px 40px;
            border-color: transparent transparent transparent #89ff56;
        }

        .triangle-right {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px 40px 40px 0;
            border-color: transparent yellowgreen transparent;
        }

        /* 缺口的三角形 */
        .box{
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height:0;
            border: 6px solid transparent;
        }
        .b1{
            /* 底层的盒子三角形相当于全部是黑色的 */
            border-bottom-color:#000 ;
        }
        .b2{
            /* 上层的为白色覆盖 */
            border-bottom-color:#fff ;
        }
    </style>
</head>
<body>

<div class="triangle-top"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

<div class="box b1"></div>
<div class="box b2"></div>
</body>
</html>

2. 如何产生一个不占空间的边框?(box-sizing 属性)?

[NOTE]
知识点：IE 和标准盒子模型的异同点

  • 标准盒子模型：元素的 width 或 height=content 的 width 或 height；
  • IE 盒子模型：元素的 width 或 height=content 的 width 或 height+padding2+border2；
    /*IE 盒子模型：width_sum = margin + width*/
    .border-box-use {
        box-sizing : border-box;
        /* 通过 IE 的盒子模型设置出来之后，这个盒子内容区域的宽度实际只有 180px
            这里指定的 width 实际上是包含了 border 的宽度的
        */
        width: 200px;
        height: 200px;

        border: 10px solid #89ff56;
    }

    /* 标准盒子模型：width_sum = margin + width + padding + width*/
    .border-content-box-use {
        /* 设置为标准的盒子模型，默认值 */
        box-sizing: content-box;

        width: 200px;
        height: 200px;

        padding: 1px;
        border: 10px solid #ff255f;
    }

    .parent-box-inhrit {
        /* 设置当前的盒子模型是从父级盒子中继承，这里相当于是继承了 IE 的盒子模型 */
        box-sizing: inherit;
        width: 50px;
        height: 50px;
        background-color: #48adff;

        border: 1px solid #000;

        /* 对一个元素自身设置 padding，相当于是把盒子撑大了 */
        padding: 5px;
    }

2.1 使用 box-shadow 实现

/*box-shadow 制作边框 */
.box-shadow-border {
    width: 200px;
    height: 200px;
    /* 设置外阴影：x y 模糊区域 扩展区域 */
    box-shadow: 0 0 0 10px red , 0 0 0 10px blue;
}

2.2 使用 outline 实现

在元素边框边缘的外围绘制一条包围元素的线，包括 outline-color、outline-style、outline-width 三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。即不会增加额外的 width 或者 height。

.borner-no-space {
    width: 200px;
    height: 200px;
    outline: 10px solid red;
}

3. 如何实现 IOS 图标的圆角？

/*clip-path 的使用
            1. 对容器进行裁剪
            2. 常见集合图形
            3. 自定义路径
*/
.container-clippath {
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    background-image: url("bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    /* 开始进行区域裁剪 */
    /*clip-path: circle(50px at 100px 100px);*/
    /*clip-path: inset(100px 50px);*/
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /* 同时，也是支持 svg 矢量图的裁剪 */
}

.container-clippath:hover {clip-path: circle(80px at 100px 100px);
}

5. 说下背景图的居中显示 / 重复 / 改变大小?

background-position：背景图片相对容器原点的起始位置
background-repeat
background-size : cover/contain(设置大小)

/* 一个值: 这个值指定图片的宽度，那么第二个值为 auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px

/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 多重背景，请用逗号隔开，在 CSS 语法中凡语法后跟 * 或者 #，都是可以无限重复的，但是必须用逗号隔开。*/
background-size: auto, auto     /* 不要跟 background-size: auto auto 混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit

6. 如何平移 / 放大一个元素？如何实现 0.5px 的边框？

[!NOTE]
知识点:transform 的灵活使用

<style>
.custom-border{
    width:200px;
    margin:10px auto;
    height:100px;
    border:1px solid #333;
    background-color:#eee;
    padding:10px;
}
.scale-border{
    margin:10px auto;
    height:100px;
    position:relative;
    padding:10px;
    width: 200px;
}
.border{-webkit-transform:scale(0.5);
    transform:scale(0.5);
    position:absolute;
    border:1px solid #333;
    top:-50%;
    right:-50%;
    bottom:-50%;
    left:-50%;
    background-color:#eee;
}
.content{
    position:relative;
    z-index:2;
}
</style>

<body>
    <div class="custom-border border-color"> 边框宽度 1px</div>
    <div class="scale-border">
        <div class="content"> 边框宽度 0.5px</div>
        <div class="border border-color"></div>
    </div>
</body>
</html>

7. 如何实现 3D 效果（旋转的硬币）？

/* 1. 设置一个透视变换，相机距离图像的距离 */
/* perspective : 500px */
/* 2. 设置视觉查看的样式 */
/* transform-style : perspective-3d */
/* 3. 变换图像 */
/* transform : translate rotate */

/* 旋转的硬币效果 */
.money {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #48adff;
    border: 2px solid #000;

    /* 开启 3D 效果 */

    perspective: 500px;
    transform-style: preserve-3d;
    /*transform : rotateY(180deg);*/
    animation : rotate 2s linear infinite;
}

@keyframes rotate {
    from {transform : rotateY(0deg);
    }
    to {transform : rotateY(360deg);
    }
}

四、CSS 动画

1.CSS 动画的实现方式？

1. transition 补间动画

  • 位置 - 平移：left/right/margin/transform
  • 方位 - 旋转: transform
  • 大小 - 缩放：transform
  • 透明度：opacity
  • 线性变换：transform

2. keyframe 关键帧动画

3. 逐帧动画

2. 过渡动画和关键帧动画的区别？

  1. 过度动画需要有状态的变化
  2. 关键帧动画不需要状态的变化
  3. 关键帧动画的控制更加精细

3. 如何实现逐帧动画？

/* 逐帧动画（关键帧动画的一种特殊情形）*/
/* 1. 适用于无法补间的动画
    2. 猎豹奔跑的过程中实际上是有补间的
    3. 使用 steps(1)去掉补间
    4. 资源较大
*/
.container-every-frame {
 /* 1 的含义：这里需要设置每一个区间之间只有一个动画，那么就不会有补间了 */
    animation-timing-function: steps(1);
}

4.CSS 动画的性能怎么样？

  1. 性能不坏
  2. 部分情况下优于 JS
  3. JS 可以做到更好
  4. 部分高危属性：box-shadow(阴影效果的实现会消耗性能)

5. 使用 CSS3 动画实现一个轮播图效果？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 图片轮换 </title>
    <style type="text/css">
        div,img{
            margin: 0;
            padding: 0;
        }
        .div_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .div_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{left: 0;}
            5%{left: 0;}

            30%{left: -1000px;}
            35%{left: -1000px;}

            60%{left: -2000px;}
            65%{left: -2000px;}

            95%{left: -3000px;}
            100%{left: -3000px;}
        }
    </style>
</head>
<body>
    <div class="div_first">
        <div class="div_second">
            <img src="../../img/ 风景 1.jpg" alt="">
            <img src="../../img/ 风景 1.jpg" alt="">
            <img src="../../img/ 风景 1.jpg" alt="">
            <img src="../../img/ 风景 1.jpg" alt="">
        </div>
    </div>
</body>
</html>

以上就是高热度网整理的最新 Web 前端面试题，主要涉及到 CSS 的知识（基础，布局，特效，动画）居多，是目前整理的最新 CSS 前端面试题，欢迎大家在线学习。

正文完
高热度网微信公众号
post-qrcode
CSS Web 前端 高热度网
发表至： 黑科技教程
2020-03-22
 
高热度网
版权声明：本站原创文章，由 高热度网 2020-03-22发表，共计24442字。
转载说明：本站所有文章由高热度网全网首发，转载请注明出处。
9步骤完成Linux 环境安装Git环境
【免费】2020最新React全套视频教程,Redux视频教程,React源码深入解析前端视频教程下载
《Go实战仿百度云盘 实现企业级分布式云存储系统》视频教程免费下载
【图】来算算你可以退多少钱？个人所得税退税教程（亲测有效）
评论（没有评论）