??今年秋招結束了，雖然拿到的offer不多，不能和大佬們相比，但是自己已經滿足了。秋招的過程中一直在總結面試遇到的一些問題，今天按照知識板塊做一個整理，希望能有助于要求職的各位。

---

一. Html相關問題

1. 如何理解HTML語義化

語義化含義

??語義是對一個詞或者句子含義的正確解釋，像是h1標簽，在瀏覽器解析到h1時，就將該標簽解釋為包含著一塊內容的最重要的標題。

為什么要語義化

• 在頁面沒有css的情況下，也能夠呈現出很好的內容結構
• 有利于SEO，爬蟲依賴標簽來確定關鍵字的權重，因此可以和搜索引擎建立良好的溝通，幫助爬蟲抓取更多的有效信息
• 提升用戶體驗，例如title、alt可以用于解釋名稱或解釋圖片信息，以及label標簽的靈活運用
• 便于團隊開發和維護，語義化使得代碼更具有可讀性，讓其他開發人員更加理解你的html結構，減少差異化
• 方便其他設備解析，如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁

什么是SEO

??SEO是指搜索引擎優化。全稱為(Search Engine Optimization)，是一種利用搜索引擎的規則提高網站在有關搜索引擎內自然排名的方式。目的是讓其在行業內占據領先地位，獲得品牌收益。很大程度上是網站經營者的一種商業行為，將自己或自己公司的排名前移。

語義化元素

• header:用于定義頁面的介紹展示區域
• nav：定義頁面導航鏈接部分區域
• article：定義頁面獨立內容
• section：用于標記文檔的各個部分
• aside：定義與主要內容相關的內容塊
• footer：定義文檔的底部區域
• abbr：解釋縮寫詞

2.meta標簽是什么

meta標簽的作用

??搜索引擎優化（SEO），定義頁面使用語言，自動刷新并指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩沖，網頁定級評價，控制網頁顯示的窗口等等。

meta標簽的常用屬性

• http-equiv：添加http頭部內容，對一些自定義的或者需要額外添加的發送到瀏覽器中的http頭部內容
• name：主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的

二. CSS相關問題

1.行內元素、行內塊元素、塊元素

常用元素的分類

• 行內元素：a、span、b、label、small
• 行內塊元素：input、img、
• 塊元素：p、div、ul、li、ol、form

行內塊元素和塊元素的區別

行內塊元素的display值為inline-block,塊元素為block

行內塊元素不獨占一行，塊元素獨占一行

2.css選擇器

選擇器權重

!import()	??
內聯樣式	1000
ID選擇器	0100
類選擇器/屬性選擇器/偽類選擇器	0010
元素選擇器/偽元素選擇器	0001
通配符選擇器/關系選擇器	0000

3.px、em、rem的區別

px，相對長度單位，是相對于顯示器屏幕分辨率而言的

em，相對長度單位，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。

rem，相對單位長度，相對于HTML根元素的字體尺寸。

4.BFC

什么是BFC

??BFC（Block Formatting Context，塊級格式化上下文）是W3 CSS2.1規范中的一個概念，它決定了元素如何對其內容進行定位以及和其他元素的關系和相互作用。當涉及到可視化布局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定的規則進行布局，一個環境的元素不會影響到其他元素;

BFC的觸發條件

根元素

浮動元素（float不為none）

絕對定位元素（position：absolute/fixed）

內聯塊（display：inline-block）

表格單元格（display：table-cell）

表格標題（display：table-caption）

具有overflow屬性，且值不是visible

彈性盒（display：flex/inline-flex）

BFC的約束規則

內部的盒會在垂直方向上一個一個排列

處于同一個BFC中的元素相互影響，可能會發生外邊距重疊

每個元素的margin box的左邊與容器塊border box的左邊相接觸（對于從左往右的格式化，否則相反，即使存在浮動也是如此）

BFC是頁面上獨立的一個隔離的獨立容器，與外界互不影響

BFC高度計算考慮BFC包含的所有元素，包括浮動元素

浮動盒區域不疊加到BFC上

BFC可以解決的問題

垂直外邊距重疊問題

去除浮動

自適應兩欄布局（float+overflow）

盒子塌陷（浮動）

什么是盒子塌陷，為什么會出現盒子塌陷

• 現象：本應該在父盒子內部的元素跑到了外部。
• 原因當父元素的高度小于子元素高度，且子元素設置了浮動屬性時，子元素就會脫離文檔流，父元素的高度就無法由子元素撐開，就會發生盒子高度塌陷，這個時候需要給父級清除浮動

清除浮動的方法

overflow：auto/hidden

父盒子里最下方引入清楚浮動塊

給父級的偽元素after添加清除浮動三件套

4.實現水平垂直居中

1.position+transform/(margin-left/top)

.box{width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: blueviolet; }

