DIV与SPAN

DIV图层

DIV定义：分区或分节

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

DIV标记的属性、值及说明

属性	值	说明
id	id	规定元素的唯一id
class	classname	规定元素的类名
style	style_definition	规定元素的行内样式

 

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标记

属性值	说明
none	此元素不会被显示
inline	将对象设置为行内元素，在行内显示
block	将对象设置为块级元素，以块状显示，自动换行
inline-block	将对象设置为行内块标记
inherit	规定应该从符元素继承display属性的值