css3 新特性
- 新增各种 CSS 选择器
- 圆角 （border-radius:8px）
- 多列布局 （multi-column layout）
- 阴影和反射 （Shadoweflect）
- 文字特效 （text-shadow）
- 文字渲染 （Text-decoration）
- 线性渐变 （gradient）
- 旋转 （transform）
- 增加了旋转,缩放,定位,倾斜,动画,多背景
link 和@import 的区别
两者都是外部引用 CSS 的方式，它们的区别如下：
- link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
- link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
- link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
- link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。
transition 和 animation 的区别
- transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。
- animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于 flash 的补间动画，但是它可以设置多个关键帧（用@keyframe 定义）完成动画。
display:none 与 visibility:hidden 的区别
[这两个属性都是让元素隐藏，不可见。两者区别如下：]
在渲染树中
- display: none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；
- visibility:hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
是否是继承属性
- display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
- visibility:hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible 可以让子孙节点显示；
修改常规文档流中元素的 display 通常会造成文档的重排，但是修改 visibility 属性只会造成本元素的重绘；如果使用读屏器，设置为 display:none 的内容不会被读取，设置为 visibility:hidden 的内容会被读取。
对 requestAnimationframe 的理解
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
基本语法：
window.requestAnimationFrame(callback);
- callback
是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入 DOMHighResTimeStamp 参数，它表示 requestAnimationFrame() 开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。
- 取消动画：
使用 cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame 默认返回的 id，只需要传入这个 id 就可以取消动画了。
优点
- 使得动画更加流畅，防止动画失帧
requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
- 资源节能(Cpu、内存等)
- 在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的 CPU、GPU 和内存使用量
- requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销
盒模型
- 标准盒模型 content padding border margin 高度仅仅是 content 的高度 width=content
- IE 和模型 content padding border margin 高度会把 padding 和 border 计算进去 width = content+padding+border
box-sizing属性的语法
box-sizing: content-box|border-box|inherit;
box-sizing 值为 content-box 时候，元素的padding 和 border 属性的值会在元素的宽度和高度属性基础上绘制元素的内边距和边框
BFC
- 一个个垂直排列的 box
bfc 原素是一个独立的模块，外部元素不会影响内部元素，内部元素也不会影响外部元素计算 bfc 高度的时候浮动元素也会计算进去
如何创建 BFC
- overflow 不为 visible;
- float 的值不为 none；
- position 的值不为 static 或 relative；
- display 属性为 inline-blocks、table、table-cell、table-caption、flex、inline-flex;
flex 布局属性参数：
- flex-direction 属性决定主轴的方向（即项目的排列方向）
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
- flex-wrap 属性，默认情况下，项目都排在一条线（又称"轴线"）上。
- flex-wrap 属性定义，如果一条轴线排不下，如何换行。
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
- flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
- justify-content 属性定义了项目在主轴上的对齐方式。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-items 属性定义项目在交叉轴上如何对齐。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。
- align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
position
- absolute 依赖父级元素定位，父级元素要设置 position absolute 或者 relative
- relative 相对于自身原始位置定位
- fixed 相对于浏览器
- static(默认值)
- inherit 继承
如何实现 0.5px 的线
利用 transfrom:scle(0.5,0.5)
这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果
已知宽是父级的50%怎么让div是一个正方形
div { padding-top：50% }
垂直居中的方法
parent:{ position:relative ;} child:{ position:absolute; left:50%; top:50%; margin-top:-50%; margin-left:-50%; } parent：{ position:relative } child:{ position:absolute; left:0; right：0； top:0; bottom：0； transform：translate（-50%，-50%）； } parent：{ display：flex； justify-content：center； align-items：center： }
px rem em 的区别（移动端适配）
- px是固定像素，绝对长度单位
- rem是相对根节点设置，比如html {font-size：100px} 那么1rem就是100px
- em 相对于父元素的长度单位
media query（移动端适配）
根据不同宽度的屏幕设置根元素的font-size
@media only screen and (max-width: 374px) { /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size / html { font-size: 86px; } } @media only screen and (min-width: 375px) and (max-width: 413px) { / iphone6/7/8 和 iphone x / html { font-size: 100px; } } @media only screen and (min-width: 414px) { / iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */ html { font-size: 110px; } }
vw/vh（移动端适配）
- vw 视口宽度的 1/100
- vh 视口高度的 1/100
