H五、CSS3面試題，帶走不用謝

H5篇

 

新特性、移除了哪些元素？如何處理新標籤兼容？

新特性

1. 語義化標籤，header、nav 、footer、section、aside、dialog
2. 加強型表單，Input新增date、email、color、number、tel類型
3. 視頻和音頻
4. Canvas繪圖
5. 本地存儲，sessionStorage、localStorage
6. WebSocket

移除的元素

<font> 字體標籤

<center> 水平居中

<u> 下劃線

<big> 大字體

新標籤兼容方案

1. 經過js動態建立新標籤，實現兼容
2. 使用h5框架, Bootstrap、MUI、uni-app等，實現兼容

 

標籤語義化

1. 便於閱讀以及維護
2. 結構更清晰，便於瀏覽器、搜索引擎解析
3. 便於爬蟲爬取，有利於SEO

 

離線儲存

localStorage長期存儲，瀏覽器關閉後數據不丟失

sessionStorage會話存儲，當前頁關閉後自動刪除

 

cookie,localStorage,sessionStorage三者區別

1. cookie 數據可在瀏覽器和服務器間來回傳遞，而sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存
2. cookie大小不超過 4k，sessionStorage 和 localStorage可達到5M或更大
3. cookie在設置的過時時間以前一直有效，即便窗口或瀏覽器關閉；sessionStorage在當前窗口關閉後自動刪除，localStorage除非主動刪除數據

 

cookie和session區別

1. 存放位置不一樣，cookie數據存放在客戶端，session數據放在服務端
2. 安全性能不一樣，session比cookie更安全
3. 存儲大小不一樣，cookie不能超過4K，而session存儲在服務端，瀏覽器對其無限制

 

實現瀏覽器多個標籤頁的通訊

1. websocket
2. 調用localstorge、cookies等本地存儲方式

 

盒模型

瀏覽器將元素解析成一個個具備空間大小的盒子，包含content、padding、border、margin四部分

 

 

C3篇

 

新增僞類

nth-child，子元素選擇器

first-of-type，選擇其父元素的首個元素

last-of-type，選擇其父元素的最後元素

enabled、disable，表單控件的禁用狀態

checked，單選框或複選框被選中

 

元素垂直水平居中

1. 先absolute定位，left、top都設爲50%，再margin設定寬高一半的負值，可用來居中浮動元素
2. 先absolute定位，left、top、bottom、right都設爲0，再margin：auto
3. 先absolute定位,，left、top都設爲50%，再設置偏移量transform: translate(-50%, -50%)

 

圖片等比縮放

img設置max-width: 100%;max-height: 100%

 

flex經常使用屬性

flex-direction，值row、column等，決定主軸方向

justify-content，值flex-start、flex-end、center等，決定主軸對齊方式

align-items，值flex-start、flex-end、center等，決定交叉軸上對齊方式

 

display: none與visibility: hidden區別

display：none不顯示對應的元素，在文檔佈局中再也不分配空間（重排+重繪）
visibility：hidden隱藏對應元素，在文檔佈局中仍保留原來的空間（重繪）

 

清除浮動方式

1. 在結尾處添加空標籤，再clear:both（不推薦）
2. 父級元素定義overflow:hidden（不推薦）
3. 使用after僞元素清除浮動（推薦）
4. 使用before和after雙僞元素（推薦）