# 概念

选择器权重

!important [Infinity]> 内联 [1000]>id [100]> 类、伪类、属性 [10]> 元素、伪元素 [1]> 通配符、组合 (后代、子代、兄弟)、伪类:not [0]

继承和非继承属性有哪些

非继承：

  1. display
  2. 文本属性：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
  3. 盒子模型：width、height、、max/min-height、max/min-width、margin、padding、border
  4. 背景属性：background 及其属性
  5. 定位属性：float、clear、position、top/left/right/bottom、overflow、clip、z-index
  6. 生成内容属性：content、counter-reset、counter-increment
  7. 轮廓样式属性：outline-style、outline-width、outline-color、outline
  8. 页面样式属性：size、page-break-before、page-break-after
  9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

继承：

  1. 字体系列属性：font-family、font-weight、font-size、font-style

文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、color

元素可见性：visibility

列表布局属性：list-style、包括 list-style-type、list-style-image 等

光标属性：cursor

BFC(还有IFC、FFC、GFC，自行百度)

BFC，块级格式化上下文，页面盒模型中一块独立的渲染区域，是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。但在同一个 BFC 中的两个邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。
创建方式

  1. html 根元素
  2. float 不为 none
  3. position 为 absolute、fixed 或 sticky
  4. overflow 不为 visible 或 clip
  5. display：table（table-cell、table-caption）或 inline-block 或 flow-root 或 list-item，flex（flex、inline-flex）或 grid（grid、inline-gird）的子元素
  6. contain 值为 layout 或 content 或 paint 或 strict
  7. column-span 为 all

display: flow-root，contain: layout 等是无副作用的，可在不影响已有布局的情况下触发 BFC。

解决：

  1. margin 塌陷
  2. 清除浮动
display：none、visible：hidden、opacity：0区别
  1. 完全隐藏 dom 元素，不占空间，无法触发事件，回流
  2. 隐藏 dom 元素但保留空间，无法触发事件，重绘
  3. 隐藏 dom 元素且保留空间，可以触发事件，重绘
link和@import区别
  1. link 属于 HTML 标签，而 @import 是 CSS 语句，所以 link 还可以引入网站图标等操作
  2. link 会在页面加载时同时加载，@import 则会等到其引入的 css 文件加载完成之后在加载当前 css 文件
  3. link 权重高于 @import
百分比机制
子元素父元素
width父级的 width
height父级的 height
margin(top,right,bottom,left)父级的 width
padding(top,right,bottom,left)父级的 width
border(top,right,bottom,left)父级的 width
position 为 absolute 时的 left,top,right,bottom元素的 width,height,width,height
position 为 relative 时的 left,top,right,bottom自身的 width,height,width,height
font-size父元素的 font-size
line-height自身的 font-size
transform(left,top)自身的 width,height
JS动画和CSS动画区别

JS 在主线程执行动画，而 CSS 在 compositor 线程执行

requestAnimationFrame的优点
  1. CPU 节能：使用 SetTinterval 实现的动画，当页面被隐藏或最小化时，SetTinterval 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费 CPU 资源。而 RequestAnimationFrame 则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的 RequestAnimationFrame 也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了 CPU 开销。
  2. 函数节流：在高频率事件 (resize, scroll 等) 中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame 可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每 16.7ms 刷新一次，多次绘制并不会在屏幕上体现出来。
  3. 减少 DOM 操作：requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒 60 帧。
为什么有时候⽤translate来改变位置⽽不是定位？

改变 transform 或 opacity 不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform 使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此 translate () 更⾼效，可以缩短平滑动画的绘制时间。 ⽽ translate 改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

常见的图片格式及使用场景
  1. BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常是较大的文件。
  2. GIF 是无损的、采用索引色的点阵图。采用 LZW 压缩算法进行编码。文件小，是 GIF 格式的优点，同时，GIF 格式还具有支持动画以及透明的优点。但是 GIF 格式仅支持 8bit 的索引色，所以 GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景。
  3. JPEG 是有损的、采用直接色的点阵图。JPEG 的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，与 GIF 相比，JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较 GIF 更大。
  4. PNG-8 是无损的、使用索引色的点阵图。PNG 是一种比较新的图片格式，PNG-8 是非常好的 GIF 格式替代者，在可能的情况下，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。除非需要动画的支持，否则没有理由使用 GIF 而不是 PNG-8。
  5. PNG-24 是无损的、使用直接色的点阵图。PNG-24 的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24 格式的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG-8 大得多。
  6. SVG 是无损的矢量图。SVG 是矢量图意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当放大 SVG 图片时，看到的还是线和曲线，而不会出现像素点。SVG 图片在放大时，不会失真，所以它适合用来绘制 Logo、Icon 等。
  7. WebP 是谷歌开发的一种新图片格式，WebP 是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为 Web 而生的，什么叫为 Web 而生呢？就是说相同质量的图片，WebP 具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有 Chrome 浏览器和 Opera 浏览器支持 WebP 格式，兼容性不太好。

