1.說一下CSS的盒模型

在HTML頁面中的所有元素都可以看成是一個盒子

盒子的組成：內容content、內邊距padding、邊框border、外邊距margin

盒模型的類型：

? ? ? ? 標準盒模型

? ? ? ? ? ? ? ? margin + border + padding + content

? ? ? ? IE盒模型

? ? ? ? ? ? ? ? margin + content（包括border + padding）

控制盒模型的模式：box-sizing：content-box（默認值，標準盒模型）、border-box（IE盒模型）

2.CSS選擇器的優先級

CSS的特性：繼承性、層疊性、優先級

優先級：寫CSS樣式的時候，會給同一個元素添加多個樣式，此時誰的權重高就顯示誰的樣式

選擇器有：標簽、類/偽類/屬性、全局選擇器、行類樣式、id、!important

優先級分別為：

????????!important >?行類樣式 > id >?類/偽類/屬性 >?標簽 >?全局選擇器

3.隱藏元素的方法有哪些

display:none;

? ? ? ? 元素在頁面上消失。不占據空間

opacity:0;

? ? ? ? 設置了元素的透明度為0，元素不可見，占據空間位置

visibility:hidden;

? ? ? ? 讓元素消失，占據空間位置，一種不可見的狀態

position:absolute;

clip-path

?4.px和rem的區別是什么

px是像素，顯示器上給我們呈現畫面的像素，每個像素的大小是一樣的，絕對單位長度

rem是相對單位，相對于html根節點的font-size的值，直接給html節點的font-size:62.5%

? ? ? ? 1rem = 10px? (16px * 62.5% = 10px)

5.重繪重排有什么區別

重繪：當元素的外觀（比如顏色、背景色等不影響布局的樣式）發生改變時，瀏覽器對該元素進行重新繪制的過程。

重排：也稱回流，當文檔的布局（比如元素的大小、位置、隱藏或顯示等影響布局的操作）發生改變時，瀏覽器需要重新計算元素的幾何屬性（位置、大小等），并重新構建渲染樹的過程。

關系：

????????重排必然會導致重繪，因為當布局發生改變后，元素的外觀也需要重新繪制。但是重繪不一定會導致重排，只有當元素的外觀改變不影響布局時，才只會觸發重繪。

區別：

? ? ? ? 1.觸發條件：重繪主要是改變元素外觀的樣式屬性觸發，而重排主要由改變元素布局的操作觸發。

? ? ? ? 2.性能開銷：重排的性能開銷遠遠大于重繪，因為重排設計到復雜的布局計算和渲染樹重建。

? ? ? ? 3.對文檔的影響范圍：重排會影響整個文檔的布局計算，可能會導致多個元素的位置和大小改變；而重繪通常只影響單個元素或少數元素的外觀。

6.讓一個元素水平垂直居中的方式有哪些

1.定位+margin

2.定位+transform

3.flex布局

4.grid布局

5.table布局

7.CSS的哪些屬性可以繼承

CSS的三大特性：繼承、層疊、優先級

子元素可以繼承父類元素的樣式

1.字體的一些屬性：font

2.文本的一些屬性：line-height

3.元素的可見性：visibility:hidden

4.表格布局的屬性：border-spacing

5.列表的屬性：list-style

6.頁面樣式屬性：page

7.聲音的樣式屬性

?8.有沒有用過預處理器

預處理語言增加了變量、函數、混入等強大的功能

sass、less