前端面試題：(HTML&CSS）網頁布局

1、CSS中居中方式

1、絕對定位：

• top：50%；left:50%；margin-top:1/2height; margin-left:1/2width;

• margin:auto; top:0;bottom:0;left:0;right:0;

2、flex布局：

display:flex;justify-content:center;align-item:center;

3、對父容器使用

display: table-cell

+

vertical-align: middle

;使其内的子元素實作垂直居中；

2、CSS的盒子模型

盒模型分為兩種：分别是W3C标準盒模型和IE盒模型。它們都包括margin（外邊距）、border（邊框）、padding（内邊距）、content（内容）這五個部分。不同之處在于IE盒模型中content部分包括了border和padding。

3、簡述src和href的差別

src和href都是屬于外部資源的引用，像一些圖檔，css檔案，js檔案，或者其他的web頁面。

src通常用作“拿取”（引入），href 用作 “連結前往”（引用）

可以用這樣的一句話來概括：src用于替換這個元素，而href用于建立這個标簽與外部資源的關系。

4、什麼是css Hack

CSS hack是通過在CSS樣式中加入一些特殊的符号，讓不同的浏覽器識别不同的符号（什麼樣的浏覽器識别什麼樣的符号是有标準的，CSS hack就是讓你記住這個标準），以達到應用不同的CSS樣式的目的。

5、什麼叫優雅降級和漸進增強

漸進增強 progressive enhancement：

針對低版本浏覽器進行建構頁面，保證最基本的功能，然後再針對進階浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation：

一開始就建構完整的功能，然後再針對低版本浏覽器進行相容。

差別：

a. 優雅降級是從複雜的現狀開始，并試圖減少使用者體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以适應未來環境的需要

c. 降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處于安全地帶

6、浏覽器是如何渲染頁面的

1.根據html檔案建構DOM樹和CSSOM樹。建構DOM樹期間，如果遇到JS，阻塞DOM樹及CSSOM樹的建構，優先加載JS檔案，加載完畢，再繼續建構DOM樹及CSSOM樹。

2.建構渲染樹（Render Tree）。

3.頁面的重繪（repaint）與回流（reflow）。頁面渲染完成後，若JS操作了DOM節點，根據JS對DOM操作動作的大小，浏覽器對頁面進行重繪或是回流。

7、如何建立BFC,BFC作用

（1）如何建立BFC?

• 根元素
• float屬性不為none
• position不為static和relative
• overflow不為visible

• display為inline-block或者flex

  （2）BFC作用？

• 防止外邊距重疊。
• 清除浮動的影響
• 防止文字環繞

面試題