div记录.docx
- 文档编号:10312955
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:38
- 大小:147.13KB
div记录.docx
《div记录.docx》由会员分享,可在线阅读,更多相关《div记录.docx(38页珍藏版)》请在冰点文库上搜索。
div记录
Div记录
div和span的区别
div:
div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。
一般我们在网页通过div来布局定位网页中的每个区块。
Span:
span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上标记可以通过在span上定义样式来设定其内容的样式。
div和 span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。
主要用于应用样式表。
如:
代码:
div标记不同行:
span标记同一行:
输出结果:
区别:
两者最明显的区别在于div是块元素,而span是行内元素。
所谓块元素:
是以另起一行开始渲染的元素,
行内元素:
不需另起一行,
测试一下下面的代码你会有更形象的理解:
如:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
测试紧跟前面的"测试"显示
输出结果:
测试紧跟前面的"测试"显示
这里会另起一行显示
块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化
如:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
测试 inline">紧跟前面的"测试"显示
block">这里会另起一行显示
输出结果:
测试紧跟前面的"测试"显示
这里会另起一行显示
应用:
因为div与span元素的特殊性,所以一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,还有两者间的相互转化。
一般而言:
div一般用做渲染html 的容器,而span指定内嵌文本容器。
让div在html面中垂直居中
代码:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
3%">我们都是好孩子
3%">我们都是好孩子
输出结果:
Div的float属性
float浮动属性是布局中非常重要的属性,我们常常通过对div元素应用float浮动来进行布局,不但对整个版式进行规划,也可以对一些基本元素如导航等进行排列。
float属性基本释义:
该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。
也就是说,浮动对象的display特性将被忽略。
float属性的参数:
none:
对象不浮动
left:
对象浮在左边
right:
对象浮在右边
如一:
不浮动
如果float取值为none则不会发生任何浮动,块元素独占一行,紧随其后的块元素将在新行中显示,如:
输出结果:
代码:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#content_a{width:
200px;height:
80px;border:
1pxsolid
#000;margin:
10px;background:
#ccc;}
#content_b{width:
200px;height:
80px;border:
1pxsolid
#000;margin:
10px;background:
#999;}
如二:
content_a应用向左的浮动,而content_b不应用任何浮动
代码:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
#content_a{width:
200px;height:
80px;float:
left;border:
1pxsolid
#000;margin:
10px;background:
#ccc;
}#content_b{width:
200px;height:
80px;border:
1pxsolid
#000;margin:
10px;background:
#999;}