看看这些前端面试题，带你搞定高频知识点（四）

看看这些前端面试题，带你搞定高频知识点（四）-LMLPHP

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。

面试官：请你谈一下自适应(适配)的方案

<style>
    *{margin: 0;padding: 0;}
    html{
        height: 37.5px;
    }
    .container{
        width: 1rem;
        height: 1rem;
        background-color: #f00;
    }
</style>
<script src="../index.js"></script>
<body>
    <div class="container">111</div>
</body>

登录后复制

看看这些前端面试题，带你搞定高频知识点（四）-LMLPHP

【相关推荐：web前端开发】

面试官：谈谈你对响应式的理解

<style>
    *{margin: 0;padding: 0;}
    ul{
        list-style: none;
    }
    ul li {
        display: inline-block;
        width: 100px;
        background-color: #f00;
    }
    @media only screen and (max-width: 1000px){
        ul li:last-child{
            display: none;
        }
    }
    @media only screen and (max-width: 800px){
        ul li:nth-child(5){
            display: none;
        }
    }
    @media only screen and (max-width: 500px){
        ul li:nth-child(4){
            display: none;
        }
    }
</style>
<body>
    <ul>
        <li>首页</li>
        <li>消息</li>
        <li>题库</li>
        <li>面试</li>
        <li>内容</li>
        <li>offer</li>
    </ul>
</body>

登录后复制

当然也可以给图片添加响应式，整出代码如下：

<style>
    *{margin: 0;padding: 0;}
    picture{
        width: 300px;
	    height: 300px;
    }
    img {
		width: 100%;
	    height: 100%;
	    object-fit: contain;
	};
    source {
		width: 80%;
	    height: 80%;
	    object-fit: contain;
	};
</style>
<body>
    <picture>
        <!-- 如果切换到不同设备上 -->
        <source srcset="../7.jpeg" media="(min-width: 1000px)">
        <source srcset="../004.jpeg" media="(min-width: 700px)">
        <!-- 默认加载该图片 -->
        <img src="../4.jpeg">
    </picture>
</body>

登录后复制

看看这些前端面试题，带你搞定高频知识点（四）-LMLPHP

面试官：谈谈你对布局方案的理解

面试官：什么是重排重绘，如何减少重拍重绘？

面试官：css 动画与 js 动画哪个性能更好？

面试官：为什么会发生样式抖动？

面试官：你做前端有多少时间花在写 css 上？

面试官：介绍 CSS 隐藏页面中某个元素的几种方法

面试官：CSS 如何设置一行或多行超出显示省略号？

<style>
  div{
    width: 100px;
    /* 使用如下来设置一行行超出显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  p{
    width: 100px;
    /* 使用 -webkit-line-clamp 来设置多行超出显示省略号 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
<body>
  <div>
    1222222222222222222222222222222
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste esse velit illum vel cumque obcaecati. Quae, dicta nihil quod vero mollitia dignissimos autem, necessitatibus, iure a debitis temporibus eaque ratione.</p>
</body>

登录后复制

看看这些前端面试题，带你搞定高频知识点（四）-LMLPHP

面试官：flex 布局中 order 有何作用？

<style>
  .container{
    width: 500px;
    border: 5px solid #ddd;
    display: flex;
    justify-content: space-around;
  }
  .container div{
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
  #d1{
    order: 3;
  }
  #d2{
    order: 2;
  }
  #d3{
    order: 1;
  }
</style>
<body>
  <div class="container">
    <div id="d1">老大</div>
    <div id="d2">老二</div>
    <div id="d3">老三</div>
  </div>
</body>

登录后复制

看看这些前端面试题，带你搞定高频知识点（四）-LMLPHP

（学习视频分享：web前端入门、编程基础视频）

以上就是看看这些前端面试题，带你搞定高频知识点（四）的详细内容，更多请关注Work网其它相关文章！