Rumah >hujung hadapan web >tutorial css >Lihat soalan temu duga bahagian hadapan ini untuk membantu anda menguasai mata pengetahuan frekuensi tinggi (4)

Lihat soalan temu duga bahagian hadapan ini untuk membantu anda menguasai mata pengetahuan frekuensi tinggi (4)

青灯夜游ke hadapan: 2023-02-20 19:19:272180semak imbas

10 soalan setiap hari Selepas 100 hari, anda akan menguasai semua mata pengetahuan frekuensi tinggi temuduga hadapan. ! ! , semasa membaca artikel itu, saya harap anda tidak melihat jawapan secara langsung, tetapi fikirkan dahulu sama ada anda mengetahuinya, dan jika ya, apakah jawapan anda? Fikirkan tentangnya dan kemudian bandingkan dengan jawapannya Adakah lebih baik, jika anda mempunyai jawapan yang lebih baik daripada saya, sila tinggalkan mesej di kawasan komen dan bincangkan keindahan teknologi bersama-sama.

Pewawancara: Bolehkah anda bercakap tentang penyelesaian penyesuaian

Saya: Uh~, okay, mari selesaikan masalah penyesuaian Masalahnya boleh? diselesaikan dengan "Taobao Unlimited Adaptation+ unit susun atur menggunakan rem", js yang diperlukan untuk penyesuaian juga mempunyai dokumentasi: URL github Taobao, keseluruhan kod adalah seperti berikut:

<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>

[Cadangan berkaitan: pembangunan bahagian hadapan web 】

Penemuduga: Bercakap tentang pemahaman anda tentang responsif

Saya: Uh~, okay, dalam istilah orang awam, dalam html+css , Responsif bermaksud: URL boleh bertindak balas kepada berbilang terminal Ringkasnya, URL yang sama boleh disesuaikan dengan peranti yang berbeza dan saiz yang berbeza ? Keseluruhan kod adalah seperti berikut:

<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>

Sudah tentu, anda juga boleh menambah responsif pada imej Keseluruhan kod adalah seperti berikut:

<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>

Penemuduga: Bercakap tentang pemahaman anda tentang pelan susun atur

Saya: Eh~, okay, pelan susun atur mempunyai pilihan berikut berdasarkan ciri-ciri projek:

Satu , Bila menggunakan reka letak responsif
Data tidak banyak dan bilangan pengguna tidak terlalu besar projek paparan sesuai untuk susun atur responsif
Contohnya: Laman web Rasmi syarikat dan halaman khas
Projek yang mengejar prestasi terutamanya tidak sesuai untuk responsif, kerana jika banyak tindak balas ditambah, kelajuan pemuatan akan menjadi perlahan.
2. Apakah jenis pelan reka letak yang perlu dibuat untuk PC + terminal mudah alih? PC ialah satu set, dengan sedikit tindak balas ditambah. Versi mudah alih ialah satu set dan akan menggunakan kaedah reka letak penyesuaian.
3.

Lukisan reka bentuk PC
ui: 1980 Komputer riba: 1280 Apa yang perlu saya lakukan jika lebar lukisan ui tidak sama sebagai lebar komputer? Skalakan imej UI secara berkadar dengan saiz yang sama dengan komputer

2. Tukar kepada komputer 1980

4.

Lukisan reka bentuk mudah alih

Lebar: 750 Kerana lukisan reka bentuk 750/2 ialah 375, yang kebetulan untuk Saiz iPhone 6, kita perlu menggunakan saiz iPhone6 sebagai titik rujukan.

Pewawancara: Apakah aliran semula dan lukis semula, dan bagaimana untuk mengurangkan tangkapan semula dan lukis semula?

Saya: Uh~, okay, ringkasannya adalah seperti berikut:

Reflow: Reflow berlaku apabila kedudukan elemen berubah, juga dipanggil reflow. Pada ketika ini dalam fasa Reka Letak laluan pemaparan kritikal, kedudukan tepat dan saiz setiap elemen dalam port pandangan peranti dikira. Apabila kedudukan elemen berubah, kedudukan elemen induknya dan elemen di belakangnya mungkin berubah, yang sangat mahal.

Cat semula: Gaya elemen berubah, tetapi kedudukan tidak berubah. Pada ketika ini dalam peringkat Cat laluan pemaparan kritikal, setiap nod dalam pepohon pemaparan ditukar kepada piksel sebenar pada skrin.

Selain itu, pengaliran semula pasti akan menyebabkan lukisan semula. Berikut ialah cara untuk mengelakkan tangkapan semula dan lukis semula yang berlebihan
1) Gunakan DocumentFragment untuk operasi DOM, tetapi kini operasi asli jarang berlaku dan pada dasarnya tidak digunakan

2) Gaya CSS harus diubah suai dalam kelompok sebanyak mungkin

3) Elakkan menggunakan susun atur jadual

4) Tetapkan ketinggian dan lebar elemen terlebih dahulu dan jangan ubah kedudukan disebabkan oleh berbilang pemaparan

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

我：呃~，我对这两者的看法以及优缺点总结如下：

CSS3 的动画：

1.在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）

2.代码相对简单

3.在动画控制上不够灵活　

4.兼容性不好

5.部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript 的动画：

弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。

总结：对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS。

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

我：呃~，因为没有指定元素具体高度和宽度,比如数据还没有加载进来时元素高度是 100px(假设这里是 100px),数据加载进来后,因为有了数据,然后元素被撑大,所有出现了抖动。

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

我：呃~，如果说是开发阶段，我会用 20%-30% 的时间写 CSS。但是如果项目是采用某种组件库的时候，比如：UI 设计时遵循了 element-ui 的规范，而开发使用的 UI 框架为 element-ui，因此大多数的界面并不需要写大量的 CSS，因为预设样式已足够使用。

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

我：呃~，好的，隐藏元素的方法有如下几种：

display: none; ：通过 CSS 操控 display，移出文档流。

opacity: 0; ：透明度为 0，仍在文档流中，当作用于其上的事件(如点击)仍有效。

visibility: hidden; ：透明度为 0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别。

content-visibility; ：移出文档流，但是再次显示时消耗性能低。

position: absolute;top: -9000px;left: -9000px; ：绝对定位于当前页面的不可见位置。

font-size: 0; ：字体大小设置为 0

面试官：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>

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

我：呃~，order 属性定义 Flex 布局中子元素的排列顺序，数值越小，排列越靠前，默认为 0。整出代码如下：

<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>

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

Atas ialah kandungan terperinci Lihat soalan temu duga bahagian hadapan ini untuk membantu anda menguasai mata pengetahuan frekuensi tinggi (4). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css css3 html JS 事件 dom display position flex table github ui

Kenyataan：

Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Lihat soalan temu duga bahagian hadapan ini untuk membantu anda menguasai mata pengetahuan frekuensi tinggi (3)Artikel seterusnya：Lihat soalan temu duga bahagian hadapan ini untuk membantu anda menguasai mata pengetahuan frekuensi tinggi (3)

Artikel berkaitan

Lihat lagi