开发技术和方法上的争论似乎就没有停止过,那些曾经争论不休的东西你还记得吗?

i++还是++i

学过C/C++的朋友一定对这个问题的争论有映像,是使用后增量、还是使用前增量呢?对于增量计算,我们需要从变量值和增量表达式的值来考虑。

后增量表达式的值是变量没有加1时的值,如下面的代码。

int i = 1;
i++;
int j = i;

后增量计算的三个阶段:

  • i初始为1。
  • i++表达式的值为1。
  • j的值为2。

前增量表达式的值是变量加1后的值,如下面的代码:

int i = 1;
++i;
int j = i;

前增量计算的三个阶段:

  • i初始为1。
  • ++i表达式的值为2。
  • j的值为2。

我们知道,增量计算大多数情况都是使用在循环相关的运算当中,如计算1到100的和,我们可以分别使用以下两段代码。

int sum = 0;
for(int i=1;i<=100;i++)
    sum +=i;

int sum = 0;
for(int i=1;i<=100;++i)
    sum +=i;

这两段代码的结果是一样的,变量sum的最终结果都是5050。

实际上,前增量与后增量的区别就在于增量表达式的值会不同,所以,当我们需要使用增量表达式的值,就需要小心区别前增量或是后增量;但是,如果我们只是使用变量的值,那么,前增量或后增量计算就没必要太矫情了,对吧!^^

<table>布局还是<div>+CSS布局

在网页开发中,下图中可能比较常用的几种布局:

enter image description here

再看网页布局的两种方式,我们以上图中间的页面布局为例;请注意,为了清晰显示区域,我们在代码中都添加了区域的边框,而在实际应用中,为了美观一般是不添加区域边框的。

<table>布局,也就是通过表格相关的标记来完成页面的布局工作;实际上,我们从上面的图中可以看到,使用这种布局也是有很客观的原因的,因为页面布局看上去就是表格。下面就是通过<table>布局的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr><td colspan="2" rowspan="1">header</td></tr>
<tr>
<td colspan="1" rowspan="1" width="300" height="300">left</td>
<td colspan="1" rowspan="1">content</td>
</tr>
<tr><td colspan="2" rowspan="1">footer</td></tr>
</table>
</body>
</html>

enter image description here

<div>+CSS布局,使用<div>定义区域(division),然后,通过CSS定义相关的布局。构建上图相似的布局,我们需要使用如下的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .header {display:block; clear:both; width:100%; border:1px solid gray;}
    .left {float:left; width:300px; height:300px; border:1px solid gray;}
    .content {float:left; height:300px; border:1px solid gray;}
    .footer {display:block; clear:both; width:100%; border:1px solid gray;}
    </style>
</head>
<body>
<div class="header">header</div>
<div class="left">left</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>
</html>

实际上,我还使用过第三种方法——混合式的,如下面的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .header {display:block; clear:both; width:100%; border:1px solid gray;}
    .footer {display:block; clear:both; width:100%; border:1px solid gray;}
    </style>
</head>
<body>
<div class="header">header</div>
<table width="100%" border="1" cellpadding="0" cellspacing="0"><tr>
<td class="left" width="300" height="300">left</td>
<td class="content">content</td>
</tr></table>
<div class="footer">footer</div>
</body>
</html>

我为什么使用这种混合式的方法布局呢?首先从两种基本方法说起吧。

<table>布局,这种方法在任何情况下都可以给出标准的布局,而不会出错,但代码看上去就有点不那么优雅了。

<div>+CSS布局,这需要两部分代码,即html中的<div> 和CSS样式定义,但是,我们知道,在大型项目中,页面和CSS是位于不同的文件,很可能由于种种原因造成CSS文件不能成功载入,此时,布局会变成什么样呢?下图就是去掉了CSS的<div>布局。

enter image description here

此时,我们可以看到,左栏(left)和主内容(content)变成了上下关系,这很明显不是我们想要的结果,而这是<div>元素的默认表现所造成的,因为<div>是一个块(block)元素,而不是一个内联(inline)元素。

说到这里,相信大家有点能理解混合方法进行页面布局的用意了,即代码不那么乱,又能保证布局有没有CSS时都有效。

小结

举了两个可能是争论无休止的话题,而目的只有一个,无论你支持哪一方,最重要的不是去做无谓地争吵,而是去了解技术细节,并能够更合理、更高效、更灵活地应用!掌握技术和方法,那才能真正成为自己的东西!

祝大家玩得开心!^^