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)
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
1) Gunakan DocumentFragment untuk operasi DOM, tetapi kini operasi asli jarang berlaku dan pada dasarnya tidak digunakan面试官：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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Peranan React dalam HTML: Meningkatkan Pengalaman Pengguna
Apr 09, 2025 am 12:11 AM
React menggabungkan JSX dan HTML untuk meningkatkan pengalaman pengguna. 1) JSX membenamkan HTML untuk menjadikan pembangunan lebih intuitif. 2) Mekanisme DOM maya mengoptimumkan prestasi dan mengurangkan operasi DOM. 3) UI pengurusan berasaskan komponen untuk meningkatkan kebolehkerjaan. 4) Pengurusan negeri dan pemprosesan acara meningkatkan interaktiviti.
