国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

目錄
面試官:請你談一下自適應(適配)的方案
面試官:談談你對響應式的理解
面試官:談談你對布局方案的理解
面試官:什么是重排重繪,如何減少重拍重繪?
面試官:css 動畫與 js 動畫哪個性能更好?
面試官:為什么會發(fā)生樣式抖動?
面試官:你做前端有多少時間花在寫 css 上?
面試官:介紹 CSS 隱藏頁面中某個元素的幾種方法
面試官:CSS 如何設置一行或多行超出顯示省略號?
面試官:flex 布局中 order 有何作用?
首頁 web前端 css教程 看看這些前端面試題,帶你搞定高頻知識點(四)

看看這些前端面試題,帶你搞定高頻知識點(四)

Feb 20, 2023 pm 07:19 PM
css html 前端 面試題

看看這些前端面試題,帶你搞定高頻知識點(四)

每天10道題,100天后,搞定所有前端面試的高頻知識點,加油!!!,在看文章的同時,希望不要直接看答案,先思考一下自己會不會,如果會,自己的答案是什么?想過之后再與答案比對,是不是會更好一點,當然如果你有比我更好的答案,歡迎評論區(qū)留言,一起探討技術之美。

面試官:請你談一下自適應(適配)的方案

我:呃~,好的,解決自適應問題可以采用 “ 淘寶無限適配 布局單位使用rem ” ,適配所需的js還有說明文檔:淘寶的github網(wǎng)址,整出代碼如下:

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

【相關推薦:web前端開發(fā)

面試官:談談你對響應式的理解

我:呃~,好的,通俗來講,在html css中,響應式意為:一個URL可以響應多端,簡言之在不同的設備不同尺寸的情況下,相同的url都能對其進行適配,如何做?整出代碼如下:

<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>內(nèi)容</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>

面試官:談談你對布局方案的理解

我:呃~,好的,布局方案根據(jù)項目特點,有以下選擇:

一、什么情況下采用響應式布局
數(shù)據(jù)不是特別多,用戶量不是特別大,純展示類的項目適合響應式布局
例如:公司的官網(wǎng)、專題頁面
特別追求性能的項目,不太適合響應式,因為如果添加了很多的響應式就會造成加載速度變慢。
二、pc 移動端應該做什么樣的布局方案
注意:訪問量還可以或者比較大,類似于淘寶網(wǎng)。
pc是一套,會加入一點點響應式。
移動端是一套,會使用自適應的布局方式。
三、pc的設計圖
ui: 1980
筆記本電腦:1280
ui圖的寬度和電腦的寬度不對應該怎么辦?
1.把ui圖進行等比縮放,縮放成和電腦一樣的尺寸

2.換1980的電腦

四、移動端的設計圖
寬度:750
因為750設計圖/2就是375,正好是iphone6的尺寸,我們要把iphone6的尺寸做為基準點。

面試官:什么是重排重繪,如何減少重拍重繪?

我:呃~,好的,總結(jié)如下:

重排(Reflow):元素的位置發(fā)生變動時發(fā)生重排,也叫回流。此時在關鍵渲染路徑中的 Layout 階段,計算每一個元素在設備視口內(nèi)的確切位置和大小。當一個元素位置發(fā)生變化時,其父元素及其后邊的元素位置都可能發(fā)生變化,代價極高。

重繪(Repaint): 元素的樣式發(fā)生變動,但是位置沒有改變。此時在關鍵渲染路徑中的 Paint 階段,將渲染樹中的每個節(jié)點轉(zhuǎn)換成屏幕上的實際像素,這一步通常稱為繪制或柵格化。

另外,重排必定會造成重繪。以下是避免過多重拍重繪的方法

1)使用 DocumentFragment 進行 DOM 操作,不過現(xiàn)在原生操作很少也基本上用不到

2)CSS 樣式盡量批量修改

3)避免使用 table 布局

4)為元素提前設置好高寬,不因多次渲染改變位置

面試官:css 動畫與 js 動畫哪個性能更好?

我:呃~,我對這兩者的看法以及優(yōu)缺點總結(jié)如下:

CSS3 的動畫

1.在性能上會稍微好一些,瀏覽器會對 CSS3 的動畫做一些優(yōu)化(比如專門新建一個圖層用來跑動畫)

2.代碼相對簡單

3.在動畫控制上不夠靈活  

4.兼容性不好

5.部分動畫功能無法實現(xiàn)(如滾動動畫,視差滾動等)

JavaScript 的動畫

彌補了 css 缺點,控制能力很強,可以單幀的控制、變換,同時寫得好完全可以兼容 IE6,并且功能強大。

總結(jié): 對于一些復雜控制的動畫,使用 javascript 會比較好。而在實現(xiàn)一些小的交互動效的時候,可以多考慮 CSS。

面試官:為什么會發(fā)生樣式抖動?

我:呃~,因為沒有指定元素具體高度和寬度,比如數(shù)據(jù)還沒有加載進來時元素高度是 100px(假設這里是 100px),數(shù)據(jù)加載進來后,因為有了數(shù)據(jù),然后元素被撐大,所有出現(xiàn)了抖動。

面試官:你做前端有多少時間花在寫 css 上?

我:呃~,如果說是開發(fā)階段,我會用 20%-30% 的時間寫 CSS。但是如果項目是采用某種組件庫的時候,比如:UI 設計時遵循了 element-ui 的規(guī)范,而開發(fā)使用的 UI 框架為 element-ui,因此大多數(shù)的界面并不需要寫大量的 CSS,因為預設樣式已足夠使用。

