2022 HTML + CSS面试题，美女吐血整理
借鑒整合了諸多大佬文章
- 常見的網絡中的圖片格式
- 6種使用 CSS 實現三角形的技巧
- css品字形狀
- 簡述CSS盒模型\Border-box 與 content-box 的區別
- 外邊距折疊（margin塌陷）
- Margin 和 padding 在什么場合下使用
- html5 video audio
- HTML5新增的內容有哪些
- 新增語義化標簽 [HTML5新增的語義化標簽、多媒體標簽](http://t.csdn.cn/uFKBE)
- 新增表單類型 [HTML5新增的表單類型、元素、屬性、事件](http://t.csdn.cn/ayuKG)
- 表單元素
- 表單屬性
- 表單事件
- 多媒體標簽
- css3新增特性[css3新增特性](http://t.csdn.cn/sI6NC)
- 邊框：
- 背景：
- 漸變：
- 文本效果：
- 轉換：
- 過渡：
- 動畫：animation
- 清除浮動的方式有哪些？請說出各自的優點
- Position定位的屬性值有何區別
- 子元素如何在父元素中居中
- 實現元素垂直居中
- CSS3的Flexbox（彈性盒布局模型）以及適用場景？
- 讓 chrome 瀏覽器顯示小于 12px 的文字
- CSS 選擇器\選擇符？哪些屬性可繼承？優先級算法？ CSS3新增偽類？
- CSS 選擇符：
- 可繼承的樣式：
- 不可繼承的樣式：
- 優先級算法：
- CSS3新增偽類舉例：
- 樣式表的來源不同時，優先級順序
- 網頁中有大量圖片加載很慢進行優化？
- 使用 csssprite 或者 svgsprite
- 圖片預加載
- 圖片懶加載(原理)
- vue-lazyload 懶加載插件
- 圖片壓縮方案
- 瀏覽器的標準模式和怪異模式
- 實現標簽的禁用
- rpx,px,vw,vh,rem,em 的區別
- 網頁的三層結構有哪些
- 請簡述媒體查詢
- Doctype 作用
- 三欄布局方式兩邊固定中間自適應
- 拖拽API
- web性能優化
- 瀏覽器緩存機制
- 瀏覽器輸入網址到頁面渲染全過程
- 如何減少回流和重繪？
- 畫一條0.5px的線
- JS動畫和CSS3動畫區別
- .css 動畫如何實現
- transition：實現漸變動畫
- transform：實現縮放、平移等效果
- 關鍵幀動畫@keyframes + animation：實現自定義動畫
- CSS3 中對溢出的處理
- 深入理解：overflow:hidden——溢出,坍塌,清除浮動
- css 定位Position
- 常見的兼容性問題？
- 為什么要初始化CSS樣式
- CSS包含塊
- absolute的containing block計算方式跟正常流有什么不同？
- link和@import都可以導入css樣式，但是他們之間有什么區別？
- map/ set
常見的網絡中的圖片格式
網絡中的圖片格式常用的分別是JPEG、GIF、PNG
JPEG 是最常用的文件格式。可以將圖片壓縮到最小，在ps中一JPEG文件存儲時，提供11級壓縮級別。
優點：
缺點：
GIF
優點：
缺點：
PNG
優點
缺點
文件大
**webp **
優點
缺點
兼容性吧，相對jpg,png,gif來說
base64
圖片的 base64 編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址，圖片隨著 HTML 的下載同時下載到本地，不再單獨消耗一個http來請求圖片。
優點
缺點
一些對比
PNG, GIF, JPG 比較
大小比較：通常地，PNG ≈ JPG > GIF 8位的PNG完全可以替代掉GIF
透明性：PNG > GIF > JPG
色彩豐富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
| gif | 文件小，支持動畫、透明，無兼容性問題 | 只支持256種顏色 | 色彩簡單的logo、icon、動圖 |
| jpg\jpeg | 色彩豐富，文件小 | 有損壓縮，反復保存圖片質量下降明顯 | 色彩豐富的圖片/漸變圖像 |
| png | 無損壓縮，支持透明，簡單圖片尺寸小 | 不支持動畫，色彩豐富的圖片尺寸大 | logo/icon/透明圖 |
| webp | 文件小，支持有損和無損壓縮，支持動畫、透明 | 瀏覽器兼容性相對而言不好 | 支持webp格式的app和webview |
6種使用 CSS 實現三角形的技巧
1、使用 border 繪制三角形
利用了高寬為零的容器及透明的 border 實現。
高寬為零的容器，設置不同顏色的 border：
這樣，讓任何三邊的邊框的顏色為 transparent，則非常容易得到各種角度的三角形：
2、使用 linear-gradient 繪制三角形
div { width: 100px;height: 100px;background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%); }實現一個 45° 的漸變：
從漸變色變為兩種固定的顏色：
再讓其中一個顏色透明即可：
3、使用 conic-gradient 繪制三角形
4、transform: rotate 配合 overflow: hidden 繪制三角形
5、使用 clip-path 繪制三角形
6、利用字符繪制三角形
原文鏈接：http://t.csdn.cn/Hw6uC
css品字形狀
簡述CSS盒模型\Border-box 與 content-box 的區別
Content-box 標準盒模型 width 不包括 padding 和 border
Border-box 怪異盒模型 width 包括 padding 和 border
一、分類：
塊級盒子（Block box） 和 內聯盒子（Inline box）
1.1 塊級（block）盒子會表現出以下行為:
常見的塊級元素：div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset
1.2 行級（inline）盒子會表現出以下行為:
常見的行內元素有：a, span, label, strong, em, br, img, input, select, textarea, cite,
二、盒模型的組成
完整的 CSS 盒模型應用于塊級盒子，內聯盒子只使用盒模型中定義的部分內容。模型定義了盒的每個部分：
content：內容
padding：包圍在內容區域外部的空白區域——內邊距
border：邊框盒包裹內容和內邊距——邊框
margin：這是最外面的區域，是盒子和其他元素之間的空白區域——外邊距
為了增加一些額外的復雜性，有一個標準的和替代（IE）的盒模型。
三、標準盒模型
在標準模型中，如果你給盒設置 width 和 height，實際設置的是 content box。 padding 和 border 再加上設置的寬高一起決定整個盒子的大小。 見下圖：
如果使用標準模型，則寬度 = 410px (300 + 50 + 50 + 5 + 5)，由margin之外的其他屬性組成。
注: margin 不計入實際大小 —— 當然，它會影響盒子在頁面所占空間，但是影響的是盒子外部空間。
盒子的范圍到邊框為止 —— 不會延伸到margin。
四、怪異盒模型\替代模型（IE）
你可能會認為盒子的大小還要加上邊框和內邊距，這樣很麻煩，就比如在我們前端在開發頁面時，經常只知道盒子的寬高，總不能我們還要備一個計算器，計算內外邊距吧？
因為這個原因，css還有一個替代盒模型。使用這個模型，所有寬度都是可見寬度，所以：內容寬度 = 該寬度 - border - padding。
大家可以看到child的寬度就為300 - 50 - 50 - 5 - 5 = 190px。
默認瀏覽器會使用標準模型。如果需要使用替代模型，可以通過為其設置 box-sizing: border-box 來實現。
如果你希望所有元素都使用替代模式，而且確實很常用，設置 box-sizing 在 元素上，然后設置所有元素繼承該屬性，正如下面的例子。
標準盒模型和怪異盒模型的區別
標準盒模型:這種盒模型設置width的時候的值是content box的寬度,如果再設置padding和margin,border的話，盒子的實際寬度會增大
怪異盒模型:這種盒子的width設置的值為盒子實際的寬度,border和padding的設置不會影響盒子的實際寬度和高度
標準盒模型總寬度 = width + 左右padding + 左右border + 左右margin
標準盒模型總高度 = height + 上下padding + 上下border + 上下margin
怪異盒模型總寬度 = width + 左右margin (width包含了padding和border)
怪異盒模型總高度 = height + 上下margin (height包含了padding和border)
怪異盒模型內容寬度 = 該寬度 - border - padding。
二:box-sizing的應用:
box-sizing:border-box;是怪異盒模型
box-sizing:content-box;是標準盒模型
外邊距折疊（margin塌陷）
理解外邊距的一個關鍵是外邊距折疊的概念。如果你有兩個外邊距相接的元素，這些外邊距將合并為一個外邊距，即最大的單個外邊距的大小。兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。兩
個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。 兩個外
邊距一正一負時，折疊結果是兩者的相加的和。
在下面的例子中，我們有兩個段落。頂部段落的頁 margin-bottom為50px。第二段的margin-top 為30px。因為外邊距折疊的概念，所以框之間的實際外邊距是50px，而不是兩個外邊距的總和。
Margin 和 padding 在什么場合下使用
Margin 外邊距 自身邊框到另一個邊框之間的距離
Padding 內邊距 自身邊距到自身內容之間的距離
當需要在 border 外側添加空白時用 margin，當需要在 border 內側添
加空白時用 padding
html5 video audio
Video標簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個內部使用的標簽。
audio:音頻屬性和視頻屬性差不多，不過寬高和 poster 屬性不能用
src 屬性用于指定視頻的地址。
poster 屬性用于指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。視頻數據無效可能是視頻正在加載，可能是視頻地址錯誤等等。
preload屬性用于定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為auto。None：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。
Metadata：部分預加載。使用此屬性值，代表頁面制作者認為用戶不期望此視頻，但為用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。
Auto：全部預加載。
(3) autoplay屬性用于設置視頻是否自動播放，是一個布爾屬性。
注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標簽中使用此屬性表示true，此時屬性要么沒有值，要么其值恒等于他的名字 （此處，自動播放為或者）；而在標簽中不使用此屬性表示false（此處不進行自動播放為）。
(4) loop屬性用于指定視頻是否循環播放，同樣是一個布爾屬性。
(5) controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。控制欄須包括播放暫停控制，播放進度控制，音量控制等等。每個瀏覽器默認的播放控制欄在界面上不一樣。
(6) width屬性和height屬性屬于標簽的通用屬性了，這個不用多說。
(7) source標簽用于給媒體（因為audio標簽同樣可以包含此標簽，所以這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標簽沒有使用src屬性時使用。
瀏覽器按source標簽的順序檢測標簽指定的視頻是否能夠播放（可能是視頻格式不支持，視頻不存在等等），如果不能播放，換下一個。此方法多用于兼容不同的瀏覽器。Source標簽本身不代表任何含義，不能單獨出現。
此標簽包含src、type、media三個屬性。
src屬性：用于指定媒體的地址，和video標簽的一樣。
Type屬性：用于說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式。
Media屬性：用于說明媒體在何種媒介中使用，不設置時默認值為all，表示支持所有媒介。你想到
HTML5新增的內容有哪些
新增語義化標簽 HTML5新增的語義化標簽、多媒體標簽
優點：1.提升可訪問性 2.seo 3.結構清晰，利于維護。
什么是HTML語義化標簽？
??語義化標簽，就是讓標簽有自己的含義，利用本身傳達它所包含內容的一些信息，使瀏覽器和搜索引擎直觀的認識標簽和屬性的用途和作用。
??過去我們常常采用DIV+CSS 的方式布局頁面，但DIV 標簽本身沒有獨特的含義，這樣做的結果就是文檔結構不夠清晰，不利于瀏覽器對頁面的讀取，在分離CSS樣式后，用戶體驗不友好。
??所以HTML5 新增了很多語義化標簽，使文檔更具可讀性，頁面結構更清晰。
為什么要用H5語義化標簽？
代碼結構清晰，可讀性高，減少差異化，便于團隊開發和維護。
在頁面沒有加載CSS的情況下，也能呈現良好的內容結構，提升用戶體驗。
對搜索引擎友好，良好的結構和語義，有助于爬蟲抓取更多的有效信息。
Header 頁面頭部 main 頁面主要內容 footer 頁面底部
Nav 導航欄 aside 側邊欄 article 加載頁面一塊獨立內容
Section 相 當 于 div figure 加 載 獨 立 內 容 （ 上 圖 下 字 ）
figcaption figure 的標題
Hgroup 標題組合標簽 mark 高亮顯示 dialog 加載對話框標簽（必須
配合 open 屬性）
Embed 加載插件的標簽 video 加載視頻 audio 加載音頻（支持格式
ogg，mp3，wav）
新增表單類型 HTML5新增的表單類型、元素、屬性、事件
type=“email/url/tel/search/color”
表單元素
1、< datalist >< /datalist >
簡介：數據列表標簽，定義輸入框的選項列表，選項列表是通過該元素內的option元素進行創建的。該元素與input元素配合使用，來定義input可能的值。
用法：要把這個datalist元素定義的選項列表綁定到輸入框，將input元素的list屬性的值設置為datalist元素的id屬性值
2、< output >< /output >
輸出標簽，標記定義一些輸出類型，計算表單結果。注意：oninput 事件是在用戶輸入時觸發的事件
屬性解析：
①for 規定一個或多個元素的 id 列表，以空格分隔。這些元素描述了計算中使用的元素與計算結果之間的關系
②name 規定 元素的名稱
寫法：output不能再寫在其他任意位置，只能在form里面才有效果
3、< optgroup >< /optgroup >
optgruop元素在html4已經存在，在HTML5進行了拓展。
簡介：選項組標簽，將select元素中的選項進行邏輯分類，在select元素中直接定義，不允許嵌套，既不能進行第二次分組
屬性：
①disabled：加載時禁用該選項組
②label: 用來定義分組顯示的標簽名
< fieldset >< /fieldset >
表單元素分組標簽，將表單內容的一部分打包，生成一組相關表單字段。
顯示：當一組表單元素放到 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。
常與legend 元素配合使用：為 fieldset 元素定義標題
表單屬性
表單事件
①oninput：當元素中的內容改變時觸發
②oninvalid：當驗證不通過時觸發
多媒體標簽
音樂：
視頻：
播放控件 control
靜音 muted
自動播放 autoplay
循環播放 loop
設置封面 poster
引用文本
H2O is是液體。
210 運算結果是 1024.
css3新增特性css3新增特性
邊框：
border-radius 添加圓角邊框
border-shadow：給框添加陰影 （水平位移，垂直位移，模糊半徑，陰
影尺寸，陰影顏色，insetr（內/外部陰影））
border-image：設置邊框圖像
border-image-source 邊框圖片的路徑
border-image-slice 圖片邊框向內偏移
border-image-width 圖片邊框的寬度
border-image-outset 邊框圖像區域超出邊框的量
border-image-repeat 圖像邊框是否平鋪（repeat 平鋪 round 鋪滿
stretch 拉伸）
背景：
Background-size 背景圖片尺寸
Background-origin規定background-position屬性相對于什么位置定
位
Background-clip 規定背景的繪制區域（padding-box，border-box，
content-box）
漸變：
Linear-gradient（）線性漸變
Radial-gradient（）徑向漸變
文本效果：
Word-break：定義如何換行
Word-wrap：允許長的內容可以自動換行
Text-overflow：指定當文本溢出包含它的元素，應該干啥
Text-shadow：文字陰影（水平位移，垂直位移，模糊半徑，陰影顏色）
轉換：
Transform 應用于 2D3D 轉換，可以將元素旋轉，縮放，移動，傾斜
Transform-origin 可以更改元素轉換的位置，（改變 xyz 軸）
Transform-style 指定嵌套元素怎么樣在三位空間中呈現
2D 轉換方法：
rotate 旋轉 translate（x，y）指定元素在二維空間的位移 scale（n）
定義縮放轉換
3D 轉換方法：
Perspective（n）為 3D 轉換 translate rotate scale
過渡：
Transition-proprety 過渡屬性名
Transition-duration 完成過渡效果需要花費的時間
Transition-timing-function 指定切換效果的速度
Transition-delay 指定什么時候開始切換效果
動畫：animation
Animation-name 為@keyframes 動畫名稱
animation-duration 動畫需要花費的時間
animation-timing-function 動畫如何完成一個周期
animation-delay 動畫啟動前的延遲間隔
animation-iteration-count 動畫播放次數
animation-direction 是否輪流反向播放動畫
清除浮動的方式有哪些？請說出各自的優點
==1，父級div定義 height ==
Left Right div2 原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。 優點：簡單、代碼少、容易掌握 缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題 建議：不推薦使用，只建議高度固定的布局時使用 ==2，結尾處加空div標簽 clear:both;== Left Rightdiv2 原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標簽 clear:both 建議：不推薦使用，只作了解。
| 給父元素單獨定義高度 | 快速簡單，代碼少 | 高度固定，無法進行響應式布局 |
| 父級定義overflow：hidden；zoom：1（針對 ie6 的兼容） | 簡單快速、代碼少，兼容性較高 | 超出部分被隱藏，布局時要注意 |
| 在浮動元素后面加一個空標簽，clear：both；height：0；overflow：hidden | 簡單快速、代碼少，兼容性較高。 | 加空標簽，不利于頁面優化 |
| 父級定義 overflow：auto | 簡單，代碼少，兼容性好 | 內部寬高超過父級 div 時，會出現滾動條 |
| 給塌陷的元素添加偽對象 | 寫法固定，兼容性高 | 代碼多 |
Position定位的屬性值有何區別
Position 有四個屬性值：relative absolute fixed static
Relative 相對定位 不脫離文檔流，相對于自身定位
Absolute 絕對定位，脫離文檔流 相對于父級定位
Fixed 固定定位，脫離文檔流，相對于瀏覽器窗口定位
Static 默認值，元素出現在正常的流中
子元素如何在父元素中居中
水平居中：
1.子父元素寬度固定，子元素設置 margin：auto，并且子元素不能設置
浮動，否則居中失效
2.子父元素寬度固定，父元素設置 text-align：center，子元素設置
display：inline-block，并且子元素不能設置浮動，否則居中失效
水平垂直居中：（position:子絕父相，flex, table-cell）
子元素相對于父元素絕對定位，子元素 top，left 設置 50%，子元素
margin-top 和 margin-left 減去各自寬高的一半
子元素相對于父元素絕對定位，子元素上下左右全為 0，然后設置子元素
margin：auto
父元素設置 display：table-cell vertical-align：middle，子元素設置
margin：auto
子元素相對定位，子元素 top，left 值為 50%，transform：translate
（-50%，-50%）
子元素相對父元素絕對定位，子元素 top，left 值為 50%，transform：
translate（-50%，-50%）
父元素設置彈性盒子，
display：flex； justfy-content：center ；align-item：center；
justfy-content：center
實現元素垂直居中
實現元素垂直居中
1.設置子元素和父元素的行高一樣
2.子元素設置為行內塊，再加 vertical-align：middle
3.已知父元素高度，子元素相對定位，通過 transform：translateY（-50%）
4.不知道父元素高度，子絕父相，子元素 top：50%，transform：
translateY（-50%）
5.創建一個隱藏節點，讓隱藏節點的 height 為剩余高度的一半
6.給父元素 display：table，子元素 display：table-cell，vertical-align：
middle
7.給父元素添加偽元素
8.彈性盒，父元素 display：flex，子元素 align-self：center
CSS3的Flexbox（彈性盒布局模型）以及適用場景？
1）背景介紹：
網頁布局（layout）是 CSS 的一個重點應用。布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便
2009年，W3C 提出了一種新的方案—-Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。事實上就是通過給父盒子添加 flex 屬性，來控制子盒子的位置和排列方式
（2）知識剖析：
flex 是 Flexible Box 的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。 任何一個容器都可以指定為 Flex 布局。塊級元素只需要display屬性為flex即可。行內元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 內核的瀏覽器，必須加上-webkit前綴。
2.基本概念
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱”容器”。 它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱”項目”。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。 項目默認沿主軸排列。
3.容器屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。
flex-wrap屬性定義，如果一條軸線排不下，如何換行。默認情況下，項目都排在一條線（又稱”軸線”）上。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
justify-content屬性定義了項目在主軸上的對齊方式。
align-items屬性定義項目在交叉軸上如何對齊。
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
4.項目屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
flex屬性是以上三個的簡寫，默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch
讓 chrome 瀏覽器顯示小于 12px 的文字
讓 chrome 瀏覽器顯示小于 12px 的文字
CSS 選擇器\選擇符？哪些屬性可繼承？優先級算法？ CSS3新增偽類？
CSS 選擇符：
1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = “external”])
9.偽類選擇器(a: hover, li:nth-child)
可繼承的樣式：
1.font-size
2.font-family
3.color
4.text-indent
不可繼承的樣式：
1.border
2.padding
3.margin
4.width
5.height
優先級算法：
優先級（權重）：
元素選擇器 1
偽元素選擇器 1
class 選擇器 10
偽類選擇器 10
屬性選擇器 10
Id 選擇器 100
內聯樣式的權重 1000
1.優先級就近原則，同權重情況下樣式定義最近者為準;
2.載入樣式以最后載入的定位為準;
3.!important > id > class > tag
4.important 比 內聯優先級高，但內聯比 id 要高
CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個 p 元素的每個 p 元素。
p:last-of-type 選擇屬于其父元素的最后 p 元素的每個 p 元素。
p:only-of-type 選擇屬于其父元素唯一的 p 元素的每個 p 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 p 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 p 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
樣式表的來源不同時，優先級順序
內聯樣式> 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式
網頁中有大量圖片加載很慢進行優化？
使用 csssprite 或者 svgsprite
圖片預加載
原理：在網頁全部加載之前，提前加載圖片，當用戶需要查看圖片時，可以從本地緩存中直接渲染，提供用戶更好的體驗，減少等待時間。
圖片懶加載(原理)
原理：優先加載可視區域的圖片，等圖片進入了可視區域再進行加載，提高用戶體驗和性能
存儲圖片的真實路徑，把圖片的真實路徑綁定給一個以data開頭的自定義屬性data-url即可，頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片（沒有請求就提高了性能）
初始化img的時候，src不能是真實的圖片地址(會一次性發送請求)，也不可以是空地址或者壞地址(會出現出錯圖標，如下所示：）
設置img的默認src為一張1px*1px，很小很小的gif透明圖片（所有的img都用這一張，只會發送一次請求），之所以需要是透明的，是需要透出通過background設置的背景圖(一張loading.png，就是一個轉圈圈的背景效果圖)
需要一個滾動事件，判斷元素是否在瀏覽器窗口，一旦進入視口才進行加載，當滾動加載的時候，就把這張透明的1px.gif圖片替換為真正的url地址（也就是data-url里保存的值）
等到圖片進入視口后，利用js提取data-url的真實圖片地址賦值給src屬性，就會去發送請求加載圖片，真正實現了按需加載
vue-lazyload 懶加載插件
小圖片比較多時可以用雪碧圖、字體圖標、base64等，這樣可以有效減少連接數使
圖片壓縮方案
瀏覽器的標準模式和怪異模式
標準模式：瀏覽器按照 W3C 標準解析執行代碼
怪異模式：瀏覽器根據自己的方式解析執行代碼，因為不同瀏覽器解析執行方式不一樣，所以叫怪異模式
瀏覽器解析時使用標準模式還是怪異模式，與網頁中的DTD聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相關的方式加載網頁并顯示，忽略DTD聲明，將使網頁進入怪異模式（quirks mode）。
區別：
1、盒模型：
在怪異模式下，盒模型為IE模型
而在W3C標準的盒模型中為：標準盒模型
2、圖片元素的垂直對齊方式
對于inline元素和table-cell元素，標準模式下vertical-align屬性默認取值是baseline；在怪異模式下，table單元格中的圖片的vertical-align屬性默認取值是bottom。因此在圖片底部會有及像素的空間。
3、元素中的字體
CSS中，對于font的屬性都是可以繼承的。怪異模式下，對于table元素，字體的某些元素將不會從body等其他封裝元素繼承中的得到，特別是font-size屬性。
4、內聯元素的尺寸
標準模式下，non-replaced inline元素無法自定義大寫；
怪異模式下，定義這些元素的width、height屬性可以影響這些元素顯示的尺寸。
5、元素的百分比高度
CSS中對于元素的百分比高度規定：百分比為元素包含塊的高度，不可為負值；如果包含塊的高度沒有顯示給出，該值等同于auto，所以百分比的高度必須是在元素有高度聲明的情況下使用。
當一個元素使用百分比高度是，標準模式下，高度取決于內容變化，怪異模式下，百分比高度被準確應用
6、元素溢出的處理
標準模式下，overflow取值默認為visible；在怪異模式在，該溢出會被當做擴展box來對待，即元素的大小由內容決定，溢出不會裁剪，元素框自動調整，包含溢出內容。
實現標簽的禁用
添加 disabled 屬性
rpx,px,vw,vh,rem,em 的區別
rpx是響應式像素，只能在小程序中使用，它把屏幕水平分為750份，可以自動計算適配，在小程序中的最優選擇，優先使用，可以精準布局。
px是固定的像素單位，不能響應，像素 px 是相對于顯示器屏幕分辨率來說的，小程序和移動端布局不給予推薦。
vw：viewport width 視口寬度響應單位，把屏幕水平分為100份，自動計算并適配。注意：vw不能十分精準的換算，1px、較小的像素不好適配。
vh：viewport height 視口高度響應單位，把垂直分為100份，自動計算并適配 。若小程序高度需要也可以采用，因為rpx是水平的。注意：vw不能十分精準的換算，1px、較小的像素不好適配。
rem：CSS3新增的相對單位，相對大小是HTML的根元素。
em 相對長度單位，值并不是固定的 會繼承父級元素的字體大小（參考物是父元素的 font-size）
rem rem也表示相對尺寸，其參考對象為根元素的font-size，
網頁的三層結構有哪些
結構（html 或 xhtm 標記語言）表現（css 樣式表）行為（js）
請簡述媒體查詢
媒體查詢（Media Query）是CSS3新語法。媒體查詢擴展了 media 屬性, 就是根據不同的媒體類型設置不同的 css樣式，達到自適應的目的。
使用@media查詢，可以針對不同的媒體類型定義不同的樣式
@media可以針對不同的屏幕尺寸設置不同的樣式
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
目前針對很多蘋果手機、Android手機，平板等設備都用得到媒體查詢
@media mediatype and|not|only (media feature){css-code;}
用@media開通 注意@符號
mediatype 媒體類型
關鍵字 and not only
media feature 媒體特性，必須有小括號包含
2.1 mediatype查詢類型
將不同的終端設備劃分為不同的類型，稱為媒體類型
2.2 關鍵字
關鍵字將媒體類型或多個特性連接到一起做為媒體查詢的條件
and：可以將多個媒體特性連接到一起，相當"且"于的意思
not：排除某個媒體類型，相當于"非"的意思，可以省略
only：指定某個特定的媒體類型，可省略
Doctype 作用
聲明文檔類型
三欄布局方式兩邊固定中間自適應
中間欄被寬度為 100%的浮動元素包起來
實現方式：左右兩欄設置寬度，中間欄設置 flex:1,占滿余下部分
實現方式：左右兩欄設置寬度，中間欄寬度auto
拖拽API
一、關于拖拽API
拖拽API是HTML5的新特性
二、什么是拖拽和釋放？
拖拽：Drag
釋放：Drop
拖拽(Drag)指的是鼠標點擊源對象后一直移動對象不松手，一但松手即釋放(Drop)
三、什么是源對象和目標對象？
源對象：指的是我們鼠標點擊的一個事物，這里可以是一張圖片，一個DIV，一段文本等等。
目標對象：指的是我們拖動源對象后移動到一塊區域，源對象可以進入這個區域，可以在這個區域上方懸停(未松手)，可以釋松手釋放將源對象放置此處(已松手)，也可以懸停后離開該區域。
四、拖拽API的相關函數7個
被拖動的源對象可以觸發的事件：
(1)ondragstart：源對象開始被拖動
(2)ondrag：源對象被拖動過程中(鼠標可能在移動也可能未移動)
(3)ondragend：源對象被拖動結束
拖動源對象可以進入到上方的目標對象可以觸發的事件：
(1)ondragenter：目標對象被源對象拖動著進入
(2)ondragover：目標對象被源對象拖動著懸停在上方
(3)ondragleave：源對象拖動著離開了目標對象
(4)ondrop：源對象拖動著在目標對象上方釋放/松手
web性能優化
web性能優化
前端優化的目的
從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。
從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所占帶寬，能夠節省可觀的資源。
常見的優化方法
一、頁面級優化
1.減少http請求
（1）從設計實現層面簡化頁面；
（2）合理設置HTTP緩存；
（3）資源合并與壓縮；
（4）雪碧圖；
（5）Lazy Load Images
2. 將外部腳本置底（將腳本內容在頁面信息內容加載后再加載）
3. 異步執行 inline腳本(其實原理和上面是一樣，保證腳本在頁面內容后面加載。)
4. Lazy Load Javascript（只有在需要加載的時候加載，在一般情況下并不加載信息內容。）
5. 將 CSS放在 HEAD中
6. 異步請求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內容）
7. 減少不必要的 HTTP跳轉
8. 避免重復的資源請求
9. 精簡javaScript和css
二、代碼級優化
1.Javascript
2.CSS選擇符
3. HTML
4.Image壓縮
瀏覽器緩存機制
1、為什么需要瀏覽器緩存？
當我們訪問同一個頁面時，請求資源、數據都是需要一定的耗時，如果可以將一些資源緩存下來，那么從第二次訪問開始，就可以減少加載時間，提高用戶體驗，也能減輕服務器的壓力
2、有哪些緩存？
瀏覽器緩存分為強緩存和協商緩存，當存在緩存時，客戶端第一次向服務器請求數據時，客戶端會緩存到內存或者硬盤當中，當第二次獲取相同的資源，強緩存和協商緩存的應對方式有所不同。
強緩存：當客戶端第二次向服務器請求相同的資源時，不會向服務器發送請求，而是直接從內存/硬盤中間讀取
協商緩存：當客戶端第二次向服務器請求相同的資源時，先向服務器發送請求"詢問"該請求的文件緩存在本地與服務器相比是否更改，如果更改，則更新文件，如果沒有就從內存/硬盤中讀取
強緩存由服務器的響應頭里 cache-control （表示緩存的時間長度）和 expires（表示過期時間） 兩個字段決定，cache-control 的優先級要高于 expires
協商緩存由 last-modified 和 etag兩個字段決定。last-modified與etag是可以一起使用的，服務器會優先驗證etag，一致的情況下，才會繼續比對last-modified，最后才決定是否返回304
瀏覽器輸入網址到頁面渲染全過程
1.查找強緩存
瀏覽器會先檢查是否存在緩存，如果存在緩存就直接從緩存里面拿數據，給到瀏覽器進行渲染
2.DNS 解析
由于我們輸入的是域名，而數據包是通過 IP 地址傳給對方的。因此我們需要得到域名對應的 IP 地址。這個過程需要依賴一個服務系統，這個系統將域名和 IP 一一映射，我們將這個系統就叫做 DNS（域名系統）。得到具體 IP 的過程就是 DNS 解析。 當然，值得注意的是，瀏覽器提供了 DNS 數據緩存功能。即如果一個域名已經解析過，那會把解析的結果緩存下來，下次處理直接走緩存，不需要經過 DNS 解析
3.建立 TCP 連接
建立 TCP 連接經歷了下面三個階段
通過三次握手(即總共發送 3 個數據包確認已經建立連接)建立客戶端和服務器之間的連接。
進行數據傳輸。這里有一個重要的機制，就是接收方接收到數據包后必須要向發送方確認, 如果發送方沒有接到這個確認的消息，就判定為數據包丟失，并重新發送該數據包。當然，發送的過程中還有一個優化策略，就是把大的數據包拆成一個個小包，依次傳輸到接收方，接收方按照這個小包的順序把它們組裝成完整數據包。
斷開連接的階段。數據傳輸完成，現在要斷開連接了，通過四次揮手來斷開連接。
TCP 就是通過三次握手確認連接，數據包校驗保證數據到達接收方，然后通過四次揮手斷開連接保證數據傳輸的可靠性
4.發送 HTTP 請求
現在 TCP 連接建立完畢，瀏覽器可以和服務器開始通信，即開始發送 HTTP 請求。瀏覽器發 HTTP 請求要攜帶三樣東西:請求行、請求頭和請求體
5.網絡響應
HTTP 請求到達服務器，服務器進行對應的處理。最后要把數據傳給瀏覽器，也就是返回網絡響應。
響應頭包含了服務器及其返回數據的一些信息, 服務器生成數據的時間、返回的數據類型以及對即將寫入的 Cookie 信息。如果請求頭或響應頭中包含 Connection: Keep-Alive，表示建立了持久連接，這樣 TCP 連接會一直保持，之后請求統一站點的資源會復用這個連接。
6.頁面渲染
完成以上過程后，數據已經達到瀏覽器端，接下來就是瀏覽器解析并渲染數據了
7.解析過程
（1） 構建 DOM 樹
由于瀏覽器無法直接理解 HTML 字符串，因此將這一系列的字節流轉換為一種有意義并且方便操作的數據結構，這種數據結構就是 DOM 樹。DOM 樹本質上是一個以 document 為根節點的多叉樹
（2） 樣式計算
首先，瀏覽器是無法直接識別 CSS 樣式文本的，因此渲染引擎接收到 CSS 文本之后第一件事情就是將其轉化為一個結構化的對象，即 styleSheets。 這個格式化的過程過于復雜，而且對于不同的瀏覽器會有不同的優化策略，這里就不展開了。 在瀏覽器控制臺能夠通過 document.styleSheets 來查看這個最終的結構。當然，這個結構包含了以上三種 CSS 來源，為后面的樣式操作提供了基礎。
（3） 生成布局樹
現在已經生成了 DOM 樹和 DOM 樣式，接下來要做的就是通過瀏覽器的布局系統確定元素的位置，也就是要生成一棵布局樹(Layout Tree)。 布局樹生成的大致工作如下:
遍歷生成的 DOM 樹節點，并把他們添加到布局樹中；
計算布局樹節點的坐標位置。
值得注意的是，布局樹只包含可見元素，對于 head 標簽和設置了 display: none 的元素，將不會被放入其中。
8.渲染
（1） 構建 DOM 樹
瀏覽器將 HTML 解析成樹形結構的 DOM 樹，一般來說，這個過程發生在頁面初次加載，或頁面 JavaScript 修改了節點結構的時候
（2）構建渲染樹
瀏覽器將 CSS 解析成樹形結構的 CSSOM 樹，再和 DOM 樹合并成渲染樹
（3）布局（Layout）
瀏覽器根據渲染樹所體現的節點、各個節點的 CSS 定義以及它們的從屬關系，計算出每個節點在屏幕中的位置。Web 頁面中元素的布局是相對的，在頁面元素位置、大小發生變化，往往會導致其他節點聯動，需要重新計算布局，這時候的布局過程一般被稱為回流（Reflow）。
（4）繪制（Paint）
遍歷渲染樹，調用渲染器的 paint() 方法在屏幕上繪制出節點內容，本質上是一個像素填充的過程。這個過程也出現于回流或一些不影響布局的 CSS 修改引起的屏幕局部重畫，這時候它被稱為重繪（Repaint）。實際上，繪制過程是在多個層上完成的，這些層我們稱為 渲染層（RenderLayer）
（5）渲染層合成（Composite）
多個繪制后的渲染層按照恰當的重疊順序進行合并，而后生成位圖，最終通過顯卡展示到屏幕上。
那什么是渲染層合成呢？
在 DOM 樹中每個節點都會對應一個渲染對象（RenderObject），當它們的渲染對象處于相同的坐標空間（z 軸空間）時，就會形成一個 RenderLayers，也就是渲染層。渲染層將保證頁面元素以正確的順序堆疊，這時候就會出現層合成（composite），從而正確處理透明元素和重疊元素的顯示。 這個模型類似于 Photoshop 的圖層模型，在 Photoshop 中，每個設計元素都是一個獨立的圖層，多個圖層以恰當的順序在 z 軸空間上疊加，最終構成一個完整的設計圖。 對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導致元素顯示異常。
（6）顯示器顯示內容
柵格化操作完成后，合成線程會生成一個繪制命令，即"DrawQuad"，并發送給瀏覽器進程。 瀏覽器進程中的 viz 組件接收到這個命令，根據這個命令把頁面內容繪制到內存，也就是生成了頁面，然后把這部分內存發送給顯卡，從而展示在屏幕上。
從瀏覽器的渲染過程中我們知道，頁面 HTML 會被解析成 DOM 樹，每個 HTML 元素對應了樹結構上的一個 node 節點。而從 DOM 樹轉化到一個個的渲染層，并最終執行合并、繪制的過程，中間其實還存在一些過渡的數據結構，它們記錄了 DOM 樹到屏幕圖形的轉化原理，其本質也就是樹結構到層結構的演化。
如何減少回流和重繪？
重繪：
? 當元素屬性發生改變且不影響布局時（背景顏色、透明度、字體樣式等），產生重繪，相當于 不刷新頁面，動態更新內容。
回流：
? 當元素屬性發生改變且影響布局時（寬度、高度、內外邊距等），產生回流，相當于 刷新頁面。
重繪不一定引起回流，回流必將引起重繪
? 1.使用 transform 替代 top
? 2.使用 visibility 替換 display: none ，因為前者只會引起重繪，后者會引發回流（改變了布局）
? 3.不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
? 4.動畫實現的速度的選擇，動畫速度越快，回流次數越多，也可以選擇使用requestAnimationFrame
? 5.CSS 選擇符從右往左匹配查找，避免節點層級過多
? 6.將頻繁重繪或者回流的節點設置為圖層，圖層能夠阻止該節點的渲染行為影響別的節點。比如對于 video 標簽來說，瀏覽器會自動將該節點變為圖層。
畫一條0.5px的線
1、直接設置0.5px，在不同的瀏覽器會有差異（ 不同系統的不同瀏覽器對小數點的px有不同的處理）谷歌瀏覽器：把0.5px四舍五入變成了1px
? 2.設置成1px，然后使用縮放功能 采用 transform: scale(0.5)的方式
? 3.canvas/svg方式畫一條0.5px的線
4.采用meta viewport的方式
JS動畫和CSS3動畫區別
首先，在js動畫是逐幀動畫，是在時間幀上逐幀繪制幀內容，由于是一幀一幀的話，所以其可操作性很高，幾乎可以完成任何想要的動畫形式。但是由于逐幀動畫的幀序列內容不一樣，會增加制作負擔，且資源占有比較大。但它的優勢也很明顯：因為它相似與電影播放模式，很適合于表演很細膩的動畫，如3D效果、人物或動物急劇轉身等等效果。正是由于js對動畫的操作復雜度比較高，能對動畫有一個比較好的控制，如開始、暫定、回放、終止、取幀等，可以很精確的做到。因此可以js可以通過操作DOM和BOM來做一些酷炫的動態效果，以及爆炸特效，且兼容性比較好。但是，如果幀率過低的話，會導致幀與幀之間的過渡很可能會不自然、不連貫。缺點：
js是單線程的腳本語言，當js在瀏覽器主線程運行時，主線程還有其他需要運行的js腳本、樣式、計算、布局、交互等一系列任務，對其干擾線程可能出現阻塞，造成丟幀的情況。
其次，js在做動畫的時候，其復雜度是高于css3的，需要考慮一些計算，操作等方便問題。
優點：
JavaScript動畫控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
動畫效果比css3動畫豐富,有些動畫效果，比如曲線運動,沖擊閃爍,視差滾動效果，只有JavaScript動畫才能完成
CSS3有兼容性問題，而JS大多時候沒有兼容性問題
css3（補間動畫）
css3動畫的制作方法簡單方便。只需確定第一幀和最后一幀的關鍵位置即可，兩個關鍵幀之間幀的內容由Composite線程自動生成，不需要人為處理。當然也可以多次添加關鍵幀的位置。
缺點：
運行過程控制較弱，無法附加事件綁定回調函數。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置添加回調函數或是綁定回放事件,無進度報告
代碼冗長。如果想用 CSS 實現稍微復雜一點動畫,最后CSS代碼都會變得非常笨重。
優點：
瀏覽器可以對動畫進行優化。
代碼相對簡單,性能調優方向固定
對于幀速表現不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要撰寫額外代碼
總結
如果動畫只是一些簡單的狀態切換，滑動等效果，不需要中間的控制過程，css3是比較好的選擇，它直接在css文件中就可以實現，并不需要引入太多的js庫。
而想做一些復雜的客戶端界面，開發一個復雜ui的app，實現一個復雜紋理動畫等，需要對頁面進行精準的控制計算，應該使用js動畫，這樣動畫可以保持高效，并且工作流也更可控。
因此，在實現一些小的交互動效的時候，就多考慮考慮CSS動畫。對于一些復雜控制的動畫，使用javascript比較可靠。
.css 動畫如何實現
transition：實現漸變動畫
transition漸變動畫（過渡）
語法格式：transition：要過渡的屬性 花費的時間 運動曲線 何時開始;
屬性：想要變化的CSS屬性，寬度高度，背景顏色，內外邊距都可以。如果想要所有的屬性都變化過渡，寫一個all就可以
花費時間：單位是秒（必須寫單位）比如0.5s
運動曲線：默認是ease（可以省略)
何時開始：單位是秒 (必須寫單位)可以設置延遲觸發時間 默認是0s(可以省略)
transform：實現縮放、平移等效果
transform屬性應用于2D 或 3D轉換。該屬性允許我們能夠對元素進行旋轉、縮放、傾斜、移動這四類操作.一般是配合transition的屬性一起使用
none：定義不進行任何轉換，一般用于注冊掉該轉換
transform-functions：定義要進行轉換的類型函數
旋轉(rotate)：主要分為2D旋轉和3D旋轉。rotate(angle)，2D 旋轉，參數為角度，如45deg；rotate(x,y,z,angle)，3D旋轉，圍繞原地到(x,y,z)的直線進行3D旋轉rotateX(angle)，沿著X軸進行3D旋轉；rotateY(angle)；rotateZ(angle)；
縮放(scale)：一般用于元素的大小收縮設定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。
傾斜(skew)：主要用于對元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉換；skewX(angle)，沿著x軸的2D傾斜轉換；skew(angle)，沿著y軸的2D傾斜轉換。
移動(translate)：主要用于將元素移動。translate(x, y)，定義向x和y軸移動的像素點；translate(x, y, z)，定義像x、y、z軸移動的像素點；translateX(x)；translateY(y)；translateZ(z)
關鍵幀動畫@keyframes + animation：實現自定義動畫
定義單個動畫
定義多個動畫
使用動畫
animation : 動畫名稱 動畫時長 速度曲線 延遲時間 重復次數 動畫方向 執行完畢時狀態;
動畫名稱和時長必須賦值
取值不分先后順序
如果有兩個時間值，第一個時間表示動畫時長，第二個時間表示延遲時間
可以添加多個動畫
CSS3 中對溢出的處理
white-space:nowrap;(不能換行）
overflow:hidden;（溢出邊框部分隱藏）
text-overflow:ellipsis;(…展示)
深入理解：overflow:hidden——溢出,坍塌,清除浮動
1.BFC 全稱是塊級排版上下文，用于對塊級元素排版，默認情況下只有根元素（body)一個塊級上下文，但是如果一個塊級元素 設置了float:left，overflow:hidden或position:absolute樣式，就會為這個塊級元素生成一個獨立的塊圾上下文，使這個塊圾元素內部的排版完全獨立隔絕。
2.獨立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內，所以不用清除浮動來撐起高度。
BFC定義了如下布局規則：
內部的塊元素會在垂直方向，一個接一個地放置。
塊元素垂直方向的距離由margin決定。兩個相鄰塊元素的垂直方向的margin會發生重疊。
每個元素的左外邊距，與包含塊的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float元素的區域重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
那么，在什么情況下，元素的BFC才能生效呢？
根據CSS規范，當給元素添加下列Style屬性時，元素成為一個BFC元素。
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
css 定位Position
固定定位 fixed：
元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不
會移動。Fixed 定位使元素的位置與文檔流無關，因此不占據空間。
Fixed 定位的元素和其他元素重疊。
相對定位 relative：
如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，
可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行
移動。 在使用相對定位時，無論是否進行移動，元素仍然占據原來
的空間。因此，移動元素會導致它覆蓋其它框。
絕對定位 absolute：
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已
定位的父元素，那么它的位置相對于。absolute 定位使元素
的位置與文檔流無關，因此不占據空間。 absolute 定位的元素和其
他元素重疊。
粘性定位 sticky：
基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
默認定位 Static：
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left,right )
常見的兼容性問題？
1.不同瀏覽器的標簽默認的margin和padding不一樣。*{margin:0;padding:0;}
2.IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。 hack：display:inline;將其轉化為行內屬性。
3. 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
{
background-color:#f1ee18;/所有識別/
.background-color:#00deff\9; /IE6、7、8識別/
+background-color:#a200ff;/IE6、7識別/
_background-color:#1e0bd1;/IE6識別/
}
4.設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高 度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
5.IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬 性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 - webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。 解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
CSS包含塊
原理
一個元素盒子的位置和大小有時是通過相對于一個特定的長方形來計算的，這個長方形就被稱之為元素的 containing block。
一個元素的 containing block 按以下方式定義：
block)。具體，跟用戶端有關。
如果祖先是塊級元素，containing block 由祖先的 padding edge 形成。
如果祖先是內聯元素，containing block 取決于祖先的 direction 屬性。
如果 direction 是 ltr（左到右），祖先產生的第一個盒子的上、左內容邊界是 containing block 的上方和左方，祖先的最后一個盒子的下、右內容邊界是 containing block 的下方和右方。
如果 direction 是 rtl（右到左），祖先產生的第一個盒子的上、右內容邊界是 containing block 的上方和右方，祖先的最后一個盒子的下、左內容邊界是 containing block 的下方和左方。
如果沒有祖先，根元素盒子的內容邊界確定為 containing block。
absolute的containing block計算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)
link和@import都可以導入css樣式，但是他們之間有什么區別？
區別：
1.link不僅可以導入樣式表，還可以導入其他如如favicon，但@import只能導入樣式表
2.link是XHTML語法，不存在兼容問題，但是@import是在css2.1才提出，在IE5+后才支持，所以對低版本的瀏覽器不兼容
3.可以通過 JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式。
4.link是在頁面加載的的同時一起加載的，@import是頁面加載完畢后才加載的
5.link引入的樣式權重大于@import引入的樣式（有爭議）
map/ set
Map 對象
Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。
Map 的迭代
對 Map 進行遍歷，以下兩個最高級。
for…of
forEach()
Set 對象
Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。
Set 中的特殊值
Set 對象存儲的值總是唯一的，所以需要判斷兩個值是否恒等。有幾個特殊值需要特殊對待：
+0 與 -0 在存儲判斷唯一性的時候是恒等的，所以不重復；
undefined 與 undefined 是恒等的，所以不重復；
NaN 與 NaN 是不恒等的，但是在 Set 中只能存一個，不重復。
Set 對象作用
數組去重/并集、交集、差集
原文鏈接：https://blog.csdn.net/liuarmyliu/article/details/108850483
[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
總結
以上是生活随笔為你收集整理的2022 HTML + CSS面试题，美女吐血整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 花了三天三夜才收集整理出来的经典 SQL
- 下一篇： java ssh 和mvc_JAVA三大