整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1.對WEB標準以及W3C的理解與認識。
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性。
2.xhtml和html有什么區別？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言。
最主要的不同：
XHTML元素必須被正確地嵌套；
XHTML元素必須被關閉；
標簽名必須用小寫字母；
XHTML文檔必須擁有根元素。
3.Doctype的作用？嚴格模式和混雜模式的區別？它們有什么意義？
1）<!DOCTYPE>聲名位于文檔的最前面，在<HTML> 標簽的前面，告知瀏覽器以何種模式來渲染文檔。
2）嚴格模式的排版和JS運作模式都是以瀏覽器支持的最高的標準運行。按照W3C的標準來解析代碼。
3）混雜模式是以寬松的，向后兼容的方式來解析代碼。是指瀏覽器用自己的方式解析代碼，模擬老式瀏覽器的行為以防止網站停止工作。
4）若DOCTYPE為聲名或格式不正確，頁面將會以怪異模式的方式解析。
5）Doctype標簽可聲明三種DLD類型，分別是嚴格型，過渡型，框架型。
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素：a b br i span input select
CSS盒模型：內容、填充（padding）、邊框（border）、外邊界（margin）
5.CSS引入的方式有哪些? link和@import的區別是?
方式：
內聯方式、嵌入方式、鏈接方式、導入方式。
區別：
1）link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。
2）link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
3）link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4）ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
6.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
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）優先級就近原則，同權重情況下樣式定義最近者為準
2）載入樣式以最后載入的定位為準
3）!important > id > class > tag
4）important 比 內聯優先級高，但內聯比 id 要高
7.前端頁面有哪三層構成，分別是什么?作用是什么?
結構層 HTML：
由HTML或XHTML之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P標簽表達了這樣一種語義：“這是一個文本段。”
表示層 CSS：
由CSS負責創建，CSS對“如何顯示有關內容”的問題做出了回答。
行為層 JS：
負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM主宰的領域。
8.CSS的基本語句構成是?
選擇器{屬性 1:值 1;屬性 2:值 2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?
Ie(Ie 內核)、火狐（Gecko）、谷歌（webkit）、opear(Presto)
10.標簽上title與alt屬性的區別是什么?
Alt當圖片不顯示時，用文字代表
Title 為該屬性提供信息
11.描述css reset的作用和用途。
每個瀏覽器都有一些自帶的或者共有的默認樣式，或造成一些布局上的困擾，css reset的作用就是重置這些默認樣式，使樣式表現一致。
為了讓頁面獲得瀏覽器跨瀏覽器的兼容性，需要用重置文件css代碼覆蓋瀏覽器默認的樣式來統一樣式。
12.解釋css sprites，如何使用。
css sprites：
精靈圖（雪碧圖），把一堆小圖片整合在一張大圖上，通過背景圖片相關設置（背景圖片、背景圖是否重復、背景圖定位），顯示圖片，減輕服務器對圖片的請求數量
使用步驟：
1）制作一張具有多狀態的拼合圖片，需要按照一定規律處理
2）給要顯示背景的盒（一個固定尺寸，寬width、高height），以背景的方式加載，讓其局部顯示
3）通過背景圖定位（background-position）控制不同的顯示狀態
13.瀏覽器標準模式和怪異模式之間的區別是什么?
所謂的標準模式是指，瀏覽器按W3C標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。
使用window.top.document.compatMode可顯示為什么模式。
14.你如何對網站的文件和資源進行優化?期待的解決方案包括：
1）文件合并
2）文件最小化/文件壓縮
3）使用 CDN 托管
4）緩存的使用
5）GZIP壓縮你的JS和CSS文件
15.什么是語義化的HTML？為什么要做到語義化？
語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），能夠便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
語義化的優點：
1）有利于SEO，有利于搜索引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。
2）在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。
3）便于團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。
4）支持多終端設備的瀏覽器渲染。
16.清除浮動的幾種方式，各自的優缺點：
1）使用空標簽清除浮動clear:both（理論上能清楚任何標簽，增加無意義的標簽）
2）使用overflow:auto（空標簽元素清除浮動而不得不增加無意代碼的弊端，使用 zoom:1 用于兼容 IE）
3）是用afert偽元素清除浮動（用于非 IE 瀏覽器）
17.如何居中div?如何居中一個浮動元素?
給div設置一個寬度，然后設置元素的左右外邊距為 auto，比如，margin:0px auto。則可以實現 div 居中顯示。
對于浮動元素，設置其左右外邊距為關鍵字 auto 是無效的。此時，如果需要設置其居中顯示，可以：
1）精確計算其左外邊距并進行設置，實現居中顯示
2）使用一個居中顯示的 div 元素包含此浮動元素
18.CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個元素的每個元素。
p:last-of-type 選擇屬于其父元素的最后元素的每個元素。 p:only-of-type 選擇屬于其父 元素唯一的元素的每個元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。 :enabled :disabled 控制 表單控件的禁用態。
:checked 單選框或復選框被選中。
19.HTML5 的離線儲存有幾種方式?
localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage 數據在瀏覽器關閉后自動刪除。
20.請描述一下cookies，sessionStorage和localStorage的區別?
相同點：
都存儲在客戶端
不同點：
1）存儲大小
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2）有效時間
localStorage存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據。
sessionStorage數據在當前瀏覽器窗口關閉后自動刪除。
cookie設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
3）數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
21.簡述一下src與href的區別。
href是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執 行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
22.簡述同步和異步的區別。
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么 這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
23.HTML5為什么只需要寫 <!DOCTYPE HTML>？
HTML5不基于SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基于SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
24.CSS清除浮動的幾種方法。
1）使用帶clear屬性的空元素
2）使用CSS的overflow屬性
3）使用CSS的after偽元素
4）使用鄰接元素處理
超鏈接是互聯網最突出的功能之一，添加超鏈接也是所有網絡用戶需要掌握的基本功。
然而，「會用」超鏈接并不等于能「用好」超鏈接。或許是因為操作太過容易，我們在添加超鏈接的時候往往頗為隨意，而不會仔細考慮做成超鏈接的內容和地址是否合理。
回想一下，你是否遇到過下面這樣的超鏈接用法，或者自己這樣用過：
這些用法都是值得商榷的。
超鏈接的正確用法并不是個新話題。早在 2004 年，谷歌工程師 Jed Hartman 就撰文討論過鏈接文本的合理用法；上面列舉的幾種不當用例正是來源于該文。
一些開發文檔也涉及了這個問題。谷歌的《開發文檔風格指南》（Developer Documentation Style Guide）就為此專設一節，并指出鏈接文本應該「描述讀者點擊鏈接后將會看到的內容」，如被引文檔的標題或對其內容的描述。Mozilla 維護的 MDN 文檔庫也討論了「鏈接最佳實踐」（link best practices），同樣建議回避上述幾種做法。
但正如我們所見，時至今日，超鏈接的使用在實踐中仍然是很隨意的；不少網站超鏈接的外觀設計也往往不盡人意。
為此，我想從鏈接文本和鏈接地址的選擇、鏈接外觀的設計等方面，討論自己認為較優的用法，希望能為超鏈接的規范使用提供一些參考。
要回答鏈接文本如何設置，首先要從什么是超鏈接說起。
根據 HTML 標準，超鏈接是「指向其他資源的鏈接，通常由用戶代理（一般即為瀏覽器——筆者注）展示給用戶，使用戶可以令用戶代理導航到這些資源」。
此外，超鏈接通常是通過「錨」（anchor）元素（a）構造的；當一個錨元素含有 href 屬性時，該元素就代表一個由其內容標記（label）的超鏈接。
這些定義固然晦澀，但我們仍然可以從中得出一些有用結論：
在此基礎上，我們就可以說明為什么前面提到的幾種「流行」用法是有待商榷的：
第一種用法（將操作指示作為鏈接文本）的主要問題在于贅余。既然錨元素的存在本身就說明有鏈接、可點擊，再加入「點擊」「更多」之類的描述，就好像是在說「這是一個有鏈接的鏈接」一樣，成了同義反復。
早年，并非人人都「認識」超鏈接，這么寫或許還有些教育用戶的意義，但這在今天已經不是個問題了。此外，這樣的鏈接文本也無法說明被鏈接的內容。因此，不妨刪去「點擊」「更多」，代之對被引內容的說明：
要進一步了解某話題，可以參閱某文章。
第二種用法（將網址作為鏈接文本）同樣會讓讀者無從知曉其內容。此外，從排版角度，冗長的網址也會給斷行、對齊的處理造成不便，影響版面的整潔度。因此，更好的做法仍然是描述鏈接地址的內容，而不是直接把地址寫進正文（當然，因行文需要展示鏈接地址的場合除外）。
第三種用法（將超鏈接的連用作為列舉手段）可謂有利有弊。一方面，這么做確實具有一定「修辭」功能，可以傳達俏皮、諷刺等意味。但正如那些被濫用的「梗」一樣，其新意和趣味會隨著反復使用而磨損，最終引起讀者的厭倦；這么做也違反了「名副其實」的原則，給閱讀造成不便。因此，最好還是把「文采」留給別處，用更清晰的方式來列舉超鏈接。
例如，與其使用上述那種抖機靈寫法：「蘋果在過去幾個月和開發者可謂 沖 突 不 斷」，不如原原本本地把具體內容呈現給讀者：
蘋果在過去幾個月和開發者可謂沖突不斷，先后拒收了電郵服務 Hey 的官方 app、下架了人氣游戲 Fortnite、強迫 WordPress 通過內購銷售域名，并「言而有信」地關停了 Epic 的開發者賬號。
第四種用法（鏈接文本過長）是否不值得鼓勵，現有討論并未達成共識，但我的觀點仍然是應該盡量避免。理由是，如果鏈接文本很長，它很可能是在摘錄或描述被引內容的局部，而非全文；如果給這樣的局部引用加上指向原文整體的超鏈接，不僅不具有對應關系，也不便于讀者跳轉之后找到相關段落。
因此，更好的做法是把鏈接加在文章標題上（同時說明被引段落的位置），然后用普通文本做摘錄和總結：
根據某文章 [某節] 的觀點，「……」。
另外，不合規范的鏈接用法還會產生一些較為間接、但同樣不容忽視的負面影響。例如，這會降低網頁的可訪問性（accessibility），給依賴于讀屏器的用戶造成不便，使他們很難通過聽到的鏈接文本判斷目標頁面的內容（參見不同讀屏器對于鏈接文本的處理方式）。又如，搜索引擎在索引網站時，常常通過鏈接來判斷網站的關鍵詞。如果一個網站的鏈接文本都是「跑題」的，它給搜索引擎的「印象分」就會大打折扣，導致搜索排名降低。
從上文的討論可以看出，要修正超鏈接的「問題用法」，只靠給鏈接換個位置可能是不夠的，往往還需要調整甚至重寫相關表述。
這是因為，超鏈接的質量間接反映了寫作的質量：如果你發現難以從文本中找出合適的部分做成鏈接，那么很可能是因為行文表述不夠具體、充分，信息標注不夠明確、規范。
這里，超鏈接的便捷再次埋下了隱患。過去，我們用括號、腳注提示相關信息，用引注、參考文獻表明內容來源。到了面向網頁的寫作中，這些傳統注記方式的職能在很大程度上被超鏈接包攬了。但與此同時，那些原本需要研究、檢索支撐的工作，被簡化成了復制粘貼網址；原本寫成白紙黑字、受讀者審視的引文，被藏到了鏈接背后。在方便的同時，這也為我們提供了「縱容」自己降低寫作標準、濫用超鏈接的借口。
因此，比起「在哪里添加超鏈接」，一個更優先的問題或許還是「要不要添加超鏈接」。
如果文章討論的話題線索復雜、眾說紛紜，那么我們就有責任先梳理、溯源，篩選出盡可能一手、高質量的來源做成鏈接，而不是將大把鏈接一股腦塞給讀者，同時產生「內容充實」的良好自我感覺。如果被引文章篇幅較長、內容艱深，或與當前段落的關系并不一目了然，那么我們也有責任作出必要的標注和解釋，而不是拋出一個超鏈接，讓讀者自己點開「細品」「領悟」。
例如，前段時間，美國國會召集四大科技公司 CEO 的反壟斷聽證會受到了媒體的廣泛關注（可參閱我介紹此事的文章）。不少報道在行文中提及了微軟 20 年前受到的司法部指控，以此介紹美國法院的反壟斷判案標準。
這個案例引用當然是切題的，但到了為其添加超鏈接時，很多文章就頗為隨意，一般都選擇鏈接到自己網站的其他文章，或是當年的媒體報道。然而，這并不符合前面介紹的「名副其實」原則（最相關的文件應當是判決書，或至少是對判決結果的報道），也不足以使讀者了解判決邏輯是什么、從何而來。
實際上，如果遵循法律引注的要求，提及判例應當附上相關案件的完整索引信息和必要的解釋說明：
United States v. Microsoft Corp., 253 F.3d 34, 59 (D.C. Cir. 2001) (holding that a balancing approach under the rubric of the “rule of reason” is applied for the analysis under §2 of the Sherman Act).
這樣，讀者不僅能了解案件的當事方（聯邦政府訴微軟公司）、審理的時間地點（2001 年由聯邦法院哥倫比亞特區巡回法庭審理），主要的判決理由（法院可以通過衡量利弊判斷壟斷行為是否合法），而且如有興趣進一步探究，還可以自己找到判決原文閱讀（《聯邦案例匯編》第三輯第 253 卷，第 34 頁以下，相關段落位于第 59 頁）。
誠然，出于效率和簡潔的考慮，網上寫作沒有必要像學術寫作那樣一板一眼地遵循引注規范（Bluebook 等引注標準確實也因為繁瑣、封閉而頗受詬病）。但功夫有時需要下在那些看不見的地方；如果下筆前對寫作對象做了充分的研究，寫作時做了充分的說明和標注，「超鏈接加在哪」幾乎不會是個問題。
要做出好的超鏈接，除了關注鏈接文本的選擇，鏈接地址的規范性也不應忽視。
一方面，做成超鏈接的地址應當盡量精簡，即在不影響鏈接功能的前提下，包含盡量少的無關信息。直接從瀏覽器地址欄復制的 URL 未必適合直接拿來做成鏈接，因為其中可能包含了很多無關的參數（parameter）。
例如，搜索結果頁和郵件通訊中很多 URL 都含有 utm_source 等用于流量分析的參數：
https://example.com?utm_source=news4&utm_medium=email&utm_campaign=spring-summer將其留在超鏈接中不僅沒有實際功能，而且不利于保護讀者的隱私。
又如，在插入商品銷售頁的鏈接時，應當從中刪除無關的引薦代碼（affiliate token）；如果要加入自己的引薦代碼，則應當作出明確披露。
另一方面，鏈接地址又應當足夠具體，即盡可能精準定位到相關資源。如果引述的內容集中于文章的某一節，那么插入的 URL 最好具體到片段（fragment）。
例如，如果撰文討論常見的網頁標準，那么在插入相關維基詞條的鏈接時，就可以具體到：
https://en.wikipedia.org/wiki/Web_standards#Common_usage這樣，讀者在點擊后就可以直接跳轉到其中最相關的「Common Usage」一節。
類似地，如果文章涉及 GitHub 代碼或 YouTube 視頻，也不妨利用它們為特定行號或時間戳創建鏈接的功能。
前不久，谷歌還為 Chrome 瀏覽器開發了一個名為「鏈接到文本片段」（Link to Text Fragment）的插件，可以幫助用戶制作出指向頁面上任意文本的鏈接。遺憾的是，這個插件背后的標準仍處于早期草案階段。在它被廣泛采納之前，更務實的做法或許還是像上文建議的那樣，不怕啰嗦地向讀者盡量具體描述引文的位置。
最后，超鏈接的質量并不只取決于文章作者；網站的設計者對此也有一份責任，那就是合理地設計超鏈接的外觀。
傳統網頁中的超鏈接是其貌不揚的，始終以藍色文字加下劃線的形態示人。但在近年，給鏈接文本加粗、添加夸張的下劃線、換用高飽和度的顏色似乎蔚然成風；超鏈接儼然成了很多網站彰顯個性的秀場。
Vox 的超鏈接；彩色粗體的設計在鏈接密集時讓版面不整潔且缺乏層次
然而，網頁元素的外觀應該與其功能相匹配。正如前文反復強調的，超鏈接只能說明鏈接文本存在一個關聯頁面，而不能說明它相對于上下文更加重要。因此，也就沒有理由使其在視覺上過分突出。此外，過度設計超鏈接還會進一步放大前述濫用行為的危害，讓版面效果變得凌亂而沒有層次。
當然，這并不是說超鏈接的設計就只能是死氣沉沉的。我就曾見過不少既恰如其分、又不失新意的超鏈接設計。試舉兩例：
一是排版設計師 Matthew Butterick 的 Butterick’s Practical Typography 網站。這個網站實際是一本電子書，深入淺出地講解了很多實用的排版技巧和關注點。它的設計拋棄了「下劃線=超鏈接」的傳統做法，轉而通過 CSS 的 :after 在每個超鏈接之后加上一個小紅圈，同時鏈接文本會在鼠標懸停時被淡紅底色高亮。這樣的設計既降低了侵略感，又保留了視覺提示功能，與中國傳統的「圈點」批注有著微妙的相似。
Practical Typography 的鏈接設計
二是軟件工程師 Jestem Króliczkiem 的個人博客 beepb00p。作為一個技術向、長篇說明文為主的博客，它的設計亮點在于為常用的外部網站（例如 GitHub、維基百科等）的鏈接添加了 SVG 圖標，并為跳轉到文內其他段落的鏈接添加了上下箭頭。這些圖標的加入不僅使鏈接對象一目了然，也給原本「素面朝天」的文本頁面平添了幾分趣味。
beepb00p 的鏈接設計
你可能已經注意到，本文在討論各種鏈接用法時，一直回避使用「正確」「錯誤」等定性的標簽，而代之以「合適」「更好」等評價。的確，超鏈接的用法和設計并沒有成文的標準，而更多是一種「風格」（style）。既然是風格，就沒有絕對的對錯之分，而是會隨著時代、技術、觀念等外部因素而變，并且體現著不同寫作者、設計者的個性。
然而，隨性不等于隨意。從小處說，鏈接的質量體現了作者的態度，反映了文章的質量。往大處說，互聯網是由超鏈接織成的，它的價值也很大程度上取決于超鏈接的廣度、深度和精度。在筑籬修渠成為科技巨頭的發展要務、互聯網的開放價值備受威脅的今天，用高質量的超鏈接拓展信息的邊界，或許就是我們作為普通用戶守護互聯網為數不多的方式之一。
CSS 面試題
## 01. 盒模型
盒模型分為標準盒模型和怪異盒模型
- 標準盒模型：實際寬度由 寬度 + padding + border 組成(box-sizing: content-box)- 怪異盒模型：內容寬度為 定義的寬度 - padding - border(box-sizing: border-box)
## 02. 什么是文檔流
文檔流是元素在 web 頁面上的一種呈現方式，按照出現的先后順序進行排列
## 03. 什么是 BFC
BFC 即 Block Formatting Contexts(塊級格式上下文)。它是頁面中的一塊區域，它決定了子元素將如何定位，以及和其他元素的關系和相互作用。
具有 BFC 特性的元素可以看做是隔離的容器，它的子元素在布局上不會影響到外面的元素
## 04. 觸發 BFC 的條件
- float 不為 none- position 的值不是 static 或 relative- overflow 的值不是 visible- display 的值是 inline-block / table-cell / flex / inline-flex / table-caption
## 05. BFC 的作用
- 解決 margin-top 向上傳遞的問題- 解決 margin 上下疊加的問題- 清除浮動
## 06. 清除浮動的方式
同一層級的元素：另外的元素設置樣式 clear: both;
子元素清除父元素的浮動：
- clear 屬性- BFC- 空元素- 給父元素設置 .clearfix::after{}
```css.clearfix::after { content: ""; display: block; clear: both;}```
## 07. 盒子里的文字上下居中
```css.box { height: 100px; line-height: 100px;}```
```css.box { display: table-cell; vertical-align: middle;}```
```css.box { display: flex; align-items: center;}```
```css.box { display: flex; flex-wrap: wrap; align-content: center;}```
## 08. 盒子里的盒子上下左右居中
```css.container { position: relative;}.box { display: absolute; top: 0; left: 0; transform: translate(-50%, -50%);}```
```css.container { display: flex; justify-content: center; align-items: center;}```
```css.container { display: grid; justify-content: center; align-content: center;}```
```css.container { display: flex; /* display: inline-flex; */}.box { margin: 0 auto;}```
```css.container { position: relative;}.box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}```
```css.container { display: table-cell; vertical-align: middle;}.box { margin: 0 auto;}```
## 09. rem 和 em 的區別
- rem 是相對于根元素(html)的 font-size 的，1rem=根元素的 font-size- em 如果元素自身定義了 font-size，1em=元素自身的 font-size，如果元素自身沒有定義 font-size，那么 1em=元素的父元素(設置了 font-size 的父元素)的 font-size- 如果元素自身的 font-size 設置的就是 em，那么元素自身的 font-size 就根據父元素的 font-size 計算得到
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
