資訊專欄INFORMATION COLUMN
摘要：替換元素是指用作為其他內(nèi)容占位符的一個元素。瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。折疊的結(jié)果兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。
1 . CSS 屬性是否區(qū)分大小寫？
答：不區(qū)分。 HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團(tuán)隊(duì)協(xié)作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。
2 . 行內(nèi)(inline)元素 設(shè)置margin-top和margin-bottom 是否起作用？padding-top和padding-bottom是否會增加它的高度？
答：行內(nèi)元素又分為替換元素（replaced element）和非替換元素（non-replaced element）。
替換元素: 是指用作為其他內(nèi)容占位符的一個元素。如： img、input 等起作用;
非替換元素:是指內(nèi)容包含在文檔中的元素 如：span等不起作用；
3 . 設(shè)置p的font-size:10rem，當(dāng)用戶重置或拖曳瀏覽器窗口時，文本大小是否會也隨著變化？
答：rem是以html根元素中font-size的大小為基準(zhǔn)的相對度量單位，文本的大小不會隨著窗口的大小改變而改變。
4 . translate()方法能移動一個元素在z軸上的位置？
答：不能。translate()方法只能改變x軸，y軸上的位移。
5 . only 選擇器的作用是？ @media only screen and (max-width: 1024px) {margin: 0;}
答：停止舊版本瀏覽器解析選擇器的其余部分。
only 用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。
其實(shí)only很多時候是用來對那些不支持Media Query 但卻支持Media Type 的設(shè)備隱藏樣式表的。
其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時就當(dāng)only 不存在；
對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會不讀了樣式，因?yàn)槠湎茸xonly 而不是screen；
另外不支持Media Qqueries 的瀏覽器，不論是否支持only，樣式都不會被采用。
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)頁上某個元素隱藏起來的功能，但兩者有所區(qū)別: visibility:hidden屬性會使對象不可見，但該對象在網(wǎng)頁所占的空間沒有改變（看不見但摸得到），等于留出了一塊空白區(qū)域，而display:none`屬性會使這個對象徹底消失（看不見也摸不到）
8 . 請描述 BFC(Block Formatting Context) 及其如何工作。：
答：浮動元素和絕對定位元素，非塊級盒子的塊級容器
（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子， 都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）
會觸發(fā)BFC的條件有：
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block 中的任何一個。
position的值不為relative 和static。
折疊的結(jié)果：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。
9 . 談?wù)剺邮降膬?yōu)先級
優(yōu)先級逐級增加
0.元素(類型)選擇器 （h1） 和 偽元素選擇器 （:before）
1.類選擇器（.demo）屬性選擇器（[type="radio"]）
2.ID選擇器（#demo）
內(nèi)聯(lián)樣式
當(dāng)在一個樣式聲明上使用 !important規(guī)則時，該樣式聲明會覆蓋CSS中任何其他的聲明。
Never 永遠(yuǎn)不要在全站范圍的 css 上使用 !important
Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
Never 永遠(yuǎn)不要在你的插件中使用 !important
Always 要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important
10 . 遇上過FOUC嗎？如何解決FOUC
答：Flash of Unstyled Content (FOUC) 文檔樣式短暫失效
只需要在文檔的head元素中添加一個link元素或者添加script元素就可以防止FOUC的發(fā)生.
link元素解決方案
My Page
script元素解決方案
My Page
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112086.html
摘要：獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼，也會把默認(rèn)的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點(diǎn)個贊，點(diǎn)個star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項(xiàng)目地址 https:...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
閱讀 2589·2021-11-15 11:38
閱讀 2921·2021-11-02 14:44
閱讀 3870·2021-09-26 10:13
閱讀 3110·2021-08-13 15:02
閱讀 813·2019-08-30 15:56
閱讀 1525·2019-08-30 15:53
閱讀 2379·2019-08-30 13:01
閱讀 3263·2019-08-29 12:57
