HTML学习笔记-盒模型及布局相关属性（九）

1.div和span

1. div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式。
2. div和span的区别在于：span是内联元素(只占用所需位置)，div是块级元素(占用一整行)。
3. div能够定义宽度和高度属性，span不能定义。但是可以通过display属性将div与span相互转换。

2.盒模型

margin	盒子外边距
padding	盒子内边距
border	盒子边框宽度
width	盒子宽度
height	盒子高度

3.布局相关属性

3.1 position定位方式

relative	正常定位
absolute	根据父元素进行定位
fixed	根据浏览器窗口进行定位
static	没有定位
inherit	继承

离页面顶点的距离：
left（左）、right（右）、top（上）、bottom（下）

3.2 z-index层覆盖先后顺序(优先级)

优先级高的属性显示会覆盖优先级低的属性显示。
优先级越高，显示在越顶层，优先级相同，按css声明顺序来决定优先级。

3.4 display显示属性

display: none  		层不显示
display: block  	块状显示，在元素后面换行，显示下一个块元素（可将span转换为div）
display: inline  	内联显示，多个块可以显示在一行内（可将div转换为span）

3.5 float浮动属性

float: left 左浮动
float: right 有浮动

3.6 clear清除浮动

clear: both  清除浮动

3.7 overflow溢出处理

overflow:hidden  隐藏超出层大小的内容
overflow:scroll  无论内容是否超出都添加滚动条显示
overflow:auto   超出时自动添加滚动条显示

4.兼容问题

1.兼容性测试工具：
	IE Tester 
	Multibrowser
2.常用的浏览器：
	Google chrome
	Firefox
	opera
3.高效的开发工具
	轻量级：Notepad++、sbulime Text、记事本
	重量级：WebStorm、Dreamweaver
4. 网页设计工具
	fireworks、photoshop
5. 判断IE的方法
	条件判断格式： <!--[if 条件 版本]> 显示内容 <![endif]-->
	示例：
	<!--[if !IE 8]> 这不是IE8 <![endif]-->             						判断不等于IE8（改判断只对IE有效）
	<!--[if lt IE 8]> 小于IE8 <![endif]-->        								判断小于IE8
	<!--[if gt IE 8]> 大于IE8 <![endif]-->        								判断大于IE8
	<!--[if lte IE 8]> 小于等于IE8 <![endif]-->        						判断小于等于IE8
	<!--[if gte IE 8]> 大于等于IE8<![endif]-->        						判断大于等于IE8
	<!--[if (gt IE 5) &(lt IE 8)]> 大于等于IE8<![endif]-->        		判断大于IE5且小于IE8
	<!--[if (IE 5) |(IE 8)]> IE5或IE8<![endif]-->        					IE5或IE8
	<!--[if IE 8)]> 如果是IE8<![endif]-->        								判断是IE8