6 应用

一、面经问题

问题1、CSS3动画，GPU加速,导致独立图层生成的属性?

  CSS3的transform不会触发回流，会产生独立图层使用GPU加速。还有opacity，filter（滤镜）会触发GPU加速

问题2、首页白屏优化

  样式放头部，异步下载，脚本放底部。

问题3、求body高度

html

1

2

3

4

5

style

html{
padding: 0;
margin: 0;
}
div{
height: 10px;
border: 10px;
padding: 10px;
margin: 10px;
border: 10px;
background-color: green;
}

  border无效；body没有padding和border，导致上下2margin变为body的margin；div上下margin重叠了4个。所以margin总共减少了6个。因此：
    body高度 = 1055 - 10*6 = 190

如果是border:10px solid red

    body高度 = 1057 - 10*6 = 290

问题4、base64压缩图片时，如果图片大小1k，没有优化效果

  base64增大css体积，css会阻塞页面渲染。

问题5、CSS布局介绍？

布局	实现方式	优点	缺点
静态布局	尺寸一律用px写死	设计简单、无兼容性问题。最适合PC端	无法根据屏幕尺寸做调整
自适应布局	分别为不同屏幕尺寸设计不同静态布局，通过media查询加载不同代码	适配范围内的设备体验最好	一个网页需要设计多种布局，开发工作量大
流式布局（传统）	宽度用百分比做自适应，高度、文字大小用px写死	整体布局不变	视口很小会让宽度很窄但是高度不变，视觉体验差
弹性布局	用rem、em相对单位设置尺寸，保持宽高比例；用media查询控制根元素的字体大小	保持尺寸比例。最适合移动端	rem相对字体尺寸计算麻烦。chrome最小字体大小是12px。
响应式布局	流式布局+弹性布局+media查询	适合pc和移动端兼容	media查询有限。工作量大。chrome浏览器的最小字体问题

问题6、display:inline-block元素之间存在间隙，原因及解决方案？

原因：换行符和空格在文本行内都会形成间隙
解决：

• 父元素font-size:0，子元素再重新设置
• margin负值
• 父：table-cell; word-spacing:-em
• 写在同一行

二、代码实现

1、流式布局系列

（1）一侧固定，另一侧自适应

方法：

• 左侧浮动脱离文档流，右侧形成BFC

  左侧浮动，右侧overflow:hidden/scroll/auto

• flex

• 父子嵌套。父元素margin-left或padding-left，子元素margin-left负值。

• absolute绝对定位，脱离文档流。

（2）两侧固定，中间自适应

方法：

• flex
• absolute绝对定位，脱离文档流，形成BFC。
• 先左右浮动，再让中间形成BFC，或用margin/padding
• 双飞翼或圣杯布局，也是使用float

（3）瀑布流布局——等宽不等高

flex实现，父元素flex，设置flex-wrap: wrap;换行。

2、垂直居中系列（父元素宽高未知）

(1)居中元素不定宽高

• 父relative，子absolute + transform
• 父flex，justify-content:center, align-items:center

方法3、

(2)居中元素定宽高

以上方法都可用。额外方法：

• 可用margin替换transform
• left/right/top/bottom全是0，再用margin:auto设置

（3）文字和图片并排垂直居中

父元素：line-height = 高度；text-align:center;
img：vertical-align: text-bottom;

3、CSS绘图系列

（1）CSS实现宽高等比例自适应矩形

padding实现

（2）手写css画三角

（3）用css写个气泡

伪元素 + absolute

html

css

4、过渡、动画效果系列

（1）实现一个渐入渐出效果

html

css

（2）css动画实现一个点加速中间再减速到右边

（3）css动画有哪些实现方式

svg 和 animination 、过渡transition

5、超出文字转省略号

white-space: nowrap; // 不换行
overflow: hidden; // 不显示
text-overflow: ellipsis; // 溢出部分用省略号
注意： word-wrap： wrap | nowrap。是否允许长单词换行