常见的CSS面试题（二）

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战。

H5新特性

新增语义化标签

  <header> 标记定义一个页面或一个区域的头部
  <nav> 标记定义导航链接
  <section> 标记定义一个区域
  <aside> 标记定义页面内容部分的侧边栏
  <article> 标记定义一篇文章
  <hgroup> 标记定义文件中一个区块的相关信息
  <figure> 标记定义一组媒体内容以及它们的标题
  <figcaption>标记定义 figure 元素的标题。
  <dialog> 标记定义一个对话框(会话框)类似微信
  <footer> 标记定义一个页面或一个区域的底部

什么是HTML语义化

  根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 为什么要语义化？

• 页面也能呈现出很好地内容结构、代码结构
• 有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文
• 屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标

写HTML代码时应注意什么

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（替换b/i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和- 般单元格要区分开，表头用th，单元格用td；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来

Input新增的type

• email
• url
• number
• range
• Date picker：
• Date —— 选取日、月、年
• Month —— 选取月、年
• Week —— 选取周和年
• Time —— 选取时间（小时和分钟）
• Datetime —— 选取时间、日、月、年（UTC 时间）
• Datetime-local —— 选取时间、日、月、年（本地时间）

表单属性

autocomplete：自动完成，适用于 <form> 标签，以及以下类型的 <input>

标签：text, search, url, telephone, email, password, datepickers, range, color。
用法：<form autocomplete="on“></form>或者单独在input中用off
autofocus：自动地获得焦点，适用于所有 <input> 标签的类型用法：<input autofocus="autofocus" />
multiple：可选择多个值，适用于<input>中type为email和file用法：<input type="file" multiple="multiple" />
placeholder：适用于<input>中type为：text, search, url, telephone, email, password
required：规定不能为空，适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file用法：<input type="text" required="required" />

Web Storage

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

不管是 localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

css3了解吗?主要用什么?animation，transition，translate，transform 这四个是干嘛的

transform

transform: translate(200px,50px); 元素较原先的位置，往右移动 200px，往下移动 50px

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 说明

• animation-name指定要绑定到选择器的关键帧的名称
• animation-duration动画指定需要多少秒或毫秒完成
• animation-timing-function设置动画将如何完成一个周期
• animation-delay设置动画在启动前的延迟间隔。
• animation-iteration-count定义动画的播放次数。
• animation-direction指定是否应该轮流反向播放动画。
• animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• animation-play-state指定动画是否正在运行或已暂停。
• initial设置属性为其默认值。 阅读关于 initial的介绍。
• inherit从父元素继承属性。 阅读关于 initinherital的介绍。

  div
  {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
  }

  @keyframes mymove
  {
    from {left:0px;}
    to {left:200px;}
  }

transition

transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。ss中配合:hover, :active等伪类使用,实现相应等动画效果。

过渡分为两个阶段：前进（forward）和反向（reverse），下面会用具体的例子来详细讲述这两个阶段。

• 只在非hover状态设置transition 该状态下设置的transition认为设置了反向状态的过渡动画，即鼠标移到元素上又离开时的动画，而此时前进状态和反向状态保持一致，也就是说鼠标移到和移开元素都有过渡动画。

.app {
  width: 300px;
  transition: all 3s linear .2s;
}

.app:hover {
  width: 100px;
}

• 只在hover状态下设置transition

该状态下设置的transition认为设置了前进状态的过渡动画，而此时反向状态是没有动画的。也就是说鼠标移到元素上会有动画，移出元素没有动画，元素宽度会瞬间还原。

.app {
  width: 300px;
}

.app:hover {
  width: 100;
  transition: all 3s linear .2s;
}

• 同时在hover和非hover状态下都设置transition 此时即设置了前进状态也设置了反向状态的动画，鼠标移到元素上动画持续1s,鼠标移出元素动画持续3s。

.app {
  width: 300px;
 transition: all 3s linear .2s;
}

.app:hover {
  width: 100;
  transition: all 1s linear .2s;
}

position的absolute与fixed共同点与不同点

• 1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明）

• 2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。定位为relative的元素，虽然可以脱离正常的文档流进行移动，但是其本身在文档流中占据的位置仍然保留。

  relative元素进行移动是相对于其本身原来位置进行移动，并且当它移动之后，它仍然占据着原来位置的空间

• 3、absolute：生成绝对定位的元素，相对于position属性定义为static之外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。定位为absolute的元素，也是脱离正常的文档流，并且其本身在文档流中占据的位置不再保留

• 4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

• 5、sticky：新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

  设置position:sticky同时给一个(top,bottom,right,left)之一即可 使用条件：

  1. 父元素不能overflow:hidden或者overflow:auto属性。
  2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
  3. 父元素的高度不能低于sticky元素的高度
  4. sticky元素仅在其父元素内生效

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

• display: none;

  DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监听； 性能：动态改变此属性时会引起重排，性能较差； 继承：不会被子元素继承，毕竟子类也不会被渲染； transition：transition 不支持 display。

• visibility: hidden;

  DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间； 事件监听：无法进行 DOM 事件监听； 性 能：动态改变此属性时会引起重绘，性能较高； 继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏； transition：visibility 会立即显示，隐藏时会延时

