前端面试分享：秋招总结（html和css篇）
??今年秋招結束了，雖然拿到的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
行內塊元素和塊元素的區別
2.css選擇器
| !import() | ?? |
| 內聯樣式 | 1000 |
| ID選擇器 | 0100 |
| 類選擇器/屬性選擇器/偽類選擇器 | 0010 |
| 元素選擇器/偽元素選擇器 | 0001 |
| 通配符選擇器/關系選擇器 | 0000 |
3.px、em、rem的區別
4.BFC
什么是BFC
??BFC（Block Formatting Context，塊級格式化上下文）是W3 CSS2.1規范中的一個概念，它決定了元素如何對其內容進行定位以及和其他元素的關系和相互作用。當涉及到可視化布局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定的規則進行布局，一個環境的元素不會影響到其他元素;
BFC的觸發條件
BFC的約束規則
BFC可以解決的問題
什么是盒子塌陷，為什么會出現盒子塌陷
- 現象：本應該在父盒子內部的元素跑到了外部。
- 原因當父元素的高度小于子元素高度，且子元素設置了浮動屬性時，子元素就會脫離文檔流，父元素的高度就無法由子元素撐開，就會發生盒子高度塌陷，這個時候需要給父級清除浮動
清除浮動的方法
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盒模型的使用場景
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的區別
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 有可能拿到的是瀏覽器緩存隊列沒執行完的時候的值。
重繪
當頁面中元素樣式的改變不影響它在文檔流中的位置等，瀏覽器會將新樣式賦予給元素并重新繪制該元素，這一過程稱為重繪,避免重繪的方法如下：
- 避免使用table布局
- 盡可能在Dom樹的最末端改變class
- 避免設置多層內聯樣式
- 將動畫效果應用到position屬性為absolute/fixed的元素上
- 避免使用css表達式（calc）
- 避免反復操作樣式
- 避免頻繁操作DOM
- 避免頻繁讀取會引發的回流/重繪的屬性
13. 瀏覽器渲染過程
???? Rendering Tree渲染書并不等同于DOM樹，因為一些像header或display：none不在渲染樹中。有了Render Tree，瀏覽器就能知道網頁中有哪些節點、各節點的CSS定義以及他們的從屬關系。下一步進行layout，即計算出每個節點在屏幕中的位置
???? 上述這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎會盡可能早的將內容呈現到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹，它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容
14.偽類選擇器（被選擇元素的一種狀態）
基本過濾選擇器
子元素過濾選擇器
表單對象屬性過濾選擇器
偽元素選擇器
偽類和偽元素選擇器
- 偽類選擇器：偽類可以用來定義樣式，但不會出現在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實現原理
17.圣杯布局
要求
方法
總結
以上是生活随笔為你收集整理的前端面试分享：秋招总结（html和css篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小程序同时设置点击跳转与自动跳转导致重复
- 下一篇： Matlab之logspace