【整理分享】75道前端面试CSS中的高频考点-编程学习网

1. box-sizing 属性值有什么作用？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content部分的高/宽

【学习视频分享：css视频教程、web前端】

2. absolute 绝对定位，是相对于谁的定位？

CSS position属性用于指定一个元素在文档中的定位方式。

absolute 的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素进行定位，确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并。

3. 行内元素和块级元素有什么区别？

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。

块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

区别：

是否另起一行：认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
是否可设置宽高：块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置 width, height 无效。
是否可设置内外边距：块级元素都可，行内元素的水平方向的 padding-left/right, margin-left/right 都产生边距效果，但是竖直方向的 padding-top/bottom, margin-top/bottom 都不会产生边距效果。（也就是水平方向有效，竖直方向无效）
是否包含对方：块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

4. 常见的行内元素和块级元素有哪些？

1、常见的行内元素

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img>

2、常见的块级元素

<div>、<p>、<li>、<h1> ~ <h6>、<form>、<header>、<hr>、<ol>、<ul>、<article>、<aside>、<dd>、<dl>

5. 如何检测浏览器所支持的最小字体大小？

可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持。

6. CSS中的 "flex:1;" 是什么意思？

flex 是 flex-grow, flex-shrink 和 flex-basis的简写。

除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式：

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }

当 flex 取值为 0 时，对应的三个值分别为 0 1 0%

.item {flex: 0;}
.item {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

55. font-weight 的特殊性？

如果使用数值作为font-weight属性值，必须是100～900的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

56. text-indent 的特殊性？

（1）text-indent 仅对第一行内联盒子内容有效。

（2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent值无效，如果计算值 inline-block/inline-table 则会生效。

（3）<input>标签按钮 text-indent 值无效。

（4）<button>标签按钮 text-indent 值有效。

（5）text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。

57. 使用 rem 布局的优缺点？

优点：在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

缺点：

（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。

（2）使用iframe引用也会出现问题。

（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。

58. 什么是首选最小宽度？

“首选最小宽度”，指的是元素最适合的最小宽度。东亚文字（如中文）最小宽度为每个汉字的宽度。西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS中的word-break:break-all。

59. 为什么 height:100%会无效？

对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。

原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto，所以无法参与计算。

使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。

60. min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

（1）max-width 会覆盖 width，即使 width 是行类样式或者设置了 !important。

（2）min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候。

61. 说说什么是内联盒模型？

（1）内容区域（content area）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

1. 下面代码中，p标签的背景色是什么？

<style type="text/css">
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div id="parent">
     <div class="a b c d e f g h i j k">
         <p>xxxx</p>
     </div>
</div>

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。所以本题的分析思路是：

先比较高权重位，即第一个样式的高权重为 #god = 100
第二个样式的高权重为 #god + #text = 200
100 < 200
所以最终计算结果是取 width: 250px;
若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div class="container">
    <div style="height: 100px"></div>
    <div style="min-height: 10px"></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

Flex 布局会默认：

把所有子项变成水平排列。
默认不自动换行。
让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

3. 如何使用 CSS 画一个三角形

.box {
   width: 0;
   height: 0;
   border-style:solid;
   border-width: 0 50px 50px;
   border-color: transparent transparent #d9534f;
}

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
  </div>

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: '';
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div class="item">
    <span class="label" >哈哈哈</span>：
    <span class="value">哈哈哈</span>
  </div>

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

   //scss
  .item {
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          min-width: 100px;
          text-align: justify;
          text-align-last: justify;
      }
      .value {
          padding-right: 10px;
      }
  }

6. 使用 CSS 实现一个无限循环动画

  <style type="text/css">
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image class="anima" mode="widthFix" @click="nav" src="./1.jpg"></image>

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      
      overflow: hidden;           
      
      text-overflow: ellipsis;   
      
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      
      display: -webkit-box;
      
      -webkit-line-clamp: 3;
      
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>

<body>
    <div class="box">
        <div class="small">small</div>
    </div>
</body>

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

5. 使用flex