日常笔记1

1.@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是：@support对于浏览器的版本也是有要求的，不是说所有的浏览器以及其所有的版本都是支持@support的。

2.calc() 函数用于动态计算长度值。
● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
● 任何长度值都可以使用calc()函数进行计算；
● calc()函数支持 “+”, “-”, “*”, “/” 运算；
● calc()函数使用标准的数学运算优先级规则；

3.当使用async或defer时，根据以下情况进行选择：
如果脚本独立且不依赖其他脚本或页面内容，且不影响首次渲染性能，可以选择使用async。
如果脚本需要在 DOM 构建完成后执行，或有其他脚本或页面内容的依赖关系，应选择defer。

4.浏览器如何渲染网页
概述：浏览器渲染一共有五步
（1）处理 HTML 并构建 DOM 树。
（2）处理 CSS构建 CSSOM 树。
（3）将 DOM 与 CSSOM 合并成一个渲染树。
（4）根据渲染树来布局，计算每个节点的位置。
（5）调用 GPU 图形处理器（Graphics Processing Unit）绘制，合成图层，显示在屏幕上

5.HTTPS和HTTP的区别主要如下：
（1）https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
（2）http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
（3）http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
（4）http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

6.px：绝对单位，其他的是相对单位
% ：相对于父元素的宽高比
em：相对于当前元素的font-size
rem：相对于根节点的font-size
vw：屏幕宽度的1%
vh：屏幕高度的1%
vmin：两者的最小值，vmax两者的最大值

7.link和@import的区别
（1）link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS(简易信息聚合) 等其他事务；@import属于 CSS 范畴，只能加载 CSS。
（2）link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。@import 会产生闪烁的问题
（3）link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
（4）link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。

8. src和href的区别
   src和href都是用来引用外部的资源，它们的区别如下：
   src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素 时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
   href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当 前⽂档的处理。 常用在a、link等标签上。

9.filter(滤镜)
filter: invert(0%~100%) 是从0到1的刻度，1是从白变黑。
filter: hue-rotate(0~360deg)色相反转 用于改变你元素的颜色，同时或多或少保持原本相同的色系。这个属性的值可以从0deg到360deg
filter: blur(-2px)模糊 如果没有设定值，则默认值是0；这个参数可设置css长度值，但不接受百分比值。
filter: brightness(150%)亮度 值是100%，图像无变化，超过100%，变亮，小于100%，变暗
filter: contrast(200%)对比度
filter: drop-shadow(50px 50px 5px tomato)阴影效果
filter: grayscale(100%)灰度
filter: saturate(150%)饱和度
filter: sepia(200%)深褐色

10.渐进增强和优雅降级之间的区别
渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
两者区别：
优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以 适应未来环境的需要；
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带