1. css 實現垂直居中
.flex{
display: flex;
justify-content: center;
align-items: center;
}
一般採用flex佈局來實現元素居中，其他方法有 margin: 0 auto; 定位
2. flex佈局
任意一個容器都可以使用flex 佈局， Webkit 內核的瀏覽器 需要添加-webkit 前綴，將容易設置爲flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
flex-direction 屬性決定主軸的方向。
flex-wrap 屬性決定是否換行。
flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
justify-content 屬性定義了項目在主軸上的對齊方式。
align-items 屬性定義項目在交叉軸上如何對齊。
align-content 屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用.
等其他一些屬性 詳細查看鏈接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
3. 瀏覽器內核
1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；
2、Chrome瀏覽器內核：統稱爲Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；
3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；
4、Safari瀏覽器內核：Webkit內核；
5、Opera瀏覽器內核：最初是自己的Presto內核，後來是Webkit，現在是Blink內核；
6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；
7、搜狗、遨遊、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；
8、百度瀏覽器、世界之窗內核：IE內核；
9、2345瀏覽器內核：以前是IE內核，現在也是IE+Chrome雙內核；
4.從輸入URL到頁面展示的詳細過程
1、輸入網址
2、DNS解析
3、建立tcp連接
4、客戶端發送HTPP請求
5、服務器處理請求
6、服務器響應請求
7、瀏覽器展示HTML
8、瀏覽器發送請求獲取其他在HTML中的資源。
5. 頁面導入樣式時，使用link和@import 有什麼區別
link屬於XHTML標籤，而@import 時css提供的
頁面加載時，link會同時被加載，而@import引用的css會等到頁面被加載完成在加載
@import只在IE5以上才能識別，而link時XHTML標籤，無兼容問題
link方式的樣式權重高於@import的權重
6.HTML中href和src的區別
1. href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示來源地址，在 img、script、iframe 等元素上。
2. src 的內容，是頁面必不可少的一部分，是引入。href 的內容，是與該頁面有關聯，是引用。區別就是，引入和引用。
7. HTML、CSS、JavaScript 在Web前端開發中的作用
HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。（css3 也可以實現動畫效果）
8.a標籤
a標籤可以定義超鏈接，就是頁面跳轉，也可以實現錨點 打電話 發郵件等其他作用。
寫#會跳到頁面頂端，而用 href="JavaScript:void(0);" 不會觸發任何行爲
9. id 唯一
ID唯一隻是推薦的規範做法。並沒有說一定不行。
但這也不意味着就可以隨便用，因爲在一些需要根據ID取值的情況下,如document.getElementById，存在多個相同ID的話，就不會象你在CSS中這樣幸運。
所以爲了避免這種在一些情況下出錯，一些情況下又沒問題的狀況，如果你不是非常瞭解的話，就最好都按照規範去寫，所有的規範必有其道理和長期廣泛的經驗結果。
10. html 基本結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 頁面</title> </head> <body> </body> </html>
body 中的內容可以用 header main footer 標籤來佈局
11. 利用flex佈局實現自適應佈局， 如果知道高度，也可以利用calc() 計算屬性來實現佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自適應佈局</title>
<style>
body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
flex-direction: column;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
header, footer{
width: 100%;
height: 80px;
flex: 0 0 auto;
background: #000;
color: #fff;
}
main{
flex: 1 0 auto;
}
</style>
</head>
<body>
<header class="flex">header</header>
<main class="flex">main</main>
<footer class="flex">footer</footer>
</body>
</html>
12. html中的標籤屬性可以隨便定義嗎？
可以，但是需要考慮兼容問題
13. display:none 和 visibility:hidden 的區別
display:none 隱藏對應的元素 在文檔中消失。
visibility:hidden 隱藏對應的元素，但是在文檔中的位置沒有消失，並且它具有繼承性，如果給子元素設置visibility:visible,則子元素會顯現出來，與display:none 有、着質的區別