亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端開發(fā)常見筆試/面試題總結(jié) -- HTML / CSS篇

dongxiawu / 1137人閱讀

摘要：室友同為前端開發(fā)，最近在他找工作的時(shí)候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時(shí)頻繁遇到的面試題。合并后的外邊距的高度取外邊距高度中的較大者。

室友同為前端開發(fā)，最近在他找工作的時(shí)候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時(shí)頻繁遇到的面試題。

iframe 有哪些缺點(diǎn)?

頁(yè)面看起來較雜亂，不易管理，布局不佳，易分散用戶注意力

搜索引擎的檢索程序無法解讀這種頁(yè)面，不利于SEO

移動(dòng)設(shè)備兼容性差

會(huì)增加http請(qǐng)求，對(duì)服務(wù)器造成負(fù)擔(dān)

會(huì)阻塞主頁(yè)面的Onload事件

和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面并行加載

cookie和localStorage、seesionStorage的區(qū)別是什么？

共同點(diǎn)是都保存在瀏覽器端，區(qū)別如下：

cookies是為了標(biāo)識(shí)用戶身份而存儲(chǔ)在本地的數(shù)據(jù)，會(huì)隨http請(qǐng)求一同發(fā)送到服務(wù)器，而localStorage和sessionStorage僅在本地保存，不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器

cookie保存的數(shù)據(jù)不超過4k，而localStorage和sessionStorage保存的數(shù)據(jù)可達(dá)到5M

cookie在過期之前一直有效，即使窗口或者瀏覽器關(guān)閉。localStorage始終有效，窗口和瀏覽器關(guān)閉也一直保存，用作長(zhǎng)久數(shù)據(jù)保存，sessionStorage僅在瀏覽器窗口關(guān)閉之前有效。

cookie數(shù)據(jù)在所有同源窗口都共享。localStorage也是在所有同源窗口都共享，而sessionStorage不在不同的瀏覽器共享，即使同一頁(yè)面

多個(gè)標(biāo)簽頁(yè)如何實(shí)現(xiàn)通信？

localStorage：在window全局對(duì)象上添加監(jiān)聽事件 window.onstorage = (e) => { console.log(e); }

webSocket協(xié)議

SharedWorker：webWorker只針對(duì)當(dāng)前頁(yè)面，而SharedWorker則是多個(gè)標(biāo)簽共享的worker

HTML5如何實(shí)現(xiàn)文件離線儲(chǔ)存？

在head中加入manifest屬性，它會(huì)請(qǐng)求manifest文件，第一次訪問時(shí)，瀏覽器會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問過并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面。

實(shí)現(xiàn)不使用 border 畫出 1px 高的線

為了在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致，可用以下方法：
1、使用div

2、使用hr，不建議直接使用size屬性，因?yàn)樾碌臉?biāo)準(zhǔn)里已經(jīng)廢棄直接使用標(biāo)準(zhǔn)的方式
如何實(shí)現(xiàn)垂直居中？

絕對(duì)定位：

   main {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate( -50%, -50% );
   }

flexbox布局：

   display: flex, justify-content: center, align-items: center

box布局:

   box-align: center; box-pack: center

什么是標(biāo)準(zhǔn)模式和怪異模式？如何應(yīng)對(duì)？

標(biāo)準(zhǔn)模式又稱嚴(yán)格模式，瀏覽器使用 W3C 的標(biāo)準(zhǔn)解析渲染頁(yè)面
怪異模式又稱混雜模式，瀏覽器都按照自己的方式解析渲染頁(yè)面，在不同的瀏覽器網(wǎng)頁(yè)會(huì)顯示不同的樣式

最好的方法就是添加了文檔類型聲明，比如，瀏覽器會(huì)用W3C的標(biāo)準(zhǔn)來渲染網(wǎng)頁(yè)

如何解決兩個(gè)元素的重疊問題(外邊距合并)？

外邊距合并(疊加)：當(dāng)兩個(gè)垂直(不包含水平)外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度取外邊距高度中的較大者。

一上一下會(huì)合并；

一內(nèi)一外也會(huì)合并；

自身(沒有邊框或填充時(shí))的margin-top和margin-bottom也會(huì)合并

方法：可以用BFC的方式解決，所謂的BFC就是css布局的一個(gè)概念，是一塊區(qū)域，一個(gè)環(huán)境。

margin穿透：可以將父級(jí)元素設(shè)置為一個(gè)獨(dú)立的BFC，子級(jí)元素的margin值就不會(huì)溢出父級(jí)，我們這里對(duì)父級(jí)元素應(yīng)用樣式overflow: hidden

margin重疊：也就是兩個(gè)平級(jí)的元素發(fā)生重疊的情形，我們可以將兩個(gè)div套上一個(gè)BFC的外殼，這樣兩個(gè)BFC的內(nèi)部元素就不會(huì)互相影響了

在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域

SVG方式：同理類似的用的方式也可以

CSS方式：border-radius: 50%

JS方式：先繪制一個(gè)正方形，js檢測(cè)鼠標(biāo)位置是否在圓上

常見的SEO方法有哪些？

頁(yè)面布局， 重要的東西要提前。

文章關(guān)鍵詞的分布（ 在面包屑以及側(cè)邊欄適當(dāng)?shù)恼{(diào)用文章標(biāo)題來提高關(guān)鍵詞密度）

文章內(nèi)容可以在源碼中寫在側(cè)邊欄的前面， 之后用float: right浮動(dòng)到右邊即可

圖片處理（ 圖片做壓縮， 調(diào)用圖片用div + css來調(diào)用， 同時(shí)添加alt屬性。）

圖片添加alt屬性，（ 搜索引擎蜘蛛無法抓取圖片內(nèi)容）

頁(yè)面的大小控制

將腳本放在底部

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116245.html

相關(guān)文章

  • 前端開發(fā)常見筆試/面試題總結(jié) -- HTML / CSS篇

    摘要：室友同為前端開發(fā)，最近在他找工作的時(shí)候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時(shí)頻繁遇到的面試題。合并后的外邊距的高度取外邊距高度中的較大者。 室友同為前端開發(fā)，最近在他找工作的時(shí)候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時(shí)頻繁遇到的面試題。 iframe 有哪些缺點(diǎn)? 頁(yè)面看起來較雜亂，不易管理，布局不佳，易分散用戶注意力 搜索引...

    endiat 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

    muddyway 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

    jsbintask 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<