您的位置：首页 > Web前端 > CSS

CSS+DIV美化和布局-理解CSS定位与DIV布局

2008-12-22 11:03 597 查看

<div>标记与<span>标记
　　在使用CSS排版的页面中，<div>与<span>是两个常用的标记。
1、概述
　　<div>标记早在HTML 3.0时代就已经出现，但那里并不常用，直到CSS的出现，才逐渐发挥出它的优势。面<span>标记直到HTML 4.0时才被引入，它是专门针对样式表而设计的标记。
　　<div>(division)简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，及至章节、摘要和备注等各种HTML元素。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对<div>进行相应的控制，其中的各标记元素都会因此而改变。
　　如果把“<div>”替换成“<span>”，样式表中把“div”替换成“span”，执行后也会发现效果完全一样。
2、<div>与<span>的区别
　　<div>与<span>的区另在于，<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用<span>元素。
　　此外，<span>标记可以包含于是<div>标记之中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。
<html>
<head>
<title>div与span的区别</title>
</head>
<body>
　　<p>div标记不同行：</p>
　　<div><img src="building.jpg" border="0"></div>
　　<div><img src="building.jpg" border="0"></div>
　　<div><img src="building.jpg" border="0"></div>
　　<p>span标记同一行：</p>
　　<span><img src="building.jpg" border="0"></span>
　　<span><img src="building.jpg" border="0"></span>
　　<span><img src="building.jpg" border="0"></span>
</body>
</html>
　　经验之谈：通常情况下，对于页面中大的区块使用<div>标记，而<span>标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片和一个超链接等。
盒子模型
　　盒子模型是CS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。
1、盒子模型的概念
　　一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个部分组成。

盒子模型
　　一个盒子的实际宽度（或高度）是由content+padding+border+margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边各自的的border、padding和margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。
（技术背景：在浏览器中，width和height的值都指的是width+padding或者height+padding的值。）
2、border
　　border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。换句话说，border会占据空间，所以在计算精细的版面时，一定要把border的影响考虑进去。
　　border的属性主要有3个，分别是color（颜色）、width（粗细）和style（样式）。在设置border时常常需要将这3个属性进行很好的配合，才能达到良好的效果。
　　color指定border的颜色，它的设置方式与文字的color属性完全一样。
　　width即border的粗细程度，可以设为thin、medium、thick和<length>，其中<length>表示具体的数值，例如5px。width的默认值为“medium”，一般的浏览器都将其解析为2px宽。
　　这里需要重点讲解的是style属性，它可以设为none、hidden、dashed、solid、double、groove、ridge、inset和outset等，其中none和hidden都是不显示border，二者效果完全相同，只是运用在表格中时，hidden可以用来解决边框冲突的问题。
（经验之谈：对于IE浏览器不支持border-style效果，在实际***网页的时候，不推荐使用。）
　　另外值得注意的是，在特定情况下给元素设置background-color背景色时，IE作用的区域为content+padding，而Firefox则是content+padding+border。这点在border为粗虚线时特别明显。
3、padding
　　padding用于控制content与border之间的距离。
　　（技术背景：这里值得指出的是，在浏览器中如果使用width或是height属性指定了父块的宽或高，由于width和height的值中包含padding，那么内容元素content会受到padding的挤压，在网页设计中，也可以利用这一点实现许多效果，其实padding属性的概念就这么简单，但在CSS中排版与margin配合使用，就能使页面千变万化。）
　　当某些时候需要同时设置4个方向的padding值时，可以将4个语句合成到一起，用padding语句统一书写。
<style type="text/css">

</style>
　　不单是padding属性，margin属性也可以类似地合成为一句。
4、margin
　　margin指的是元素与元素之间的距离。
　　当两个行内元素紧邻的时候，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
　　但倘若不是行内元素，而是产生换行效果的块级元素，情况就会变得有一些不同。两个块级元素之间的距离不再是margin-bottom与margin-top的和，而是两者中的较大者。
　　当将margin设为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
元素的定位
1、float定位
2、position定位
3、z-index空间位置

转自：http://hi.baidu.com/kpseo/blog/item/e8486195ea6c4d4fd1135ecb.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航