(3)设置外边距、宽度、高度和背景颜色:<div style=“margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;“>
(4)设置定位方式:position:relative(定位方式:相对定位)
<div style=“position:relative; top:10px;left:10px; width:140px; height:140px;background–color:White;“>
2、<p>是段落标签
段落标签语法:<p>内容</p>
<p>是一个有特定语义的标签,表示段落,是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进,因为行首缩进只是表示段落的方式,并不是一定的或必需的方式。所以在用<P>标签的时候,如果需要可以针对P设定一下行首缩进。
段落标签常用的属性是对齐方式。即:<p align=”center”>、<p align=”right”>或者<p align=”Left”>
在使用段落标签的地方,浏览器会自动地给下面的文章空出两行的空格。因此,我们在编撰文字或者图片的时候,如果想让两部分内容之间空出两行空格,就用<p>标签;如果想让两部分内容之间空出一行空格,就用<div>标签。
3、<span>标签
<span> 标签被用来组合文档中的行内元素。
span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
<span>在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果。<span>本身没有任何属性。 <span>在CSS定义中属于一个行内元素,而<div>是块级元素。所谓“块元素”,是以另起一行开始渲染的元素,“行内元素”(又叫做“内嵌元素”),在它后边的内容不会换行。我们可以通俗地理解为<div>为大容器,<span>就是小容器。
4、定位标签与代码
在制作网页时,我们常常需要给网页中的元素进行定位。定位有水平对齐、垂直对齐、居中标签、绝对定位、相对定位等几种方式。
(1)水平对齐方式:align=left(左对齐) align=center(居中对齐)align=right(右对齐)
水平对齐方式常常作为其它标签(例如:表格、段落、块区等标签)的属性使用。
(2)垂直对齐方式:valign=top(顶部对齐)valign=bottom(底部对齐)middle(中部对齐)
垂直对齐方式也常常作为其它标签(例如:表格、段落、块区等标签)的属性使用,垂直对齐方式还常常和水平对齐方式配合使用。
(3)居中标签:居中标签一般是单独使用的,居中标签有尾标签。标签语法:<center>内容</center>
(4)绝对定位语法:POSITION: absolute(定位:绝对定位)。
绝对定位是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
绝对定位举例:style=”LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px”
(5)相对定位语法:POSITION: relative(定位:相对定位)。
相对定位是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
相对定位举例:style=”LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px”