6 应用

2024-03-07 07:57:26

一、面经问题

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

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

问题2、首页白屏优化

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

问题3、求body高度

html

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

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画三角

    <style>
    .f{
        width: 0;
        border: 20px solid transparent;
        border-left-color: red;
    }
</style>

（3）用css写个气泡

伪元素 + absolute

html

<div class="f"></div>

css

<style>
    .f{
        width: 100px;
        height: 40px;
        border-radius: 20px;
        background-color: pink;
        position: relative;
    }
    .f::after{
        content: '';
        display: inline-block;
        border: 6px solid rgba(0,0,0,0);
        border-left:14px solid pink;
        position: absolute;
        right: 0;
        transform: translateX(12px) rotate(-20deg);
    }
</style>

4、过渡、动画效果系列

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