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

資訊專欄INFORMATION COLUMN

前端面試之Css篇

leejan97 / 2881人閱讀

摘要：替換元素是指用作為其他內(nèi)容占位符的一個(gè)元素。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。折疊的結(jié)果兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

1 . CSS 屬性是否區(qū)分大小寫？

答：不區(qū)分。 HTML，CSS都對(duì)大小寫不敏感，但為了更好的可讀性和團(tuán)隊(duì)協(xié)作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。

2 . 行內(nèi)(inline)元素 設(shè)置margin-top和margin-bottom 是否起作用？padding-top和padding-bottom是否會(huì)增加它的高度？

答：行內(nèi)元素又分為替換元素（replaced element）和非替換元素（non-replaced element）。

替換元素: 是指用作為其他內(nèi)容占位符的一個(gè)元素。如： img、input 等起作用;

非替換元素:是指內(nèi)容包含在文檔中的元素 如：span等不起作用；

3 . 設(shè)置p的font-size:10rem，當(dāng)用戶重置或拖曳瀏覽器窗口時(shí)，文本大小是否會(huì)也隨著變化？

答：rem是以html根元素中font-size的大小為基準(zhǔn)的相對(duì)度量單位，文本的大小不會(huì)隨著窗口的大小改變而改變。

4 . translate()方法能移動(dòng)一個(gè)元素在z軸上的位置？

答：不能。translate()方法只能改變x軸，y軸上的位移。

5 . only 選擇器的作用是？ @media only screen and (max-width: 1024px) {margin: 0;}

答：停止舊版本瀏覽器解析選擇器的其余部分。
only 用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。
其實(shí)only很多時(shí)候是用來對(duì)那些不支持Media Query 但卻支持Media Type 的設(shè)備隱藏樣式表的。
其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only 不存在；
對(duì)于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會(huì)不讀了樣式，因?yàn)槠湎茸xonly 而不是screen；
另外不支持Media Qqueries 的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。

6 . 瀏覽器CSS匹配順序

答：瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。

比如#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class="red"的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，
如果都存在則匹配上。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。

7 . display:none 和visibilty:hidden的區(qū)別：

答：display:none和visibility:hidden都是把網(wǎng)頁上某個(gè)元素隱藏起來的功能，但兩者有所區(qū)別: visibility:hidden屬性會(huì)使對(duì)象不可見，但該對(duì)象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到），等于留出了一塊空白區(qū)域，而display:none`屬性會(huì)使這個(gè)對(duì)象徹底消失（看不見也摸不到）

8 . 請(qǐng)描述 BFC(Block Formatting Context) 及其如何工作。：

答：浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器

（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，
都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）

會(huì)觸發(fā)BFC的條件有：

float的值不為none。

overflow的值不為visible。

display的值為table-cell, table-caption, inline-block 中的任何一個(gè)。

position的值不為relative 和static。

折疊的結(jié)果：

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。

兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。

兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

9 . 談?wù)剺邮降膬?yōu)先級(jí)

優(yōu)先級(jí)逐級(jí)增加

0.元素(類型)選擇器 （h1） 和 偽元素選擇器 （:before）

1.類選擇器（.demo）屬性選擇器（[type="radio"]）

2.ID選擇器（#demo）

內(nèi)聯(lián)樣式

當(dāng)在一個(gè)樣式聲明上使用 !important規(guī)則時(shí)，該樣式聲明會(huì)覆蓋CSS中任何其他的聲明。

Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important

Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important

Never 永遠(yuǎn)不要在你的插件中使用 !important

Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級(jí)來解決問題而不是 !important

10 . 遇上過FOUC嗎？如何解決FOUC

答：Flash of Unstyled Content (FOUC) 文檔樣式短暫失效
只需要在文檔的head元素中添加一個(gè)link元素或者添加script元素就可以防止FOUC的發(fā)生.

link元素解決方案


    My Page

script元素解決方案

    
        My Page

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

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

相關(guān)文章

  • 前端最強(qiáng)面經(jīng)匯總

    摘要：獲取的對(duì)象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對(duì)象即使沒有代碼，也會(huì)把默認(rèn)的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對(duì)于一個(gè)光禿禿的元素，方法返回對(duì)象中屬性值如果有就是據(jù)我測(cè)試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時(shí)間整理的前端面試資源，喜歡請(qǐng)大家不要吝嗇star~ 別只收藏，點(diǎn)個(gè)贊，點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項(xiàng)目地址 https:...

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

  • 前端文檔收集

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

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

  • 前端文檔收集

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

    muddyway 評(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元查看
<