那個相親網(wǎng)站做的比較好網(wǎng)站流量分析工具
HTML5、CSS3面試題（二）
rem 適配方法如何計算 HTML 跟字號及適配方案？（必會）
通用方案
1、設置根 font-size：625%（或其它自定的值，但換算規(guī)則 1rem 不能小于 12px）
2、通過媒體查詢分別設置每個屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可換算為 rem
優(yōu)：有一定適用性，換算也較為簡單
北京市順義區(qū)京順路 99 號·黑馬程序員 www.itheima.com
第 39 頁 共 348 頁 北京市順義區(qū)京順路 99 號·黑馬程序員 www.itheima.com
第 40 頁 共 348 頁
劣：有兼容性的坑，對不同手機適配不是非常精準；需要設置多個媒體查詢來適應不同
手機，單某款手機尺寸不在設置范圍之內(nèi)，會導致無法適配
網(wǎng)易方案
1、拿到設計稿除以 100，得到寬度 rem 值
2、通過給 html 的 style 設置 font-size，把 1 里面得到的寬度 rem 值代入
x document.documentElement.style.fontSize =
document.documentElement.clientWidth / x + ‘px‘;
3、設計稿 px/100 即可換算為 rem
優(yōu)：通過動態(tài)根 font-size 來做適配，基本無兼容性問題，適配較為精準，換算簡便
劣：無 viewport 縮放，且針對 iPhone 的 Retina 屏沒有做適配，導致對一些手機的適
配不是很到位
手淘方案
1、拿到設計稿除以 10，得到 font-size 基準值
2、引入 flexible
3、不要設置 meta 的 viewport 縮放值
4、設計稿 px/ font-size 基準值，即可換算為 rem
優(yōu)：通過動態(tài)根 font-size、viewpor、dpr 來做適配，無兼容性問題，適配精準。
劣：需要根據(jù)設計稿進行基準值換算，在不使用 sublime text 編輯器插件開發(fā)時，單
位計算復雜
CSS 中 link 和@import 的區(qū)別？（必會）
適用范圍不同
@import 可以在網(wǎng)頁頁面中使用，也可以在 CSS 文件中使用，用來將多
個
CSS 文件引入到一個 CSS 文件中；而 link 只能將 CSS 文件引入到網(wǎng)頁頁面中
功能范圍不同
link 屬于 XHTML 標簽，而@import 是 CSS 提供的一種方式，link 標簽除
了可以加載 CSS 外，還可以定義 RSS，定義 rel 連接屬性等，@import 就只能加載 CSS
加載順序不同
當一個頁面被加載的時候，link 引用的 CSS 會同時被加載，而@import
引用的 CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import 加載 CSS 的頁
面時開始會沒有樣式（就是閃爍），網(wǎng)速慢的時候還挺明顯
兼容性
由于@import 是 css2.1 提出的，所以老的瀏覽器不支持，@import 只有在 IE5
以上的才能識別，而 link 標簽無此問題
控制樣式時的差別
使用 link 方式可以讓用戶切換 CSS 樣式.現(xiàn)代瀏覽器如
Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”屬性(即可在瀏覽器上選擇不同 的風格),
當然你還可以使用 Javascript 使得 IE 也支持用戶更換樣式
權重區(qū)別 link 引入的樣式權重大于@import 引入的樣式
22、Display：none 與 visibility：hidden 的區(qū)別 ？（必會）
最常用的為 display:none 和 visibility:hidden
dispaly:none 設置該屬性后，該元素下的元素都會隱藏，占據(jù)的空間消失北京市順義區(qū)京順路 99
visibility:hidden 設置該元素后，元素雖然不可見了，但是依然占據(jù)空間的位置
區(qū)別
1.visibility 具有繼承性，其子元素也會繼承此屬性，若設置 visibility:visible，則子元
素會顯示
2.visibility 不會影響計數(shù)器的計算，雖然隱藏掉了，但是計數(shù)器依然繼續(xù)運行著。
3.在 CSS3 的 transition 中支持 visibility 屬性，但是不支持 display，因為 transition 可
以延遲執(zhí)行，因此配合 visibility 使用純 CSS 實現(xiàn) hover 延時顯示效果可以提高用戶
體
驗
4.display:none 會引起回流(重排)和重繪 visibility:hidden 會引起重繪
Position 的值有哪些，分別有哪些作用？（必會）
static：默認值
不脫離文檔流，top，right，bottom，left 等屬性不生效
絕對定位：absolute
絕對定位的關鍵是找對參照物，要成為絕對定位元素的參照物必須滿足以下兩個條件：
1.參照物和絕對定位元素必須是包含與被包含關系；
2.該參照物必須具有定位屬性；
如果找不到滿足以上兩個條件的父包含塊，那么相對于瀏覽器窗口進行定位
注：設置了 position:absolute;屬性后，元素會脫離正常文檔流，不在占據(jù)空間；左右 margin
為 auto 將會失效；我們通過 left、top、bottom、right 來決定元素位置
相對定位：relative
參照物：元素偏移前位置
注：設置了相對定位，左右 margin 為 auto 仍然有效、并且不會脫離文檔流。
固定定位：fixed
參照物：瀏覽器窗口；
注：固定定位會脫離文檔流；
當絕對定位和固定定位參照物都是瀏覽器窗口時的區(qū)別： 當出現(xiàn)滾動條時，固定定位的元 素不會跟隨滾動條滾動，絕對定位會跟隨滾動條滾動 為什么會出現(xiàn)浮動？浮動元素會引起什么問題？如何清除浮動？（必會）
浮動定位將元素排除在普通流之外，即元素講脫離文檔流，不占據(jù)空間。浮動元素碰到包
含它的邊框或者浮動元素的邊框停留
為什么需要清除浮動
1、父元素的高度無法被撐開，影響與父元素同級的元素；
2、與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后； 北京市順義區(qū)京順路 99 號·黑馬程序員 www.itheima.com
第 42 頁 共 348 頁
3、若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構解
決方法
清除浮動的方式
1、使用 CSS 中的 clear:both;（放一個空的 div，并設置上述 css）,屬性來清除元素的浮動
可解決 2、3 問題
2、對于問題 1，添加如下樣式，給父元素添加 clearfix 樣
式：.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.cl
earfix{display: inline-block;} /* for IE/Mac */
3、給父級元素設置雙偽元素
HTML5、CSS3面試題（四）-CSDN博客