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