ZheX Blog

DOCTYPE对CSS及JS的影响

ZheX — Mon, 25 Jan 2010 10:41:00 +0000

也许你已经发现选用或不用DOCTYPE对你的页面的影响是非常大的，甚至对于不同浏览器结果也不一样。下文以对一段javascript的影响说明：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>divTesttitle>
<script>
function changeHeight()
{
document.getElementById("content").style.height="360";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}

head>
<body>
<div id="content" style="height: 60px; border: 1px solid #FF0000;"><a href="javascript:changeHeight()">aaa>div>
body>

上文页面是通过按aa超链接表现javascript控制div的高度，读者可以自己试一下

1. IE浏览（我用的是IE 6），content的高度会变大，同时alert出height:360，offsetHeight:362

2. firefox，content的高度不会变，同时alert出height:60，offsetHeight:62

3. 去掉最上面的一句
在firefox下将得到content的高度会变大，同时alert出height:360，offsetHeight:362

我曾看到好多人运行到这里就会得到一个结论去他的DOCTYPE，用了它好多东西都不对了。我以为不是这样的，DOCTYPE定义了一个规范集，去检验你代码的正确性规范性，去掉了DOCTYPE也许只会在你当前机器上的浏览器正确运行，也就是说你的程序不能做到通用，难道这是你追求的吗？这时你会说那上面的问题怎么办呢，难道在firefox就不能那么做吗？回答是当然可以，仔细看一下上面的代码其实是有问题的，在标准中对象的高度、大小必须指定单位的如px,pt等，如果不指定那就要依赖于应用浏览器的默认或支持情况了，因此修改代码如下：

<script>
function changeHeight()
{
    document.getElementById("content").style.height="360px";
    alert(document.getElementById("content").style.height);
    alert(document.getElementById("content").offsetHeight);
}

运行一下看看是不是对了呢？定义DOCTYPE是个好习惯，也希望大家能写出标准规范的代码。

No related posts.

Div CSS absolute与relative的区别小结

ZheX — Thu, 21 Jan 2010 23:19:05 +0000

先看个例子

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Div + CSS Example, Wayhome's Blog</title> 
<style type="text/css"> 
 
</style></head> 
<body> 
<div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;"> 
　position: absolute;<br /> 
　top: 5px;<br /> 
　right: 20px;<br /> 
　<div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;"> 
position: absolute;<br /> 
left: 20px;<br /> 
bottom: 10px;<br /> 
</div> 
</div> 
<div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;"> 
　position: absolute;<br /> 
　top: 5px;<br /> 
　left: 5px;<br /> 
</div> 
<div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;"> 
　position: relative;<br /> 
　left: 150px;<br /> 
　<br /> 
　width: 300px; height: 50px; <br /> 
</div> 
<div style="text-align:center; background:#ccc;"> 
　　<div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;"> 
　 <p>1</p> 
　 <p>2</p> 
　 <p>3</p> 
　 <p>4</p> 
　 <p>5</p> 
　 <div style="padding:20px 0 0 20px; background:#FFFF00;"> 
　　　 padding: 20px 0 0 20px; 
　　<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div> 
　　<div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;"> 
　　　　position: <span style="color:blue;">relative</span>;<br /> 
　　 left: 200px;<br /> 
　　 <br /> 
　　 width: 300px;<br /> 
　　 height: 300px;<br /> 
　　 <div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;"> 
　　　 position: absolute;<br /> 
　　　 top: 20px;<br /> 
　　　 right: 20px;<br /></div> 
　　 <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;"> 
　　　 position: absolute;<br /> 
　　bottom: 20px;<br /> 
　　left: 20px;<br /> 
　　</div> 
　　</div> 
　 </div> 
　 
</div> 
</div> 
</body> 
</html>

absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：
　　
1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。
　　
2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
　　
(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。
　　
(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。
　　
relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。

什么是 web 3.0

有趣的项目管理图

ZheX — Sat, 09 Jan 2010 05:02:28 +0000

在Project Catoon 网站上看到了一套有趣的项目管理图片，这系列套图用风趣讽刺的手法解释了项目开发中的种种现象，看完以后相信大家就会明白为什么项目开发过程中总是会出现大大小小的偏差。

下面是此套图的1.5版本。

此外大家可以去这个网站建立自己对项目看法的排列组合。 2.0 beta也可以在这个网站上找到。

No related posts.

什么是DNS轮循?

ZheX — Wed, 06 Jan 2010 23:55:10 +0000

传统的DNS解析都是一个域名对应一个IP地址,但是通过DNS轮循技术(负载平衡技术)可以做到一个域名对应到多个IP 上. 这样大家难免就会问,这个技术有什么用呢?

DNS轮循是指将相同的域名解释到不同的IP，随机使用其中某台主机的技术,该项技术可以智能的调整网站的访问量到不同服务器上，减轻网站服务器的压力，实现负载匀衡;如果您感觉到单一的主机已经不堪负载你网站日益增长的访问，那么建议您采用我们的DNS轮循技术。

DNS轮循系统可以根据您的需求设置N台主机作为WEB服务器。目前已有越来多大型的WEB服务器使用DNS轮循来实现负载均衡，服务的分布规划更便捷，扩展性更好，从而提高了网站的稳定性和访问效率，那些大量数据文件请求的客户也得到了更快的响应。

DNS轮循还将给您的网站提供这样的改进，诸如您的网站的数据使用量一直处于不断的增长当中，当达到服务器资源运行瓶颈的情况下，由于采用了 DNS轮循技术，您只需要增加服务器数量就可以平滑升级，而且偶然故障或其他意外情况造成的损失得以避免，7×24小时可靠性的持续的运行成为可能。

如果您真的希望自己的网站能够一直稳定的在线运行，尽量的减少宕机的比率，那么除了采用比较好的网站空间技术支持之外，还可以采用时代互联域名的DNS轮循功能来实现网站的永久在线。

No related posts.

Crazy Sand

ZheX — Thu, 31 Dec 2009 07:54:42 +0000

什么叫nb？看完就知道了

No related posts.

巴西广告节创意

ZheX — Thu, 17 Dec 2009 08:57:16 +0000

看下这次巴西广告节的创意。广告语标语为：Many try, a few get it（很多人尝试，很少人成功）。广告中那么多颗脑袋争先恐后地去“钓”点子，可惜最后赢家一般只有一个，所以大多数脑袋只有看着别人谈情说爱的份儿。

第二副图异曲同工

No related posts.

解决PHP内存溢出

ZheX — Thu, 17 Dec 2009 01:55:11 +0000

有时候我们在运行php程序的时候会发现 Fatal Error: Out of memory 这样的提示。这有可能是程序中用到了大量了变量和对象，导致分配的内存不够用。

我们可以在php.ini文件中把memory_limit参数默认的128M修改为256M或者更大：

memory_limit = 128M

如果是虚拟主机，我们可以在程序需要用到大内存的地方添加：

init_set("memory_limit", "128M");

这些可以在硬件环境方面解决我们的问题，不过最好的方法还是严格控制程序中内存的损耗。及时unset一些大而不用的变量或对象。

No related posts.

MySQL分区的优点

ZheX — Tue, 15 Dec 2009 22:13:23 +0000

数据库分区是一种物理数据库设计技术，DBA和数据库建模人员对其相当熟悉。虽然分区技术可以实现很多效果，但其主要目的是为了在特定的SQL操作中减少数据读写的总量以缩减响应时间。

分区主要有两种形式：//这里一定要注意行和列的概念（row是行，column是列）

1. 水平分区（Horizontal Partitioning）这种形式分区是对表的行进行分区，通过这样的方式不同分组里面的物理列分割的数据集得以组合，从而进行个体分割（单分区）或集体分割（1个或多个分区）。所有在表中定义的列在每个数据集中都能找到，所以表的特性依然得以保持。

举个简单例子：一个包含十年发票记录的表可以被分区为十个不同的分区，每个分区包含的是其中一年的记录。（朋奕注：这里具体使用的分区方式我们后面再说，可以先说一点，一定要通过某个属性列来分割，譬如这里使用的列就是年份）

2. 垂直分区（Vertical Partitioning）这种分区方式一般来说是通过对表的垂直划分来减少目标表的宽度，使某些特定的列被划分到特定的分区，每个分区都包含了其中的列所对应的行。

举个简单例子：一个包含了大text和BLOB列的表，这些text和BLOB列又不经常被访问，这时候就要把这些不经常使用的text和BLOB了划分到另一个分区，在保证它们数据相关性的同时还能提高访问速度。

在数据库供应商开始在他们的数据库引擎中建立分区（主要是水平分区）时，DBA和建模者必须设计好表的物理分区结构，不要保存冗余的数据（不同表中同时都包含父表中的数据）或相互联结成一个逻辑父对象（通常是视图）。这种做法会使水平分区的大部分功能失效，有时候也会对垂直分区产生影响

分区的一些优点包括：

与单个磁盘或文件系统分区相比，可以存储更多的数据。

对于那些已经失去保存意义的数据，通常可以通过删除与那些数据有关的分区，很容易地删除那些数据。相反地，在某些情况下，添加新数据的过程又可以通过为那些新数据专门增加一个新的分区，来很方便地实现。

通常和分区有关的其他优点包括下面列出的这些。MySQL 分区中的这些功能目前还没有实现，但是在我们的优先级列表中，具有高的优先级；我们希望在5.1的生产版本中，能包括这些功能。

一些查询可以得到极大的优化，这主要是借助于满足一个给定WHERE 语句的数据可以只保存在一个或多个分区内，这样在查找时就不用查找其他剩余的分区。因为分区可以在创建了分区表后进行修改，所以在第一次配置分区方案时还不曾这么做时，可以重新组织数据，来提高那些常用查询的效率。

涉及到例如SUM() 和 COUNT()这样聚合函数的查询，可以很容易地进行并行处理。这种查询的一个简单例子如 “SELECT salesperson_id, COUNT(orders) as order_total FROM sales GROUP BY salesperson_id；”。通过“并行”，这意味着该查询可以在每个分区上同时进行，最终结果只需通过总计所有分区得到的结果。

通过跨多个磁盘来分散数据查询，来获得更大的查询吞吐量。

No related posts.

利用 Yii Component 的特性为 Model 添加额外属性

ZheX — Sat, 12 Dec 2009 23:51:53 +0000

Yii的使用者都知道Yii是一个基于Component开发的框架，我们平时用到的Controller，Model等其实都是Component，因此我们也可以利用Component的特性来为我们的model添加一些功能。

平时我们建立的user表总是会涉及到first_name， last_name, 而在系统中我们要用到的却经常是完整人名。

//action
$user = User::model()->findByPk($id);
$this->render('show', array('user' => $user));

//view
 echo $user->first_name . ' '  . $user->last_name ?>

这是我们经常会采用的方法，其实我们可以为user model 添加一个fullname属性来显示用户全名, 然后在view中直接调用这个属性就可以了


//user model
class User extends CActiveRecord
{
    //.......
 
    public function getFullname()
    {
        if ($this->first_name && $this->last_name) {
            return $this->first_name . ' ' . $this->last_name;
        }
        return 'Unknown';
    }
}
?>

//view
 echo $user->fullname ?>

这样代码是不是清晰了很多，我们还可以在属性那个设定函数中实现不同的现实方法。

奋斗和蜗居

ZheX — Fri, 11 Dec 2009 03:00:20 +0000

奋斗的编剧叫石康，纯爷们，确切年龄51岁；
蜗居的编剧叫六六，纯娘们，大概年龄36岁。

奋斗是一个老男人写的浪漫主义的奇幻故事；
蜗居是一个小女人写的现实主义的恐怖小说。

看了奋斗，觉得故事好假；
看了蜗居，觉得人生好假。

奋斗也许会给人带来希望；
蜗居一定会给人带来绝望。

奋斗说的是北京那旮旯的事儿；
蜗居说的是上海一面德额事体。

奋斗讲的是年轻人如何盖房子；
蜗居讲的是年轻人如何买房子。

奋斗讲了几对年轻无知的男女的混乱爱情故事，主讲‘情’；
蜗居讲了一帮青春渐逝的男女的疯狂同居故事，主讲‘性’。

奋斗努力把青涩理想的青年慢慢塑造成成熟稳重的男人；
蜗居试图把抛妻弃子的男人快速改造成重情重义的男子。

奋斗让女人不相信男人；
蜗居让男人不相信女人。

喜欢奋斗的观众有些真的去奋斗了；
喜欢蜗居的观众有些真的当二奶了。

奋斗是冷酷现实的迷幻剂；
蜗居是残酷现实的催化剂。

奋斗满足了80后最后逝去的一丝幻想情节；
蜗居刺痛了80后正在面临的一个严酷现实。

No related posts.