• opacity: 0;

  DOM 结构：透明度为 100%，元素隐藏，占据空间； 事件监听：可以进行 DOM 事件监听； 性 能：提升为合成层，不会触发重绘，性能较高； 继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏； transition：opacity 可以延时显示和隐藏

display: block;和display: inline;的区别

都是外部显示类型

块级元素

常见有div address article dl dd dt footer form hr header h1-h6 ol ul li p section table

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
• 元素的高度、宽度、行高以及顶和底边距都可设置。
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
• block元素转inline元素: display: inline;

行内元素

a abbr em i strong span br img label

• 元素从左到右流动布局.
• 元素的高度和宽度,以及顶部和底部边距不可设置.
• 元素的高度也就是它自身的建议行高
• 内联元素转block元素: display: block;

内联块级元素

常见内联块级元素
button input textarea img

• 和其他元素都在一行上, 左右布局.
• 元素的高度、宽度、行高以及顶和底边距都可设置.
• 相当于添加浮动float: left;, 但是不建议使用inline-block, 最好使用float加clearfix;

可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。
这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。
CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

• 典型的可替换元素

<iframe>
<video>
<embed>
<img>

• 仅在特定情况下被作为可替换元素处理

<option>
<audio>
<canvas>
<object>
<applet>

• img

<img> 是一个可替换元素。它的 display 属性的默认值是 inline，
但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，
使得它就像 inline-block 一样。你可以为  设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。
<img> 没有基线（baseline），这意味着，当在一个行内格式的上下文（an inline formatting context）中使用 vertical-align: baseline 时，图像的底部将会与容器的文字基线对齐。

display,float,position 的关系

• 如果display等于none，则用户端必须忽略position和float。在这种情况下，元素不产生盒子。
• 否则，如果position等于absolute，则display与float皆强制为none(list-item保持不变)。盒子的位置由边界偏移量确定。
• 否则，如果float不等于none或该元素是根元素，则display强制为block(list-item保持不变)。
• 否则，使用指定的display属性。

link与@import的区别

从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

加载顺序区别加载页面时，link标签引入的 CSS 被同时加载

@import引入的 CSS 将在页面加载完毕后被加载。

兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别

link标签作为 HTML 元素，不存在兼容性问题。

DOM可控性区别可以通过 JS 操作 DOM ，插入link标签来改变样式

由于DOM方法是基于文档的，无法使用@import的方式插入样式。

PNG,GIF,JPG 的区别及如何选

GIF

• 256色
• 无损，编辑 保存时候，不会损失。
• 支持简单动画。
• 支持boolean透明，也就是要么完全透明，要么不透明

JPEG

• millions of colors
• 有损压缩， 意味着每次编辑都会失去质量。
• 不支持透明。
• 适合照片，实际上很多相机使用的都是这个格式。

PNG

• 无损，其实PNG有好几种格式的，一般分为两类：PNG8和truecolor PNGs；

与GIF相比：

• 它通常会产生较小的文件大小。

• 它支持阿尔法（变量）透明度。

• 无动画支持

• 与JPEG相比：

  • 文件更大
  • 无损
  • 因此可以作为JPEG图片中间编辑的中转格式。

结论

• JPEG适合照片
• GIF适合动画
• PNG8适合其他任何种类——图表，buttons，背景，图表等等。

css开启GPU加速？开启GPU硬件加速可能触发的问题

目前，很多浏览器包括：Chrome、FireFox、Safari、IE9+ 以及最新版本的 Opera 都支持硬件加速；他们只会被使用在对 DOM 元素有益处的地方，例如：当 3D 变换的样式出现时会使用 GPU 加速：

.demo {
    -webkit-transform: translate3d(250px, 250px, 250px)
    rotate3d(250px, 250px, 250px, -120deg)
    scale3d(0.5, 0.5, 0.5);
}

采用 transform: translateZ(0) 在某种情况下，你可能不希望元素上进行 3D 变换，但是仍然可以利用 GPU 加速，这个时候我们可以通过一些简单的 CSS 属性来触发浏览器的 GPU 加速。即使是我们不采用 3D 动画也是开始使用 3D 渲染的。采用 transform: translateZ(0) 可以在现代桌面和移动端浏览器触发 GPU 加速：

