DIV与SPAN

DIV图层

DIV定义：分区或分节

基本语法：<div id="" class="" style="">块包含的内容</div>

DIV标记的属性、值及说明

DIV标记的style属性取值中属性、值及说明

属性	值	说明
position	static	表示静态定位，默认设置
	absolute	表示绝对定位，与位置属性配合使用
	relative	表示相对定位，图层不可层叠
	fixed	表示图层位置固定，不滚动
border	线粗细线型线颜色	边框，可以设置风格、粗细、颜色等属性
background-color	rgb()\|十六进制数\|英文颜色名	背景颜色
left	pixes\|%	规定层左边距离
top	pixes\|%	规定层与顶部的距离
width	pixes\|%	规定层的宽度
height	pixes\|%	规定层的高度
float	left\|right\|none	允许浮动元素在左边、右边及不浮动
clear	left\|right\|both\|none	分别表示清除左边、右边、左右两边和允许左右两边有浮动
z-index	auto\|数字	表示子层会按照父层的属性显示\|无单位的整数或负数
overflow	scroll\|visible\|auto\|hidden	内容溢出控制。分别表示始终显示滚动条、不显示滚动条。但超出部分可见、内容超出部分显示滚动条、超时隐藏内容
display	block\|inline\|none	表示按块元素显示、行内方式显示和隐藏等

SPAN标记

SPAN标记是行内标记，也是行内元素，同样可包含HTML的各种元素。前后不会自动换行。

基本语法：<span id="样式名称" class="样式名称" >...</span>

语法说明：若不给SPAN标记应用样式，则 SPAN标记包含的元素不会有任何视觉上的变化，只有应用样式后，才会有效果。

DIV标记

DIV标记是区块容器标记，可容纳段落、标题、表格、图像等各种HTML元素。只要对DIV标记进行样式控制，就可对DIV内容包含的各种元素进行样式控制。

DIV标记包含的元素会自动换行。

DIV标记和SPAN标记的区别：

（1）是否有块标记

DIV标记是块标记，一般包含较大范围，在区域的前后会自动换行；

SPAN标记是行内标记，一般包含范围较窄，在区域外不会自动换行。

（2）是否可以相互包含

DIV标记可以包含SPAN标记，但SPAN标记不能包含DIV标记