块-内联-内联块
块元素：如div
默认独占一行，支持所有css样式
内联元素：如em、span
1 可以在一行显示多个同类型的标签
2 不支持宽高，内容撑开宽高
3 不支持上下margin
4 代码换行被解析成空格
块及内联的转换，使用display实现
display: inline显示为内嵌 block显示为块 inline-block内联块
display将标签转换为页面中的显示类型，不改变标签本质
内联块：块在一行显示；内联元素支持宽高；没有宽度时，内容撑开宽度
内联块2个问题：标签换行被解析；ie6 ie7不支持块属性标签的inline-block
浮动及清除浮动
float和文档流
文档流：文档中 可显示对象 在排列时所占用的位置
浮动：使元素脱离文档流，按照指定方向发生移动，直到遇到父级边界或相邻浮动元素
float: right/ left/ none/ inherit
clear, 元素的某个方向上不能有浮动元素, left/ right/ both/ none/ inherit
<!-- ====================== -->
float特征
1 块在一排显示
2 内联支持宽高
3 默认内容撑开宽度
4 脱离文档流
5 提升层级半级
<!-- ======================== -->
清浮动：清除浮动是因为浮动存在一些问题，父级box包裹不住浮动子元素的高度
清除浮动的方法
1 给浮动元素的父级添加高度，不适应于父级高度不固定
2 父级也浮动，导致需要逐级向上加浮动，margin左右自动失效
3 inline-block方法给父级添加inline-block，margin左右auto失效
4 空标签清除浮动，给浮动元素添加一个同级的空标签,设置空标签属性clear:both，问题：ie6下最小高度19px，解决后ie下还有2px偏差
5 br清浮动，给浮动元素的同级添加一个br标签，添加属性clear:all ，问题：同空标签的一样，不符合工作当中结构、样式、行为三者分离的要求
6 after伪类清浮动，给浮动元素的父级添加class，class的after伪类定义清除浮动, 当前最好的方法
7 overflow清除浮动，给浮动元素的父级添加overflow:hidden属性
overflow: hidden/ scroll/ auto; 溢出隐藏、滚动
<!-- ============================ -->
after伪类
.clearfix:after{
content:"after伪类生产的文字";
display:block;
clear:both;
}
ie6下，需要给class添加属性
.clearfix{*zoom:1;}
<!-- ============================ -->
.clearfix{*zoom:1;}
.clearfix:after{
content: "";
display: block;
clear: both;
}
BFC和haslayout
BFC和haslayout
只要触发BFC或haslayout，该区域便是独立的渲染区域，不受外界影响
BFC：block formatting context（块级元素格式化上下文）标准浏览器特有
触发条件：
1 float的值不为none
2 overflow的值不为visible
3 display的值为table-cell、table-caption、inline-block中的任何一个
4 position的值不为relative或static
5 width/ height/ min-width/ min-height: (!auto)
haslayout，IE浏览器
触发条件：
1 writing-mode: tb-rl
2 -ms-writing-mode: tb-rl
3 zoom: (!normal) 最常用
定位
position: relative/ absolute/ fixed
相对定位的特征
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
绝对定位的特征
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
固定定位
position: fixed;
right: 0;
bottom: 0;
透明度设置
filter:alpha(opacity=50); ie6及ie7
opacity: 0.5;
表格
<!-- <table style="border: 2px solid red;"> -->
<!-- border-collapse: collapse; 合并单元格间隙
border="1" 表格边框宽度 -->
<table border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>fruit</th>
<th>vegetables</th>
<th>animals</th>
</tr>
</thead>
<tfoot> <!--表格脚部？-->
<tr>
<td>水果</td>
<td>蔬菜</td>
<td>宠物猫</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>apple</td>
<td>orange</td>
<td>watermelon</td>
</tr>
<tr>
<td>baicai</td>
<td>luobo</td>
<td>doufu</td>
</tr>
<tr>
<td>sheep</td>
<td>dogs</td>
<td>fish</td>
</tr>
</tbody>
</table>
<!-- 合并单元格
<th colspan="2"></th> 合并两个单元格，行
<th rowspan="2"></th> 合并两个单元格，列 -->
表单
<form action="maotouying.com">
<!-- 表单：form，action表单提交的地址 -->
<label for="usernm">用户名：</label>
<input type="text" name="username" value="gouer" id="usernm" disabled="disabled">
<br>
<label for="passwd">密码：</label>
<input type="password" name="passwd" value="密码" id="passwd">
<br><!-- 单选框 -->
<label for="man">男</label>
<input type="radio" name="gander" value="男" id="man" checked="checked">
<label for="woman">女</label>
<input type="radio" name="gander" value="女" id="woman">
<br><!-- 复选框 -->
<label for="">宠物小</label>
<input type="checkbox" name="chongwu" value="cat" id="">猫
<input type="checkbox" name="chongwu" value="dog" id="" checked>狗
<input type="checkbox" name="chongwu" value="pig" id="">猪
<br>
<!-- 自定义按钮及图片按钮 -->
<input type="button" value="自定义按钮">
<input type="image" src="tupian.jpg" alt="tupiananniu" title="zheshitupian">
<br>
<!-- 上传文件 -->
<input type="file" name="tijiaowenjian" id="">
<br>
<input type="hidden" name="yinchangde">在页面不显示的hidden
<br>
<!-- 提交与重置 -->
<input type="submit" value="tijiao">
<input type="reset" value="chongzhi">
<br>
</form>
<!-- 下拉框 -->
<label for="area">区域</label>
<select name="" id="area">
<option value="蚌埠">bengbu</option>
<option value="南京">nanjing</option>
<option value="芜湖">wuhu</option>
</select><br>
<!-- 文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
兼容性问题
css兼容性问题1、2、3...
