HTML和CSS基础系列（三）

伪类、伪元素的区别

举几个例子：

伪类：:link,:visited,:hove,:active,:focus,:disable,:first-child,:last-child,:nth-child(n)

伪元素：::after,::before,::first-letter,first-line,selection

1. 写法区别。双冒号代表伪元素，单冒号代表伪类。
2. 概念区别。伪类侧重丰富选择器的选择语法范围内元素的选择能力，伪元素侧重表达或者定义不在语法定义范围内的抽象元素。

css选择器优先级（权重问题）

！important > 行内样式 > ID选择器 > Class选择器 > 标签 > 通配符 > 继承 > 浏览器默认样式

css标准盒子和怪异盒子

W3C标准盒模型 IE怪异盒模型

标准盒模型下：盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。也就相当于css3中设置属性box-sizing:content-box。

怪异盒模型下：设置的width/height=盒子（content）的width/height+内边距padding+边框border宽度，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。也就相当于css3中设置属性box-sizing:border-box。

css提升性能的方式

1. 合并css文件
2. 减少css嵌套层级
3. 建立公共样式类，把相同样式提取出来
4. 减少通配符的使用
5. 用雪碧图
6. gzip压缩（关于gzip的原理：简单聊聊 GZIP 的压缩原理与日常应用）
7. 开启硬件加速，transform、opacity、filters等动画效果不会引起回流重绘
8. 使用文档片段DocumentFragment存储变化的元素，然后依次添加

可继承属性

可继承属性：颜色，文字，字体间距行高对齐方式，和列表的样式。

• 所有元素可继承：visibility和cursor。
• 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
• 终端块状元素可继承：text-indent和text-align。
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

继承让开发更容易，大大减小了CSS文件的体积。

注意：font-size是继承计算后的值。

visible:hidden和display:none有什么区别？在render tree 和 dom tree里面呢?

visibility: hidden：

• 将元素隐藏，但是在网页中该占的位置还是占着
• 在render tree里存在，在dom tree里也存在

display: none：

• 将元素的显示设为无，即在网页中不占任何的位置。
• 在render tree里不存在，在dom tree里存在

display：none会发生reflow（回流）；而visibility：hidden只会触发repaint（重绘）

window和document的区别 window.onload和document.ready的区别

• window对象表示浏览器中打开的窗口

• document对象代表整个 HTML 文档,可用来访问页面中的所有元素

• document对象是window对象的一部分，可通过window.document属性对其进行访问

• document.ready：文档结构加载完成。

• window.onload: 不仅仅要在结构和样式加载完，还要执行完所有的样式，图片这些资源文件，完全加载完才会触发Window.onload事件。

• document.ready在window.onload之前执行

h5新增结构元素和属性

• 语义化标签。如

  、

  、

  、

  、

  、

• 增强型表单。

  • 给input添加了多个输入类型，这些特性提供了更好的表单控制和验证。如color、url、time、date、datetime、email、tel、number、range、week
  • 新增表单属性：placeholder、pattern、required、min、max、step、autofocus、multiple、height、width

• 视频和音频。新增、

• 新增和svg

  两者区别：

  • SVG 是一种使用 XML 描述 2D 图形的语言。
  • Canvas 通过 JavaScript 来绘制 2D 图形。
  • SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  • 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
  • Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

• 拖放API

• Web Worker、Web Storage、WebSocket、

如何开启硬件加速

硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

一般使用3d效果来开启硬件加速，如添加transform：

.speed-up{
     
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

对于safari以及chrome，可能会在使用animation或者transition时出现闪烁的问题，可以使用以下的解决方法:

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

/**webkit上也可以用以下语句  **/
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

注意事项： 硬件加速最好只用在animation或者transform上。不要滥用硬件加速，因为这样会增加性能的消耗，如果滥用反而会使动画变得更加卡，这样就得不偿失了。

transform会引起回流吗

不会，transform引起的变化会交给GPU处理，开启硬件加速。

此外，opacity、filters这些动画也不会引起回流重绘。