web面试总结-CSS

CSS

---

1.css3的动画哪几个方法?

(1) @keyFrames

@keyframes name {
        from{}
        to {}
 }

(2) animation

animation: name duration timing-function delay iteration-count direction fill-mode;

(3)transition

.box {
            height: 100px;
            width: 100px;
            background: green;
            transition: transform 1s ease-in-out 0s;
        }
        .box:hover {
            transform: rotate(180deg) scale(.5, 1.5);
        }

2.css3动画和js动画那个更好

js动画优缺点：
（1）动画控制能力比较强，可以中途暂停等操作
（2）缺点动画造成dom操作集中，回流和重绘成本比较高。
css动画优缺点：
（1）动画控制能力比较弱，中途不可以停止，代码冗杂。
（2）会使用硬件加速，浏览器会做优化，性能较好

(1)回流（重排）：当render tree中尺寸，布局，隐藏等会引起重新构建render tree
(2)重绘：只影响外观而不影响布局的是重绘。
回流必定会重绘，重绘不一定会回流。
(3)引起硬件加速的css3属性：transform,opacity,filter

3.css3实现帧动画,以及其他的解决方案

4.前端网页适配方案?

(1)部分概念

• 分辨率: 指屏幕上垂直和水平方向上的物理像素点个数,如iphone6的 1334pt x 750pt
• 屏幕尺寸: 屏幕斜对角长度,英寸为单位,1英寸 = 2.54cm
• 屏幕像素密度: 指每英寸拥有的像素数量. 屏幕像素密度 = 分辨率 / 屏幕尺寸
• 设备独立像素: 就是css像素.
• 设备像素比: 设备像素 / css像素,简称dpr,例如iphone6的水平设备像素750,css水平是375,所以iphone6的dpr是2
• 布局视口:布局视口是document.documentElement.clientWidth,是浏览器设置的一个布局角度的一个宽度,在pc上布局宽度就是浏览器的宽度,但是在移动端为了兼容原来pc的网页,布局视口比浏览器的宽度要宽很多.
• 视觉视口: 就是用户能看到的网页的css像素数量.pc端和移动端的就是浏览器的宽度.

• 在pc端,布局视口和视觉视口是联动的,当页面放大则共同放大; 在移动端,布局视口是不会随着缩放而改变的,当页面扩大,则视觉视口变小,反之成立.
  pc端:

  
  1122916-20180322175138463-1250424137.png
  

  移动端:

  
  1122916-20180322175151807-1129433865.png
• 理想视口: 将布局视口通过设置meta标签的width=device-idth,initial-scale=1变为浏览器宽度.

(2)flexible方案

根据window.devicePixelRatio设置布局视口的缩放,统一将1倍屏缩放为1,2倍屏的缩小0.5,3倍屏缩小0.33333333
这样就能面向一套设计图,兼容各个分辨率的屏幕了.
flexible.js将页面宽度分为100份,每一份为一个单位,10单位为1个rem(iphone为例: 设计图750px,每一份是7.5px,1rem = 75px)

iphone6例如:

image.png

(3)vw,vh方案

1vw等于屏幕宽度的1%,1vh等于屏幕高度的1%,后续详细了解此方案