.demo {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
transform: translateZ(0); 表示在浏览器的 Z 轴上移动。

在 Chrome 和 Safari 中，当使用 CSS 变化或动画时，我们可能会看到闪烁的效果，我们可以通过下面的 CSS 代码来解决：

.demo {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
backface-visibility: hidden; 表示隐藏被旋转的背面；
perspective: 1000; 定义 3D 元素距视图的距离

```html
采用 transform: translate3d(0, 0, 0)
另外一个不错的方法就是利用 CSS transform: translate3d(0, 0, 0) 来启动 GPU 加速：

```html
.demo {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

.isaax{
  position: relative;
  z-index: 1;  // 可以设大点，尽量设得比后面元素的z-index值高
}

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。

层叠上下文

元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。

• 触发条件

根层叠上下文(html)

position
css3属性
    - flex
    - transform
    - opacity
    - filter
    - will-change
    - -webkit-overflow-scrolling

层叠等级：层叠上下文在z轴上的排序

在同一层叠上下文中，层叠等级才有意义 z-index的优先级最高

less 中的 & 代表什么意思

• &可以当做父元素 比如看这个代码：里面的类名我随便写的，你自己写项目的时候可不要像我一样

  .box{
      .one{
          width: 100px;
          height: 200px;
          background-color: #1bc4fb;
      }
      .two{
          width: 300px;
          height: 200px;
          color: red;
          &.three{
              width: 360px;
              height: 360px;
          }
      }
  }
  
  编译后的css文件：
  .box .one {
    width: 100px;
    height: 200px;
    background-color: #1bc4fb;
  }
  .box .two {
    width: 300px;
    height: 200px;
    color: red;
  }
  .box .two.three {
    width: 360px;
    height: 360px;
  }
  

  你会发现&变成了.two （它的父元素）

• &可以改变选择器的顺序

  .box{
      width: 520px;
      height: 520px;
      content: 'test9988';
      color: red;
      .one{
          width: 100px;
          height: 200px;
          background-color: #3a84ff;
      }
      .two{
          width: 120px;
          height: 200px;
          color: #7a7a7a;
      }
      .three &{
          width: 666px;
          height: 520px;
          content: 'test';
      }
  }
  
  css代码：
  
  .box {
    width: 520px;
    height: 520px;
    content: 'test9988';
    color: red;
  }
  .box .one {
    width: 100px;
    height: 200px;
    background-color: #3a84ff;
  }
  .box .two {
    width: 120px;
    height: 200px;
    color: #7a7a7a;
  }
  .three .box {
    width: 666px;
    height: 520px;
    content: 'test';
  }
  /*# sourceMappingURL=test1.css.map */
  
  .box 跑到了.three的后面
  
  

• &会把所有的组合列出来，两两组合

  .box,.one,.two,.ning,.mu{
      width: 520px;
      height: 360px;
      background-color: #713145;
      & + &{
          color: #520;
      }
  }
  
  css代码：
  
  .box,
  .one,
  .two,
  .ning,
  .mu {
    width: 520px;
    height: 360px;
    background-color: #713145;
  }
  .box + .box,
  .box + .one,
  .box + .two,
  .box + .ning,
  .box + .mu,
  .one + .box,
  .one + .one,
  .one + .two,
  .one + .ning,
  .one + .mu,
  .two + .box,
  .two + .one,
  .two + .two,
  .two + .ning,
  .two + .mu,
  .ning + .box,
  .ning + .one,
  .ning + .two,
  .ning + .ning,
  .ning + .mu,
  .mu + .box,
  .mu + .one,
  .mu + .two,
  .mu + .ning,
  .mu + .mu {
    color: #520;
  }
  /*# sourceMappingURL=test1.css.map */
  

选择器优先级

选择器类型

对优先级没有影响的（可以理解为优先级非常低的）

• 通配选择符 (*)

• 关系选择符

    + 相邻兄弟选择器
    > 子选择器
    ~ 通用兄弟选择器
    ' ' 后代选择器
  

• :not() 否定伪类

对优先级有影响的（下面的排序优先级依次变大）

• 元素选择器(h1 p div)
• 伪元素 (::before::after)
• 类选择器 (.class1) 和 属性选择器 (a[title]img[title*=hello]) 两者优先级相同，声明在后面的会覆盖前面的
• 伪类选择器 (:hover)
• ID 选择器 (#demo)

其他影响最终结果的

- 内联样式 style="xxx" <a style="color:red;"></a>
- !important

!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器

<style>
  #a{font-size:12px}
  div p{ font-size:13px}
  div .c{font-size:14px}
  .a .b .c{font-size:15px}
  #b{font-size:16px}
</style>
<div id="a" class="a">
  <div class="b" id="b">
    <p id="c" class="c">I am here</p>
  </div>
</div>

请问标准模式下显示的字符会是多大的字体？css选择器的优先级规则是怎样的？ 答案：font-size:15px

重绘和重排

当Dom的变化影响到了元素的几何属性（宽和高等）——比如说修改了边框的宽度，或者是修改了高度，又或者给文章增加了内容导致元素的高度增加等，会引起浏览器进行重新计算元素的几何属性，同样，其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效。并重新构建渲染树，这个过程称为重排。完成重排之后，浏览器会重新绘制受影响的元素，这个过程被称为重绘。

并不是所有的Dom变化会影响元素的几何属性，例如，改变背景色，不会影响元素的几何属性，因此，这个时候是不会发生重排，仅仅会发生重绘，因为，元素的布局没有发生变化。重排和重绘的代价都是昂贵的操作，他们会导致浏览器的UI线程卡顿，因此尽可能避免这类操作。

经验

• 通常，CSS 并不是重点的考察领域，但这其实是由于现在国内业界对 CSS 的专注不够导致的，真正精通并专注于 CSS 的团队和人才并不多。因此如果能在 CSS 领域有自己的见解和经验，反而会为相当的加分和脱颖而出。