前端必須掌握的三個技能

1. HTML-負責網頁的結構語義化。
2. CSS-負責網頁的樣式美化。
3. JS-負責網頁的動態效果。

注意：這三個之間分工明確，嚴格要求分離。

瀏覽器內核（渲染引擎）

• IE---trident內核
• 谷歌/歐鵬---blink內核
• 火狐---gecko內核
• 蘋果---webkit內核

渲染引擎是瀏覽器兼容問題的根本原因。

設置網頁關鍵字

<!--關鍵字-->
<meta name="keywords" content="關鍵字">

設置網頁的描述

<!--網頁描述-->
<meta name="description" content="描述內容">

設置網頁的圖標

<!--網頁圖標-->
<link rel="icon" href="圖標路徑">

網頁重定向

<!--網頁重定向-->
<meta http-equiv="refresh" content="5, http://www.baidu.com">

CSS浮動的清除

清除浮動的意思就是清除元素浮動過后所帶來的影響，并不是正真的清除浮動。

清除浮動的方法：

1. 使用clear: both清除浮動。
2. 給浮動元素的父親加上overflow: hidde | auto 可以清除浮動。
3. 通過添加偽類來清除浮動，要浮動元素的父親調用：

// 偽類清除浮動
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  width: 0;
  visibility: hidden;
  clear: botn;
}
// 兼容IE瀏覽器
.clearfix {
  zoom: 1;
}

雙偽類標簽清除浮動：

.clearfix:before, .clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
// IE瀏覽器兼容問題
.clearfix {
  zoom: 1;
}

什么時候使用margin和padding

• 需要使用背景圖片的時候必須使用padding。
• 會出現外邊距合并或者margin塌陷的時候使用padding。
• 行內元素上下只能設置padding不能設置margin。

隱藏盒子的方法：

1. overflow: hidden; 隱藏盒子超出的部分。
2. display: none; 隱藏盒子，并且不占用位子。（用的最多）
3. visibility: hidden; 隱藏盒子，并且占用位子。
4. opacity: 0; 隱藏盒子，而且占用位子。
5. Position/top/left/ -999px; 隱藏盒子，并且占用位子。