2.flex

.wrap {width: 200px;height: 200px;display: flex;align-items: center;justify-content: center;background-color: brown; }

5.盒模型

盒模型分類

• 標準盒模型：盒子內容區的寬度=width，內容區高度=height，實際寬度=左右border+左右padding+width，實際高度=上下border+上下padding+height；
• IE盒模型盒：子內容區的寬度=width-左右border- 左右padding；內容區高度=height-上下border-上下padding，實際寬度=width，實際高度=height；

IE盒模型的使用場景

寬度不確定（百分數），但內邊距固定；

input，因為默認帶兩像素的邊框，父級寬度不確定，且input又想與父級同寬，則可使用該屬性來實現，輸入框想加padding更方便

6.前端常見布局

文檔布局

浮動布局

定位布局

流式布局

彈性布局

自適應布局

響應式布局

7.flex

flex:1是什么

• flex-grow：1；：設置了一個flex項主軸方向上尺寸的增長系數，它指定了flex容器中剩余空間應該如何分配給項目
• flex-shrink:1;：指定了flex元素的收縮規則
• flex-basis:0%:當所有子項的flex-basis屬性值之和小于盒子的寬度時，flex-basis的屬性值會覆蓋width的屬性值，此時在計算盒子伸縮時以flex-basis為基準

8.動畫，動畫性能

JavaScript直接實現

思路：通過setInterval/setTimeout方法的回調函數的持續調用來改變某個元素的CSS樣式，達到元素樣式變化的效果

缺點：JavaScript實現動畫會導致頁面頻繁性重排重繪，消耗性能，一般使用在PC端瀏覽器，在移動端會有明顯卡頓

提問：setInterval為什么設置16ms，因為一般認為人眼能辨識的流暢動畫為每秒60幀，在很多移動端動畫性能優化時，一般使用1000/60=16ms來進行節流處理連續觸發頻率，可以大大提升動畫的流暢性

SVG

優點：含有較豐富的動畫功能，原生繪制各種圖形、濾鏡和動畫，并且能被JS調用

缺點：元素較多且復雜的動畫使用svg渲染會比較慢

transition

??transition是過渡動畫，它不能實現獨立動畫，只能在某個標簽元素樣式或狀態改變時，進行平滑的動畫過渡效果。

???? transition動畫會讓頁面卡頓，因此通常添加transform：translate3D(0,0,0)來開啟GPU加速，讓動畫更加流暢

animation

??animation通過對關鍵幀和循環次數的控制，頁面標簽元素會根據設定好的樣式改變。

優點：擺脫了JS的控制，并且能利用硬件加速，可以實現復雜的動畫效果

canvas

??通過getContext()獲取元素的繪制對象，優點是可以解決頁面中多個動畫元素渲染較慢的情況，完全通過javaScript來渲染控制動畫的執行，可用于實現較復雜的動畫

requestAnimationFrame

原理與setTimeout/setInterval類似，都是通過JavaScript持續循環的方法調用來觸發動畫動作，但是requestAnimationFrame是瀏覽器針對動畫專門優化形成的API，性能上要比setTimeout/setInterval好得多。

9.css效果

旋轉45度

.box{transform:rotate(45deg) }

實現三角形

.box{width: 0px;height: 0px;border: 10px solid transparent;border-top-color: tomato; }

10.translate和translate3D的區別

translate3D可以使用GPU進行加速，translate是2D移動，不能調用GPU進行3D加速

translate是一個二維度的向量，translate3D是三維向量，可以在z軸方向上移動，并不會影響到別的dom和自己原先位置

translte是相對于元素變化前原生的位置進行移動，并不會影響到別的dom和自己的原先位置，只是渲染發生了變化，因此translate只觸發頁面重繪

11.display：none；visibility：hidden；opacity：0的區別

是否占據空間

• display:none,隱藏后不占位置
• visibility:hidden/opacity:0,隱藏后仍然占據位置

子元素是否繼承

• display:none,不會被子元素繼承
• visibility:hidden,會被子元素繼承，通過設置子元素visibility:visible來顯示子元素
• opacity:0,會被子元素繼承，但不能設置opacity來重新顯示

事件綁定

• display:none,無法觸發綁定事件
• visibility:hidden,不會出發綁定事件
• opacity:0,可以出發綁定事件

過渡動畫

• display:none,transition無效
• visibility:hidden，transition無效
• opacity:0,transition有效

12.回流與重繪

回流

??當renderTree中部分或全部元素的尺寸、結構，或某些屬性發生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流，會導致回流的操作有：

