前端之路-学习笔记（一）

前端必须掌握的三个技能

1. HTML-负责网页的结构语义化。
2. CSS-负责网页的样式美化。
3. JS-负责网页的动态效果。

注意：这三个之间分工明确，严格要求分离。

浏览器内核（渲染引擎）

• IE---trident内核
• 谷歌/欧鹏---blink内核
• 火狐---gecko内核
• 苹果---webkit内核

渲染引擎是浏览器兼容问题的根本原因。

设置网页关键字

设置网页的描述

设置网页的图标

网页重定向

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; 隐藏盒子，并且占用位子。