标签
常用标签
通过看http://www.w3school.com.cn/tags/index.asp，熟悉以下html标签：
<p></p>
<div></div>
<input>
<span></span>
<a></a>
<i></i>
<ul></ul>
<ol></ol>
<li></li>
<select></select>和<option></option>
<hr/>
<br/>
CSS基础
什么是CSS
CSS（Cascading Style Sheets）层叠式样式表，用于定义如何显示HTML元素。
CSS语法
CSS规则由两个部分构成：选择器，一条及多条声明。
选择器{属性：样式属性}
selector{
property:value;
property2:value;
property3:value;
……
}
例如，我们要设置html中input的字体颜色及字体大小，就这样写：
input{
color:red;
font-size:14px;
}
选择器
选择器种类很多，常见的如下：
//元素选择器
input{
color:red;
}
//id选择器
#div1{
width:50px;
}
//类选择器
.active{
color：red；
}
//属性选择器
[title]
{
color:red;
}
除此之外还有后代、兄弟、伪类选择器等等，具体知识点，请见CSS相关课程。
行内元素与块级元素
html元素分两类：行内元素、块级元素。他们有如下区别：
1.行内元素与块级元素直观上的区别：行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
常见块级元素：
<div> - 常用块级容易，也是css layout的主要标签
<form> - 交互表单
<h1>-<h6> - 标题
<hr> - 水平分隔线
<p> - 段落
<table> - 表格
<ul> - 非排序列表
<ol> - 排序表单
常见行内元素：
<a> - 链接
<br> - 换行
<em> - 强调
<img> - 图片
<input> - 输入框
<label> - 表格标签
<select> - 项目选择
<small> - 小字体文本
<span> - 常用内联容器，定义文本内区块
<strong> - 粗体强调
<textarea> - 多行文本输入框
<var> - 定义变量
块级元素和行内元素相互是可以转换的，只需要设置该元素的display属性：
display:block;//转换为块级
display:inline；//转换为行内
display:inline-block；//具有行内元素特性，又能像块级一样调整宽高
盒模型
标准 w3c 盒子模型的范围包括 margin（外边距）、border（边框）、padding（内边距）、content（内容）。
我们的html中的每个元素都可以看做一个盒子，都有上述四个属性。
绝对定位与相对定位
绝对定位
绝对定位(position: absolute)：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含（body）。
绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
相对定位
相对定位（position: relative）：相对定位是相对于元素在文档中的初始位置；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline;display:block都是无效的。
但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。