在无损压缩的情况下，相同质量的 WebP 图片，文件大小要比 PNG 小 26%；
在有损压缩的情况下，具有相同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；
WebP 图片格式支持图片透明度，一个无损压缩的 WebP 图片，如果要支持透明度只需要 22% 的格外文件大小。

CSS性能优化
  1. 少写表达式
  2. 少写高级选择器、通配选择器
  3. 硬件加速
  4. requestAnimationFrame 动画

加载性能：

  1. css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。
  2. css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left; 执行效率会更高。
  3. 减少使用 @import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

  1. 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
  2. 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
  3. 避免使用通配规则，如 *{} 计算次数惊人，只对需要用到的元素进行选择。
  4. 尽量少的去对标签进行选择，而是用 class。
  5. 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
  6. 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

  1. 慎重使用高性能属性：浮动、定位。
  2. 尽量减少页面重排、重绘。
  3. 去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。
  4. 属性值为 0 时，不加单位。
  5. 属性值为浮动小数 0.**，可以省略小数点之前的 0。
  6. 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
  7. 不使用 @import 前缀，它会影响 css 的加载速度。
  8. 选择器优化嵌套，尽量避免层级过深。
  9. css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
  10. 正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
  11. 不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。

可维护性、健壮性：

  1. 将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高 css 的可维护性。
  2. 样式与内容分离：将 css 代码定义到外部 css 中。
z-index什么情况下会失效
  • 父元素 position 为 relative 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；
  • 元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；
  • 元素在设置 z-index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；
元素层叠顺序

元素层叠顺序

# 手写

解决文本溢出问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 单行 */
.overflow{
  overflow: hidden;            /* 溢出隐藏 */
  text-overflow: ellipsis;     /* 溢出用省略号显示 */
  white-space: nowrap;         /* 规定段落中的文本不进行换行 */
}
/* 多行 */
.overflow-multiline{
  overflow: hidden;            /* 溢出隐藏 */
  text-overflow: ellipsis;     /* 溢出用省略号显示 */
  display:-webkit-box;         /* 作为弹性伸缩盒子模型显示。 */
  -webkit-box-orient:vertical; /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
  -webkit-line-clamp:3;        /* 显示的行数 */
}

清除浮动
  1. 末尾空标签 style 设置 clear：both
  2. overflow：hidden
  3. 伪元素设置

1
2
3
4
5
6
7
::after{
  content:"";
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

实现一个dialog(可拖拽)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
class Dialog {
  constructor(text) {
    this.lastX = 0
    this.lastY = 0
    this.x
    this.y
    this.text = text || ''
    this.isMoving = false
    this.dialog
  }
  open() {
    const model = document.createElement('div')
    model.id='model'
    model.style = `
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:rgba(0,0,0,.3);
    display:flex;
    justify-content: center;
    align-items: center;`
    model.addEventListener('click',this.close.bind(this))
    document.body.appendChild(model)
    this.dialog = document.createElement('div')
    this.dialog.style = `
    padding:20px;
    background-color:white`
    this.dialog.innerText = this.text
    this.dialog.addEventListener('click',e=>{e.stopPropagation()})
    this.dialog.addEventListener('mousedown', this.handleMousedown.bind(this))
    document.addEventListener('mousemove', this.handleMousemove.bind(this))
    document.addEventListener('mouseup', this.handleMouseup.bind(this))
    model.appendChild(this.dialog)
  }
  close() {
    this.dialog.removeEventListener('mousedown',this.handleMousedown)
    document.removeEventListener('mousemove', this.handleMousemove)
    document.removeEventListener('mouseup',this.handleMouseup)
    document.body.removeChild(document.querySelector('#model')) 
  }
  handleMousedown(e) {
    this.isMoving = true
    this.x = e.clientX
    this.y = e.clientY
  }
  handleMousemove(e) {
    if (this.isMoving) {
      this.dialog.style.transform = `translate(${e.clientX - this.x + this.lastX}px,${e.clientY - this.y + this.lastY}px)`
    }
  }
  handleMouseup(e) {
    this.lastX = e.clientX - this.x + this.lastX
    this.lastY = e.clientY - this.y + this.lastY
    this.isMoving = false
  }
}
let dialog = new Dialog('Hello')
dialog.open()

阅读次数 次

请我喝[茶]~(￣▽￣)~*

EvilMoOd 微信支付

微信支付

EvilMoOd 支付宝

支付宝