关于css的基础知识点

1. calc, support, media各自的含义及用法？
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某 个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

2. css水平、垂直居中的写法，请至少写出4种？
水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

3.画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

4.标签的用法
label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

4.浏览器渲染页面的过程

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树结合CSSOM树结合，生成渲染树（Render Tree）
3. Layout（回流）:根据生成的渲染树，计算它们在设备视口（viewport）内的确切位置和大小，这个阶段是回流
4. Painting（重绘）: 根据渲染以及回流得到的几何信息，得到节点的绝对像素
5. Display：将像素发送给GPU， 展示到页面上

5.关于移动端适配接触的一些方案

（1）媒体查询+rem
		针对不同屏幕设计不同的样式        当重置浏览器屏幕大小的时候   根据屏幕宽度和大小重新设计样式

下面的代码是这种方案必须添加的内容：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

为的就是让布局视口等于真实视口

（2）淘宝flexible.js方案 
	
	它同样也是rem适配的，将设备分成十个部分，	

引入flexible.js 这一步其实非常简单，只要把flexible.js的内容复制出来，在本地新建一个flexible.js的文件
接着在html页面里面，尽可能早的引入这个js文件（为了让适配的效果更快）
上面方案1 的代码就不需要了，我们只需要交给flexible.js自己去处理
（3）vh vw方案
这种方案目前兼容性不是很好