HTML+CSS部分
一.說一說HTML的語義化
在我看來，它的語義化其實是為了便于機器來看的，當然，程序員在使用語義化標簽時也可以使得代碼更加易讀，對于用戶來說，這樣有利于構建良好的網頁結構，可以在優化用戶體驗，對于機器而言，語義化的使用，方便了搜索引擎的一些優化，方便機器識別，便于爬取利用。
一般常用的標簽有?
<header>,<footer><nav>,<main>,<article>等
二.說一說盒模型
我對于盒子模型的認知里，
盒模型的幾個部分由外到內：外邊距（margin），邊框（border），內邊距（padding），內容（content，包括長和寬）
所以根據盒子大小計算的不同方式，把盒子模型分為了兩種，一種是標準盒，一種是怪異盒。
標準盒：在設置width和height時，只是修改內容（content）的大小，盒子的大小還要加上邊框（border）和內邊距（padding）
怪異盒：在設置width和height時，設置的是整個盒子的大小，它包含了邊框（border），內邊距（padding），內容（content）區域，所以顯示的時候，內容區域看起來會被壓縮，
一般我們使用的是W3C標準盒模型（content-box），
也可以通過設置box-sizing屬性決定盒模型
box-sizing:border-box代表怪異盒模型
box-sizing:content-box代表標準盒模型
三.說一下浮動
浮動就是給塊級元素添加一個屬性：
float：left/right
?使用浮動可以實現文字的環繞圖片，
浮動的特點：使得元素脫離文檔流，容易造成塌陷，影響其他元素的排列
所以，在使用浮動時，我們還要解決可能出現的塌陷問題
塌陷問題就是指浮動的元素超出了父元素的寬高，使得父元素塌陷
所以解決方法如下：
1.給父元素設置 overflow：hidden，超出部分隱藏
2.給父元素添加高度。使其能包裹住浮動元素
3.在浮動元素的最后添加新的<div>標簽，使用clear：left/right/both屬性清除浮動
4.使用偽元素：::after { content: ""; display: block; clear: both; }
還可以說使用flex布局來解決浮動帶來的問題，然后話題就跳轉到flex?
四.說一說樣式優先級的規則是什么
css的樣式優先級
!important > 內聯樣式 > ID 選擇器（#id{}） > 類選擇器（.class{}） = 屬性選擇器（a[href="segmentfault.com"]{}） = 偽類選擇器（ :hover{}） > 標簽選擇器（span{}） = 偽元素選擇器（ ::before{}）= 后代選擇器（.father .child{}）> 子選擇器（.father > .child{}） = 相鄰選擇器（ .bro1 + .bro2{}） > 通配符選擇器（*{}）
?
五.說一說CSS尺寸設置的單位
分為以下幾類：
px:絕對大小，取決于屏幕的分辨率
%：相對父元素的大小所占據的百分比
rem：相對于根元素的大小（即
<html>元素）的字體大小。em：相對長度單位，在 `font-size` 中使用是相對于父元素的字體大小，在其他屬性中使用是相對于自身的字體大小，如 width。如當前元素的字體尺寸未設置，由于字體大小可繼承的原因，可逐級向上查找，最終找不到則相對于瀏覽器默認字體大小
vh,vw：相對于屏幕視口大小
六.說一說BFC
定義：
塊級的格式化上下文，獨立的渲染區域，不會影響邊界以外的元素布局
產生BFC：
1.使用?float屬性不為none
2.position為absolute或fixed
3、display為inline-block、table-cell、table-caption、flex、inline-flex
4、overflow不為visible
一些情況下使用border也可以產生BFC
例如:把父元素的border和overflow都去除后，產生了外邊距塌陷，即：浮動元素與另一個元素的上外邊距產生了合并，都使用了大的那個上外邊距，此時父元素添加任意一個屬性都可以產生一個BFC解決外邊距的塌陷。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BFC Example</title> <style>.container {border: 1px solid black;overflow: auto; /* 觸發 BFC */}.float-left {float: left;width: 100px;height: 100px;background-color: red;margin-right: 20px;}.child {background-color: blue;width: 100px;height: 100px;margin-top: 20px;} </style> </head> <body> <div class="container"><div class="float-left"></div><div class="child"></div> </div> </body> </html>
BFC的一些特性：
1、在BFC中，盒子從頂部開始垂直地一個接一個排列
2、盒子垂直方向的距離由margin決定。同一個BFC的兩個相鄰盒子margin會重疊
3、BFC中，margin-left會觸碰到border-left（對于從左至右的方式，反之）
4、BFC區域不會與浮動的盒子產生交集，而是緊貼邊緣浮動
5、計算BFC高度時，自然會檢測浮動的盒子高度
目前來說，第五點算是比較直觀的可以體現的，其他幾點的話簡單場景是否使用BFC樣式體現是幾乎沒有區別的?
使用 BFC 的好處體現在更復雜的布局和樣式設計中，其中一些情況下會更明顯：
阻止外邊距折疊：BFC 可以防止相鄰塊級元素之間外邊距的折疊，確保布局更加可控和可預測。
清除浮動：BFC 可以包含浮動元素，使得父元素可以自適應浮動元素的高度，防止父元素坍塌。
自適應布局：BFC 可以使得元素在布局過程中自適應父元素的大小，并防止元素溢出父元素的邊界。
避免文字環繞：使用 BFC 可以防止文本環繞浮動元素，使得文本不會被浮動元素覆蓋。
BFC解決問題：
1、清除內部浮動，父元素設置為BFC可以清除子元素的浮動（最常用overflow:hidden，IE6需加上*zoom:1）：計算BFC高度時會檢測浮動子盒子高度
2、解決外邊距合并問題
3、右側盒子自適應：BFC區域不會與浮動盒子產生交集，而是緊貼浮動邊緣
七.說幾個未知寬高元素水平垂直居中方法
1.使用display：flex布局
justify-content: center; align-items: center;2.設置元素相對父級定位
position:absolute; left:50%; right:50%3.讓自身平移自身高度50% ，這種方式兼容性好，被廣泛使用的一種方式
transform: translate(-50%,-50%);4.使用display：grid布局
justify-content:center; align-items:center5.使用display: table-cell,
設置元素的父級為表格元素 display: table-cell; text-align: center; vertical-align: middle;設置子元素為行內塊 display: inline-block;
八.說一說三欄布局的實現方案
粗略方案
使用浮動（Float）：
- 左右欄使用
float: left;和float: right;，中間內容區域使用margin來調整位置。- 優點：兼容性好，適用于舊版瀏覽器。
- 缺點：需要清除浮動以避免父容器高度塌陷，可能需要額外的清除浮動的樣式。
使用定位（Positioning）：
- 左右欄使用
position: absolute;，中間內容區域使用margin來調整位置。- 優點：靈活性高，可以輕松實現各種復雜布局。
- 缺點：對父容器定位可能造成影響，需要謹慎使用。
使用Flexbox布局：
- 將父容器設置為
display: flex;，并且使用flex-grow來調整左右欄和中間內容的比例。- 優點：簡單易用，支持響應式布局，適應性強。
- 缺點：對于一些舊版瀏覽器的兼容性不好。
使用Grid布局：
- 使用CSS Grid布局，將父容器設置為網格布局，然后通過設置網格列來實現三欄布局。
- 優點：靈活性強，對于復雜的布局可以更容易實現。
- 缺點：對于一些舊版瀏覽器的兼容性不好。
使用表格布局：
- 使用HTML表格標簽
<table>來實現三欄布局，左右欄放在表格的兩側，中間內容放在表格的中間。- 優點：兼容性好，簡單易懂。
- 缺點：不推薦使用表格來布局，不利于語義化，不夠靈活。
在選擇布局方案時，可以根據項目需求、兼容性要求和開發者的技術棧選擇合適的方案。Flexbox和Grid布局是現代Web開發中推薦的布局方式，它們提供了更多的布局控制和靈活性。
1.使用浮動，
一般情況的等比三欄布局：都設置 float：left，注意最后清除浮動
雙飛翼：
- 它的主要思想是將左右兩個側邊欄用負外邊距進行定位，使它們能夠脫離文檔流，而主要內容區域則通過左右內邊距來避開側邊欄的位置。這樣做的好處是，使得主要內容區域可以在文檔流中優先渲染，而側邊欄則在視覺上緊跟在主要內容后面。
- 雙飛翼布局的關鍵在于使用額外的空元素作為浮動容器，通過負外邊距來實現定位。
圣杯：
- 與雙飛翼布局類似，圣杯布局也使用了負外邊距和浮動來實現。
- 不同之處在于，圣杯布局采用了更多的 CSS 技巧來實現側邊欄的自適應高度，避免了雙飛翼布局中使用空元素的方式。這種布局模型通常會使用相對定位和負邊距來為側邊欄留出空間，并使用相對定位將主要內容區域拉回來。
?
總結：
圣杯流程：中間元素放最前，寬度100%，左右元素固定寬度，三個元素都用float：left
中間元素使用padding空出左右的位置，左右通過margin和相對定位進行移動
雙飛翼：中間元素放最前，需要單獨在把內容部分包裹，然后設置padding，之后只使用margin進行左右位置的移動
?
雙飛翼布局比圣杯布局多了一層DOM節點
雙飛翼布局源碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>雙飛翼布局</title> </head><!-- 雙飛翼布局實現效果 --> <!-- 1、目的：兩側內容寬度固定，中間內容寬度自適應 --> <!-- 2、三欄布局，中間一欄最先加載、渲染出來 --> <!-- 實現方法：float+margin --><!-- 靠在中間這層外面套一層div加padding將內容擠出來中間 --><body><div class="header">header</div><div class="main middle"><div id="main-wrapper">middle</div></div><div class="left">left</div><div class="right">right</div><div class="footer">footer</div> </body></html> <style>* {margin: 0;padding: 0;}body {/* 設置最小寬度，防止擠壓使中間內容消失 */min-width: 600px;}.header {text-align: center;height: 70px;background-color: coral;}.main #main-wrapper {margin-left: 100px;margin-right: 100px;}.left,.middle,.right {float: left;}.left {height: 100px;width: 100px;background-color: darkmagenta;margin-left: -100%;}.right {height: 100px;width: 100px;background-color: darkslategray;margin-left: -100px;}.middle {height: 100px;width: 100%;min-width: 200px;background-color: forestgreen;/* 不能在外層容器里面加padding，否則會使布局亂套 *//* padding-left: 100px;padding-right: 100px; */}.footer {text-align: center;height: 50px;clear: both;background-color: darkgrey;} </style>
圣杯布局源碼：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣杯布局</title>
</head><!-- 圣杯布局實現效果 -->
<!-- 1、目的：兩側內容寬度固定，中間內容寬度自適應 -->
<!-- 2、三欄布局，中間一欄最先加載、渲染出來 -->
<!-- 實現方法：float搭建布局+margin使三列布局到一行上+relative相對定位調整位置 --><!-- 不同之處：怎么處理兩列的位置 -->
<!-- 給外部容器加padding，通過相對定位把兩邊定位出來 --><!-- 相同之處： -->
<!-- 讓左中右三列浮動，通過父外邊距形成三列布局 --><body><div class="header">header</div><div class="content wrapper"><div class="middle">middle</div><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div>
</body></html>
<style>* {margin: 0;padding: 0;}body {/* 設置最小寬度，防止擠壓使中間內容消失 */min-width: 600px;}.header,.footer {background-color: #bbe0e3;height: 100px;border: dimgray 1px solid;}/* 通過BFC解決高度塌陷 *//* .content {overflow: hidden; } */.footer {/* 通過清除底部浮動解決高度塌陷 */clear: both;}.wrapper {padding-left: 100px;padding-right: 100px;}.content .middle,.left,.right {background-color: #d9d9d9;}.middle {height: 100px;background-color: dimgray;/* 中間列自適應，所以寬度100%繼承父元素寬度 */width: 100%;float: left;}.left {height: 100px;background-color: #d5d50f;width: 100px;float: left;position: relative;margin-left: -100%;right: 100px;}.right {height: 100px;background-color: #8cca4d;width: 100px;float: left;margin-right: -100px;}
</style>2.使用 display：flex
通過flex-grow分配比例
?
拓展
flex: 1;是flex-grow,flex-shrink, 和flex-basis屬性的縮寫形式。這三個屬性通常一起使用來定義 Flexbox 容器中每個項目的伸縮性、收縮性和初始大小。具體地說：
flex-grow：定義了項目的增長系數，決定了項目在可用空間中的分配比例。flex-shrink：定義了項目的收縮系數，決定了項目在空間不足時的縮小比例。flex-basis：定義了項目的初始大小。它可以是一個長度值（如像素、百分比等），也可以是auto，表示由項目的內容決定初始大小。當使用
flex: 1;縮寫時，這三個屬性的值被設置為默認值：
flex-grow: 1;，即項目可以根據可用空間擴張。flex-shrink: 1;，即項目可以縮小。flex-basis: 0%;，即項目的初始大小為0%，允許項目根據內容和空間自動調整大小。因此，
flex: 1;的效果是使得所有具有該屬性的項目平均地占據剩余空間，而不考慮它們的初始大小。這在創建靈活的布局時非常有用，例如使所有項目在父容器中均勻分布并填充剩余空間。
JS部分
九.說一說JS數據類型有哪些,區別是什么？
JS數據類型分為兩類：
基本數據類型，
也叫簡單數據類型，包含7種類型，分別是Number 、String、Boolean、BigInt、Symbol、Null、Undefined。
引用數據類型(復雜數據類型)
通常用Object代表，普通對象，數組，正則，日期，Math數學函數都屬于Object。
?數據分成兩大類的本質區別：
基本數據類型和引用數據類型它們在內存中的存儲方式不同。
基本數據類型
是直接存儲在棧中的簡單數據段，占據空間小，屬于被頻繁使用的數據。
引用數據類型是存儲在堆內存中，占據空間大。引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址，當解釋器尋找引用值時，會檢索其在棧中的地址，取得地址后從堆中獲得實體。
拓展：
?Symbol
是ES6新出的一種數據類型，這種數據類型的特點就是沒有重復的數據，可以作為object的key。
數據的創建方法Symbol()，因為它的構造函數不夠完整，所以不能使用new Symbol()創建數據。由于Symbol()創建數據具有唯一性，所以 Symbol() !== Symbol(), 同時使用Symbol數據作為key不能使用for獲取到這個key，需要使用Object.getOwnPropertySymbols(obj)獲得這個obj對象中key類型是Symbol的key值。
?let key = Symbol('key'); let obj = { [key]: 'symbol'}; let keyArray = Object.getOwnPropertySymbols(obj); // 返回一個數組[Symbol('key')] obj[keyArray[0]] // 'symbol'
BigInt也是ES6新出的一種數據類型，這種數據類型的特點就是數據涵蓋的范圍大，能夠解決超出普通數據類型范圍報錯的問題。
?
使用方法：
-整數末尾直接+n：647326483767797n
-調用BigInt()構造函數：BigInt("647326483767797")
?注意：BigInt和Number之間不能進行混合操作
＞)
