<div>标签定位样式设置技巧-html定位标签

本文向大家描述一下<div>标签定位样式设置技巧，在默认的情形下，<div>标签所定义的区块在网页上会占据一列的位置，并且向右边靠齐，要改变这种默认的行为，只需定义float样式属性即可。

<div>标签定位样式设置技巧

<div>标签被广泛地应用在网页布局的相关设置上，CSS的几个重要属性提供了这方面的支持，例如float、overflow或是text-align等。适当的设计与套用样式属性，可以让我们有效率地完成网页布局的工作。

在默认的情形下，<div>标签所定义的区块在网页上会占据一列的位置，并且向右边靠齐，要改变这种默认的行为，只需定义float样式属性即可。它主要的功能是定义对象在网页上的浮动位置，可能的属性值有两个：left与right，指定<div>靠左或靠右对齐。指定了这个属性的<div>标签后，会自动配置在同一行并且往左边或是右边靠拢，以下面的标签设置为例：

<divstyledivstyle="height:127px;background:black"> 
 
</div><divstyledivstyle="width:155px;height:336px;float:left;background:gray"> 
 
</div><divstyledivstyle="width:155px;height:336px;float:right;background:gray"> 
 
</div>

第1个标签未指定float，因此它占据了网页最上方单一列的空间，第2及第3个<div>标签则紧接着在下面的位置，靠左及靠右配置，结果页面如下：

除了指定float属性，我们还可以通过嵌套式<div>标签的配置来达到<table>标签的效果。以一个3行×3列的表格为例，所需的<div>标签如下：

<divstyledivstyle="width:auto;height:79px"> 
<divstyledivstyle="width:100px;height:100px;  
float:left;background:red"> 
</div><divstyledivstyle="width:100px;height:100px;  
float:left;background:blue"> 
</div></div><divstyledivstyle="width:auto;height:79px"> 
<divstyledivstyle="width:100px;height:100px;float:left;  
background:yellow"> 
</div><divstyledivstyle="width:100px;height:100px;float:left;  
background:green"> 
</div></div><divstyledivstyle="width:auto;  
height:79px"> 
<divstyledivstyle="width:100px;height:100px;  
float:left;background:black"> 
</div><divstyledivstyle="width:100px;  
height:100px;float:left;background:gray"> 
</div> 
</div>

这段标签得到以下的页面结果：

float属性决定<div>区块在网页上的位置，如果要定义<div>区块内容元素的位置，则必须使用另外一个名称为text-align的属性。其中比较重要的属性值有left、right和center，使用这些属性值，可以让<div>内容达到靠左、靠右或居中的效果。以下面的标签设计为例，3个<div>标签设置了不同的text-align属性值。

<divstyledivstyle="width:auto;height:100px;text-align:left"> 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> 
 
<divstyledivstyle="width:auto;height:100px;text-align:right"> 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> 
 
<divstyledivstyle="width:auto;height:100px;text-align:center"> 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

巧用<div>标签搭配CSS样式，可以让我们达到所要呈现的网页布局效果。当你了解这些技巧之后，接下来就是根据自已的需求设计网页版面。结束这一节的讨论之前，还有一点要提醒读者，CSS除了能有效地将样式的设计从网页内容中分割出来、让HTML标签专注在内容的表示之外，最重要的一点是，它还能提升网页加载的速度。当用户浏览网页的时候，相关的CSS样式文件只会加载一次，然后储存在缓存中，当下一个请求被传送到服务器的时候，所需的CSS样式文件则是直接从高速缓存中取出的。而未使用样式文件的网页则必须将整个网页重载，你可以想象这两者的性能差异，这也是不建议使用<table>标签设计布局的原因之一。

【编辑推荐】