6 应用

一、面经问题

问题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)实现一个渐入渐出效果

html

<div id="dd">
    <div class="ss"></div>
</div>

css

<style>
    .ss{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
        display: inline-block;
    }
    #dd{
        background-color: yellow;
    }
    #dd:hover .ss{
        transform: translateX(400px);
        transition: transform 1s ease-in-out;
    }
</style>

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

<style>
    .ss{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
        display: inline-block;
        animation: move 1s ease-in-out infinite alternate;
    }
    @keyframes move{
        0{
            transform: translate(0,0);
        }
        50%{
            transform: translate(200px,0);
        }
        100%{
            transform: translate(400px,0);
        }
    }
</style>

(3)css动画有哪些实现方式

svg 和 animination 、过渡transition

5、超出文字转省略号

white-space: nowrap; // 不换行
overflow: hidden;  // 不显示
text-overflow: ellipsis;  // 溢出部分用省略号

注意: word-wrap: wrap | nowrap。是否允许长单词换行

上一篇:对盒模型的理解


下一篇:Apache网页文件目录模板