前端必须掌握的三个技能
- HTML-负责网页的结构语义化。
- CSS-负责网页的样式美化。
- 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浮动的清除
清除浮动的意思就是清除元素浮动过后所带来的影响，并不是正真的清除浮动。
清除浮动的方法：
- 使用clear: both清除浮动。
- 给浮动元素的父亲加上overflow: hidde | auto 可以清除浮动。
- 通过添加伪类来清除浮动，要浮动元素的父亲调用：
// 伪类清除浮动
.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。
隐藏盒子的方法：
- overflow: hidden; 隐藏盒子超出的部分。
- display: none; 隐藏盒子，并且不占用位子。（用的最多）
- visibility: hidden; 隐藏盒子，并且占用位子。
- opacity: 0; 隐藏盒子，而且占用位子。
- Position/top/left/ -999px; 隐藏盒子，并且占用位子。