面試官:介紹 CSS 隱藏頁面中某個元素的幾種方法

我:呃~,好的,隱藏元素的方法有如下幾種:

display: none;? :通過 CSS 操控 display,移出文檔流。

opacity: 0; :透明度為 0,仍在文檔流中,當作用于其上的事件(如點擊)仍有效。

visibility: hidden; :透明度為 0,仍在文檔流中,但作用于其上的事件(如點擊)無效,這也是 visibility:hidden 與 opacity: 0 的區(qū)別。

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 布局中子元素的排列順序,數(shù)值越小,排列越靠前,默認為 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前端入門、編程基礎視頻

以上是看看這些前端面試題,帶你搞定高頻知識點(四)的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章!

本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權的內(nèi)容,請聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅(qū)動的應用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機

Video Face Swap

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程
1601
29
PHP教程
1502
276
如何使用CSS Backdrop-Filter屬性? 如何使用CSS Backdrop-Filter屬性? Aug 02, 2025 pm 12:11 PM

backdrop-filter用于對元素背后的內(nèi)容應用視覺效果,1.使用backdrop-filter:blur(10px)等語法實現(xiàn)毛玻璃效果;2.支持blur、brightness、contrast等多種濾鏡函數(shù)并可疊加;3.常用于玻璃態(tài)卡片設計,需確保元素與背景重疊;4.現(xiàn)代瀏覽器支持良好,可用@supports提供降級方案;5.避免過大模糊值和頻繁重繪以優(yōu)化性能,該屬性僅在元素背后有內(nèi)容時生效。

什么是用戶代理樣式表? 什么是用戶代理樣式表? Jul 31, 2025 am 10:35 AM

用戶代理樣式表是瀏覽器自動應用的默認CSS樣式,用于確保未添加自定義樣式的HTML元素仍具基本可讀性。它們影響頁面初始外觀,但不同瀏覽器存在差異,可能導致不一致顯示。開發(fā)者常通過重置或標準化樣式來解決這一問題。使用開發(fā)者工具的“計算”或“樣式”面板可查看默認樣式。常見覆蓋操作包括清除內(nèi)外邊距、修改鏈接下劃線、調(diào)整標題大小及統(tǒng)一按鈕樣式。理解用戶代理樣式有助于提升跨瀏覽器一致性并實現(xiàn)精準布局控制。

如何使用CSS創(chuàng)建彈跳動畫? 如何使用CSS創(chuàng)建彈跳動畫? Aug 02, 2025 am 05:44 AM

Define@keyframesbouncewith0%,100%attranslateY(0)and50%attranslateY(-20px)tocreateabasicbounce.2.Applytheanimationtoanelementusinganimation:bounce0.6sease-in-outinfiniteforsmooth,continuousmotion.3.Forrealism,use@keyframesrealistic-bouncewithscale(1.1

如何以HTML表單創(chuàng)建搜索輸入字段 如何以HTML表單創(chuàng)建搜索輸入字段 Aug 02, 2025 pm 04:44 PM

Usetheelementwithinatagtocreateasemanticsearchfield.2.Includeaforaccessibility,settheform'sactionandmethod="get"attributestosenddatatoasearchendpointwithashareableURL.3.Addname="q"todefinethequeryparameter,useplaceholdertoguideuse

如何在CSS中重疊元素? 如何在CSS中重疊元素? Jul 30, 2025 am 05:43 AM

要實現(xiàn)CSS元素重疊,需使用定位和z-index屬性。1.使用position和z-index:將元素設置為非static定位(如absolute、relative等),并通過z-index控制堆疊順序,值越大越靠前。2.常見定位方法:absolute用于精確布局,relative用于相對偏移并重疊相鄰元素,fixed或sticky用于固定定位的懸浮層。3.實際示例:通過設置父容器position:relative,子元素position:absolute和不同z-index,可實現(xiàn)卡片重疊效果

HTML中鏈接標簽中rel屬性的目的是什么? HTML中鏈接標簽中rel屬性的目的是什么? Aug 03, 2025 pm 04:50 PM

rel =“ stylesheet” linkscssfilesfilesforstylingthepage; 2.rel =“ pRELOAD” hintstopreloadcritical ricationResourcesourcesorforperformance; 3.rel =“ icon” setSthewebsite’sfavicon; 4.Rel =“ 4.REL =“ necter” selfertAltate's supportAlternate'sporlateRateSlikerSsorsSorsorSorprint; 5.ReL; 5.REL; 5.REL = REL =&QU&QU&QU&QU

HTML中錨標簽的目標屬性的目的是什么? HTML中錨標簽的目標屬性的目的是什么? Aug 02, 2025 pm 02:23 PM

ThetargetattributeinanHTMLanchortagspecifieswheretoopenthelinkeddocument.1._selfopensthelinkinthesametab(default).2._blankopensthelinkinanewtaborwindow.3._parentopensthelinkintheparentframe.4._topopensthelinkinthefullwindowbody,removingframes.Forexte

如何創(chuàng)建一個在HTML中發(fā)送表單數(shù)據(jù)的提交按鈕 如何創(chuàng)建一個在HTML中發(fā)送表單數(shù)據(jù)的提交按鈕 Aug 02, 2025 pm 04:46 PM

使用元素并設置action和method屬性指定數(shù)據(jù)提交地址和方式;2.添加帶name屬性的輸入字段以確保數(shù)據(jù)可被服務器識別;3.使用或創(chuàng)建提交按鈕,點擊后瀏覽器會將表單數(shù)據(jù)發(fā)送至指定URL,由后端處理,完成數(shù)據(jù)提交。

See all articles