• 頁面首次渲染
• 瀏覽器窗口大小發生改變
• 元素尺寸或位置發生改變
• 元素內容發生變化
• 元素字體大小變化
• 添加或刪除可見的dom元素
• 激活css偽類
• 查詢某些屬性或調用某些方法
  • clientWidth/clientHeight/clientTop/clientLeft
  • offsetWidth/offSetHeight/offSetTop/offSetLeft
  • scrollWidth/scrollHeight/scrollTop/scrollLeft
  • scrollIntoView/scrollIntoViewIfNeeded
  • getComputedStyle();
  • getBoundingClientRect();
  • scrllTo();
    ???? 當瀏覽器頻繁發生重繪時，瀏覽器會把所有改動放在隊列中，統一進行一次重排和重繪。但是，當遇到 clientWidth, clientHeight, OffsetWidth, OffsetHeight 這些屬性的時候，瀏覽器的緩存渲染隊列機制就不再生效了，因為，clientWidth 是一個元素的實時寬度，必須重排重繪以后才能得到，如果不提前進行重排重繪，clientWidth 有可能拿到的是瀏覽器緩存隊列沒執行完的時候的值。

重繪

當頁面中元素樣式的改變不影響它在文檔流中的位置等，瀏覽器會將新樣式賦予給元素并重新繪制該元素，這一過程稱為重繪,避免重繪的方法如下：

css方面

• 避免使用table布局
• 盡可能在Dom樹的最末端改變class
• 避免設置多層內聯樣式
• 將動畫效果應用到position屬性為absolute/fixed的元素上
• 避免使用css表達式（calc）

JavaScript方面

• 避免反復操作樣式
• 避免頻繁操作DOM
• 避免頻繁讀取會引發的回流/重繪的屬性

13. 瀏覽器渲染過程

瀏覽器會將HTML解析成一個DOM樹，DOM樹的構建過程是一個深度遍過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點

將CSS解析成CSS rule tree

根據DOM樹和CSSOM來構造Rendering Tree

繪制，遍歷render樹，并使UI后端層繪制每個節點
???? Rendering Tree渲染書并不等同于DOM樹，因為一些像header或display：none不在渲染樹中。有了Render Tree，瀏覽器就能知道網頁中有哪些節點、各節點的CSS定義以及他們的從屬關系。下一步進行layout，即計算出每個節點在屏幕中的位置

???? 上述這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎會盡可能早的將內容呈現到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹，它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容

14.偽類選擇器（被選擇元素的一種狀態）

基本過濾選擇器

E:not()：選擇除滿足括號內條件的E元素，常用于列表最后一個元素不設置底邊線

:root：選擇根節點，html文件中，該選擇器等于html標簽選擇器，xml文件同理

E:nth-child(n)：若E在其兄弟節點中排第n位，則將樣式賦予E

子元素過濾選擇器

E:first-child：如果E是某元素的第一個子元素，則將樣式賦予E

E:last-child：與:first-child同理

E:only-child：若E是某元素的唯一一個子元素，則賦予樣式

內容過濾選擇器

E:empty：選擇內容完全為空的E

表單對象屬性過濾選擇器

E:checked

E:disabled

E:enabled

E:read-only

E:read-write

偽元素選擇器

E::placeholder

E::selection

偽類和偽元素選擇器

• 偽類選擇器：偽類可以用來定義樣式，但不會出現在HTML文檔中
• 偽元素選擇器：用于css渲染中向元素邏輯上的頭部或尾部添加內容，這些添加不會出現在DOM中，不會改變文檔內容，不可復制，僅僅是在css渲染層加入，一般用來顯示修飾性內容，比如圖標。

15. 獲取元素在頁面的位置

function getTop(e){let offset = e.offsetTop;if(e.offsetParent!=null){offset+=getTop(e.offsetParent)}return offsetl }

• HTMLElement.offsetTop 只讀屬性，返回當前元素相對于其offsetParent元素頂部內邊距的距離
• HTMLElement.offsetParent 只讀屬性，返回一個指向最近的（包含層級上的最近）包含該元素的定位元素或者最近的table、td、th、body元素。
• Element.clientWidth/Height = width/height + padding;
• HTMLElement.offsetWidth/Height = border+padding+(scrollbar)+width/height

16. css預處理器、后處理器

預處理器

sass 可以定義變量，變量名以$開頭
less 在nodejs中使用

后處理器

css后處理器是對css進行處理，并最終生成css預處理器，它屬于廣義上的css預處理器

less實現原理

取到less代碼的分析樹

將含有動態生成相關節點的分析樹轉換為靜態分析樹

將靜態分析樹轉換為css的靜態分析樹

將css的靜態分析樹轉換為css代碼

17.圣杯布局

要求

header和footer各自占領屏幕所有寬度，高度固定。

中間的container是一個三欄布局。

三欄布局兩側寬度固定不變，中間部分自動填充整個區域。

中間部分的高度是三欄中最高的區域的高度。

方法

浮動

flex

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的前端面试分享：秋招总结（html和css篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。