最近又迎來一年一度的求職高峰，本人也是準備找工作，於是整理了一下面試中可能出現的知識點。歡迎補充，本集內容只包含html和css。js下期分享吧。
Doctype作用
- 宣告於html文件中第一行，告知瀏覽器的解析器用什麼文件標準解析這個文件。
頁面樣式匯入時候 link 和 @import有什麼區別
- link屬於xhtml標籤，除了載入css外，還能定義Rss，定義rel連線屬性等。而@import是css提供的，只能用於載入css。
##介紹一下你對瀏覽器核心的理解
- 主要分兩部分 渲染引擎和js引擎。渲染引擎負責獲取網頁內容 整理資訊 js引擎負責解析和執行javascript來實現網頁的動態效果。
常見瀏覽器核心有哪些
- 谷歌：-webkit-
- 火狐：-moz-
- ie：-ms-
- 歐鵬：-o-
- qq瀏覽器：雙核心 -webkit- -ms-
H5標籤的新屬性
-
語義化標籤 header footer nav 有利於程式碼可讀性和SEO,語義元素在IE6-8的相容可以使用.
-
表單新增功能 以往input中的name和value要隨著form表單一起提交，form表單必須包裹input , 而現在可以通過input的form屬性繫結
-
視訊標籤 音訊標籤 畫布標籤
如何用html和css寫三角形 transparent屬性為透明
<style>
.box{
height:0px;
width:0px;
border-top:10px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼標籤
- 塊標籤：div ul li ol h p 語義化標籤 可以設定寬高，並且獨佔一行。轉化為塊標籤：display:block；
- 行內塊標籤：img input 可以設定寬高 不獨佔一行。 轉化為行內塊：display:inline-block;
- 行內標籤：a I br span 不可以設定寬高 不獨佔一行 大小由內容決定 只能設定左右間距 不能設定上下間距。轉化為行內標籤：display:inline;
選擇器
- 偽元素選擇器:操作的不是頁面中真實的dom元素 可以用來處理浮動引發的bug
- 偽類選擇器：操作頁面中真實的元素
margin-top 的bug問題
- margin-top 的bug問題 子元素新增margin-top 父元素也掉下來。
- 原因：子元素是父元素的第一個元素 子元素沒有浮動 父元素沒有浮動 父元素沒有內填充 父元素沒有邊框
- 解決方法1.父元素新增overflow:hidden 2.父元素新增padding-top減去父元素高度子元素刪除margin-top
浮動
- 卡頓問題 一個元素高度高於其他元素，就會吧其他元素擠下去
- 浮動引發的bug：父元素不設定高度，子元素都浮動，浮動的子元素撐不開父元素的高度，
- 原因：浮動元素會脫離文件流 不在一個平面內
- 解決辦法：1.給父元素新增高度 2.給父元素加overflow：hidden；3.給父元素新增一個最後的子元素 新增屬性必須是一個塊元素 所以有時候要加display：block clear：both；
右邊寬度固定，左邊自適應
<!--方法1-->
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
<!--方法2 -->
<style>
div {
height: 200px;
}
.left {
float: right;
width: 200px;
background-color: rebeccapurple;
}
.right {
margin-right: 200px;
background-color: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
複製程式碼水平垂直居中
/*方法1*/
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
/*方法2*/
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
/*方法3*/
#container{
display:flex;
justify-content:center;
align-items: center;
}
複製程式碼flex佈局用的多麼
- 不多 因為要考慮ie9的相容
##移動端的適配怎麼做
- 用css3的媒體查詢做響應式佈局，根據螢幕的不同去響應不同的css
##CSS的transition和animation有何區別
- transition是過渡，由一個狀態過渡到另一個狀態，比如高度100px過渡到200px；
- transition的作用在於，指定狀態變化所需要的時間。
- （1）transition需要事件觸發，所以沒法在網頁載入時自動發生。
- （2）transition是一次性的，不能重複發生，除非一再觸發。
- （3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態
- （4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
- animation是動畫，animation有幀的概念，可以設定關鍵幀keyframe,一個動畫可以由多個狀態過渡組成。
選擇器優先順序
- 權重分為四級，權重值越大優先順序越高。
- 1.內聯樣式。如：style=“xxx”，權值為1000
- 2.ID選擇器。如：#content，權值為100
- 3.類，偽類和屬性選擇器。如：.content,:hover,[attribute],權值為10
- 4.元素選擇器，偽元素選擇器。如：div,p,權值為1.
- 注意：通用選擇器（*），子選擇器（>)，相鄰同胞選擇器(+)並不在四個等級中，權值為0.權重值越大優先順序越高，相同權值後定義覆蓋前面定義的.
如何實現滿屏品字佈局
- 上面div寬100%；下面兩個div寬度50%；然後用float讓其不換行
經常遇到的瀏覽器相容性問題 原因，解決方法是什麼，
- png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
- 瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。