前端面试题梳理2

1，css3新特性

• 弹性盒模型 flex
• 媒体查询 @media(max-width:1200px)..
• 颜色透明度 rgba
• 圆角 border-radius
• 渐变 linear-gradient
• 阴影 box-shadow
• 文本溢出 text-overflow
• 过渡
• 动画
• 新增选择器 ,

2，display有哪些值 说明他们的作用

• block 转换成块级元素
• inline 转换成行内元素
• none 设置元素不可见
• inline-block 行内块元素 可设置宽高
• list-item 像块元素 并添加样式表标记
• table 块级表格显示
• inherit 继承父元素display值

3，css盒模型

• 标准盒模型：元素宽度= width+padding+border
• 怪异盒模型：元素宽度 = width
• 标准盒模型可以通过 box-sizing:border-box来转换成怪异
• 怪异盒模型可以通过box-sizing:content-box 来转换成标准
• box-sizing:inherit 继承父元素的属性

4，position的值

• absolute: 绝对定位 相对于static除外的第一个父元素进行定位
• fixed: 固定定位 相对于浏览器窗口进行定位
• relative: 相对定位 相对于自身位置进行定位
• inherit: 规定从父元素继承position的值

5，display:inline-block 什么时候不会显示间隙

• 移除空格
• 使用margin负值
• 使用font-size:0
• letter-sapcing
• word-sapcing

6，行内元素 float后是否变成块级元素

行内元素设置浮动后变得更像inline-block；这个时候给该元素设置padding，width，height都是有效的

7，如果需要手动写动画 你认为最小时间间隔是多久

多数显示器默认频率是60Hz 也就是每秒刷新60次 所以呢理论上最小时间间隔为

1/60*1000ms= 16.7ms

8，css在性能优化方面的实践

• css压缩与合并 
• css文件放在head里 不要用@import
• 尽量缩写 避免用滤镜 合理使用选择器

9，rgba和opacity 的透明效果有什么不同

• 两者都可以实现透明效果 但最大的不同是 opacity作用于元素以及元素内的所有内容的透明度
• rgba制作用于元素的颜色或者其背景色，子元素不会继承

10，px 和 em区别

    两者都是相对单位

• px相对于显示器屏幕分辨率 无法用浏览器字体放大功能
• em值并不固定 会继承父元素字体大小，em = 像素值/父元素font-size

11，重绘和回流

• 重绘：当渲染树中的元素外观（如 颜色）发生变化 不影响布局时 产生重绘
• 回流：当渲染数中的元素的布局（如：尺寸 位置 显示隐藏）发生变化时 产生重回回流
• 回流必将引起重绘 重绘不一定引起回流
• 注意：js获取layout属性值（如：offsetleft scrolltop 等）也会引起回流 因为浏览器需要通过回流计算最新值

12，如何实现字体小于12px的效果

tranform:scale()这个属性只可以缩放 可以定义宽高的元素，而行内元素不可以定义宽高 可以加上display:inline-block