<![CDATA[学而时习之 - DIV/CSS]]> http://www.chxwei.com/ zh-cn PBlog2 v2.4 学而时习之 http://www.chxwei.com/images/logos.gif http://www.chxwei.com/ 学而时习之 http://www.chxwei.com/article.asp?id=690 <![CDATA[3个CSS技巧]]> admin@yahoo.cn(chxwei) Wed,19 May 2010 09:35:19 +0800 http://www.chxwei.com/default.asp?id=690 　　h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
　　h2 {
　　font-size:18px;
　　border:1px solid blue;
　　color:#000;
　　background-color:#FFF;
　　}
　　第二种看起来的确格式化，但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
　　以前我也是写成类似第二种方式，但是逐渐发现就像文章说的一样，没多大用。一行看起来又爽快又省地方还能让文件更小。

二、分块书写代码

　　这样书写代码可以让CSS更页面化，在出现问题时候可以最短时间内找到问题所在。就像下面这样：

　　#content {float:left;}
　　#content p { … }
　　#sidebar {float:left;}
　　#sidebar p { … }
　　#footer {clear:both;}
　　#sidebar p { … }
三、浏览器兼容问题

　　只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话，只需要很少的Hack就能实现同样的效果。
　　注意了一下网易新版主页的CSS，其中竟然一个!important或者Hack都没有，可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然，调试的时间会多一些。
　　包含浮动元素所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
　　理解Overflow如果页面中有两个浮动元素，在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了，不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。

转自52CSS]]> http://www.chxwei.com/article.asp?id=682 <![CDATA[DIV/CSS初学者需要引起重视的10个问题与技巧]]> admin@yahoo.cn(chxwei) Tue,30 Mar 2010 13:55:36 +0800 http://www.chxwei.com/default.asp?id=682 　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

　　二、检查CSS是否正确
　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

　　三、确定错误发生的位置
　　假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

　　四、利用border属性确定出错元素的布局特性
　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

　　五、float元素的父元素不能指定clear属性
　　MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。这是MacIE的闻名的bug，倘若不知道就会走弯路。

　　六、float元素务必指定width属性
　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

　　七、float元素不能指定margin和padding等属性
　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定非凡的值。

　　八、float元素的宽度之和要小于100%
　　假如float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

　　九、是否重设了默认的样式？
　　某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

　　十、是否忘记了写DTD？
　　假如无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写DTD。

转自http://www.52css.com/article.asp?id=1163]]> http://www.chxwei.com/article.asp?id=672 <![CDATA[[整理]CSS小技巧]]> admin@yahoo.cn(chxwei) Tue,05 Jan 2010 14:50:09 +0800 http://www.chxwei.com/default.asp?id=672 　　2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。
　　3、一个兼容性调整(IE和Mozilla)的笨办法：初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
　　临时解决方法：选择符{属性名:B !important;属性名:A}
　　4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
　　5、li标签前面的图标推荐使用background-image，而不是list-style-image。
　　6、IE分不清继承关系和父子关系的差别，全部都是继承关系。
　　7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
　　8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
　　9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
　　10、与内容无关的图片请使用background
　　11、定义颜色可以缩写#8899FF=#89F
　　12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
　　13、<script>没有language这个属性，应该写成这样:
　　以下是引用片段：
　　<script type=”text/javascript”>
　　14、标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以 以下是引用片段：
<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
　　15、完美的单象素外框线表格（在IE5、IE6、IE7及FF1.0.4以上中均可通过测试） 以下是引用片段：
table{border-collapse:collapse;}
td{border:#000 solid 1px;}
　　16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。
　　17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
　　18、如果文字过长,则将过长的部分变成省略号显示：IE5,FF无效，但可以隐藏，IE6有效
　　<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
　　<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
　　19、在IE中可能由于注释带来的文字重复问题时可以把注释改为：
<!–[if !IE]>Put your commentary in here…<![endif]–>
　　20、如何用CSS调用外部字体
语法：
@font-face{font-family:name;src:url(url);sRules}取值：
name：字体名称。任何可能的 font-family 属性的值
url(url)：使用绝对或相对 url 地址指定OpenType字体文件
sRules：样式表定义
　　21、如何让一个表单中的文本框中的文字垂直居中？
　　如果用行高与高度的组在FF中是没有效果的，办法就是定义上下补白就可以实现想想的效果了。
　　22、定义A标签要注意的小问题：
　　当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。
只定义了一个a:link时，一定要记得把其它三种状态定义出来！
　　23、并不是所有样式都要简写：
当样式表前定义了如p{padding:1px 2px 3px 4px}时，
在后续工程中又增加了一个样式上补白5px，下补白6px。
我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。
可以写成p.style1{padding-top:5px;padding-right:6px;},
你可能会感觉这样写还不如原来那样好，但你想没想过，
你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！
如果以后前一个样式P变了话，你定义的p.style1的样式也要变。
　　24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。
　　25、几个常用到的CSS样式：
　　1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;
　　2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
　　3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
　　4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
　　5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
　　6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
　　针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
　　7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); } ]]> http://www.chxwei.com/article.asp?id=671 <![CDATA[15个CSS常识]]> admin@yahoo.cn(chxwei) Tue,05 Jan 2010 14:47:00 +0800 http://www.chxwei.com/default.asp?id=671
　　1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
　　2、无边框。推荐的写法是 border:none;，border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
　　3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
　　4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
　　5、样式放头上，脚本放脚下。不内嵌，只外链。
　　6、坚决不用 CSS 表达式。
　　7、使用 引用样式表，而不是通过 @import 导入。
　　8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
　　9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
　　10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
　　11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
　　12、段落之间，至少要有一倍行距。
　　13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
　　14、中文标点用全角。英文夹杂在中文中，左右空格，半角。
　　15、中文字体的粗体和斜体，远离较好，利民利己。
]]> http://www.chxwei.com/article.asp?id=646 <![CDATA[XHTML CSS 常见问题和解决方案[转]]]> admin@yahoo.cn(chxwei) Tue,13 Oct 2009 11:04:59 +0800 http://www.chxwei.com/default.asp?id=646 开发过程中遇到的问题及解决办法，觉得不错就转了过来。


1、如何定义高度很小的容器？

在IE6下无法定义小高度的容器，是因为有一个默认的行高。
列举2种解决方案：overflow:hidden | line-height:0

注：如果高度低于默认的字体高度，则必须在定义字体的大小，比如定义一个高度为0的div，则必须：font-size:0px;

2、图片下方出现几像素的空白间隙？

这个也有多种解决方案，如将img定义为display:block,或定义父容器为font-size:0，个人更推荐使用vertical-align的方式，它的值可以是text-top | text-bottom | middle等

3、IE6双倍margin的BUG?

display:inline

注：在使用float的时候出现，详见：IE6在使用float后margin加倍问题的解决

4、文本垂直方向对齐文本输入框？

设置input为vertical-align:middle，textarea也是如此

5、为什么在web标准下ie无法设置滚动条的颜色？

将设置滚动条颜色的样式定义到html标签选择符上即可

6、如何让层在falsh上显示？

不可以，除了少数几个级别很高的家伙除外。
但可以将flash设置为透明，这时层就会透过falsh显示，近似于覆盖在flash之上了，如：
<param name="mode" value="transparent" />

注：详见：Flash设置网页最底层，兼容IE6-IE8、FF、Chrome、Opera

7、如何使得文字不换行？

定义包含文字的容器为：width:xxx;white-space:nowrap;

注：使用方法参见CSS 换行 之一 white-space

8、ie中如何让超出宽度的文字显示为省略号？

定义容器为：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9、如何在点文字时也选中checkbox?

<input id="test" type="checkbox" value="on" /><label for="test">测试</label>

10、一个div为margin-bottom:10px，一个div为margin-top:5px，为什么2个div之间的间距是10px而不是15px?

这种情况浏览器会自动进行margin重叠，只显示较大的margin值
解决方案：只设置其中一个div的margin为15px

11、如何解决ie下当li中出现2个或以上的浮动时，li之间产生的空白间隙？

设置li的vertical-align，值可以为top | text-top | middle | bottom | text-bottom


12、如何使得英文单词不发生词内断行？

word-wrap:break-word;

13、为什么被访问过的链接颜色没有变化？

定义链接的样式时，需要按照:link,:visited,:hover,:active这样的顺序，可以使用LoVe HAte（喜欢讨厌）来记忆

14、单行文本如何垂直居中？

height:xxx;line-height:xxx; 高和行高相同即可

15、已知高度的容器如何在页面中水平垂直居中？

参阅：http://blog.doyoe.com/article.asp?id=74

16、未知尺寸的图片图如何水平垂直居中？

参阅：http://blog.doyoe.com/article.asp?id=159

17、标准模式和怪异模式下的盒模型区别？

标准模式下：实际宽度 = width + padding + border
怪异模式下：实际宽度 = width - padding - border

18、如何解决IE下的3像素BUG?

参阅：http://blog.doyoe.com/article.asp?id=68

19、如何做1像素细边框的table?

方法1：设置table的border-collapse:collapse;
<style type="text/css">
table{border-collapse:collapse;border-color:#000;}
td{border-color:#000;}
</style>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>测试</td>
<td>测试</td>
</tr>
</table>

方法2：关键在于设置cellspacine="1"，用间隙来作为边框
<style type="text/css">
table{background:#000;}
tr{background:#fff;}
</style>
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<td>测试</td>
<td>测试</td>
</tr>
</table>

20、以图换字的几种方法及优劣分析

以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：

方法1：使用text-indent的负值，将内容移出容器；
方法2：使用display:none，将内容隐藏；
方法3：使用padding将文字挤出容器之外，并将超出的部分hidden;
方法4：使用font设置超小字体，达到隐藏内容的目的。

方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。
方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。
方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。
方法4（强烈推荐）只需要将字体和行高设置为0，然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。

21、如何容器透明，内容不透明？

假设在标准模式下有如下结构：
<div class="outer">
  <p class="inner">我不要透明</p>
</div>

IE only的方法：在父容器outer被设置为透明后，只需要将子容器inner设置为position:relative; 如果需要兼容其它浏览器，则以上的方法不适用，且结构也需改为：

<div class="outer"></div>
<div class="inner">我不要透明</div>

然后使用position + z-index搞定位置

22、如何去掉链接的虚线框？

IE下：<a href="#" onfocus="this.blur();"...>
FF下:a{outline:none;}

23、如何使得页面字体行距始终保持n倍字体大小为基调？

在body内设置line-height:n即可，注，不可以为它加上单位
原因可参阅：http://blog.doyoe.com/article.asp?id=195

24、如何使用标准的方法插入flash?

<div class="fla-show">
  <object type="application/x-shockwave-flash" data="*.swf" width="*" height="*">
    <param name="movie" value="*.swf" />
    <img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示" />
  </object>
</div>

25、Standard Model如何让容器可以height:100%？

设置html,body{height:100%;margin:0;}

26、如何使得表格的宽度固定?

设置table为table-layout:fixed;这时表格将使用固定布局算法，多出的内容将不影响表格的宽度

27、如何让min-height兼容ie6?

.min-height{min-height:100px;_height:100px;}
<div class="min-height">我是兼容的min-height</div>

28、如何让鼠标变成手型且兼容所有现代浏览器？

cursor:pointer

29、如何实现ie6下的position:fixed?

参阅：http://blog.doyoe.com/article.asp?id=188

30、IE下如何对Standard Mode与Quirks Mode进行切换？

IE6以下的浏览器不用触发，直接以Quirks Mode呈现页面。

IE6和IE7都可以触发的（在XHTML 的DTD申明前加上HTML注释）：
<!--Let ie6 and ie7 into quirks mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE6的触发（在XHTML 的DTD申明前加上XML申明）：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。

31、如何给一个元素定义多个不同的css规则？

<style type="text/css">
.a{color:#f00;}
.b{background:#eee;}
</style>

<div class="a b">测试</div>

如上例，该元素同时拥有a和b定义的样式规则。
多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

32、如何区别display:none与visibility:hidden?

相同的是display:none与visibility:hidden都可以用来隐藏某个元素；
不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

33、如何解决按钮在IE7及以下浏览器中随着value增多两边留白也随着增加的问题？

通常情况下，如果value的长度是固定不变的，可以给按钮设定一个固定的width，这是没有问题的，但在大多数情况下，按钮的value大多是可变的，所以给按钮设定width是不够理想的。
解决方法，给按钮加上：#overflow:visible;padding:0 10px;其中overflow用于清除ie两边的留白，padding用于使得各浏览器的留白一致。

]]> http://www.chxwei.com/article.asp?id=637 <![CDATA[DIV、CSS简单UL导航]]> admin@yahoo.cn(chxwei) Mon,03 Aug 2009 12:43:06 +0800 http://www.chxwei.com/default.asp?id=637 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=utf-8" />
<title>www.chxwei.com</title>
<style type="text/css">
* {font-size:12px;text-align:center;}
body {background:#f0f0f0;}
#nav {width:700px;margin:20px auto 0 auto;background:#f60;padding:8px 12px;}
#nav li {display: inline;list-style-type: none;}
#nav li a:link,#nav li a:visited{float:left;margin-right:8px;padding:2px 5px;text-decoration: none;color:#fff;border:1px solid #f60;}
#nav li a:hover {color:#ff0;border:1px solid #fff;}
#nav li a#current {color:#c00;border:1px solid #fff;background:#fff;}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="http://www.chxwei.com/" id="current">学而时习之</a></li>
    <li><a href="http://www.chxwei.com/">程序代码</a></li>
    <li><a href="http://www.chxwei.com/">数据库</a></li>
    <li><a href="http://www.chxwei.com/">CSS代码</a></li>
    <li><a href="http://www.chxwei.com/">网站优化</a></li>
</ul>
</body>
</html>
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.chxwei.com/article.asp?id=632 <![CDATA[IE6在使用float后margin加倍问题的解决]]> admin@yahoo.cn(chxwei) Sat,27 Jun 2009 17:13:16 +0800 http://www.chxwei.com/default.asp?id=632 这是IE6的一个经典的小问题，解决方法：再加上 “display:inline;” 即可：


<div style="background:#CCC; width:500px; height:300px;">
    <div style="display:inline; float:left; margin:20px; background-color:#fff; width:100px; height:200px;line-height:200px;">学而时习之</div>
    <ul>
        <li style="float:left;display:inline;width:400px;height:30px;border-bottom:1px solid #CCC;"><li>
    </ul>
</div>

]]> http://www.chxwei.com/article.asp?id=628 <![CDATA[CSS 换行 之一 white-space]]> admin@yahoo.cn(chxwei) Wed,10 Jun 2009 12:37:54 +0800 http://www.chxwei.com/default.asp?id=628
white-space : normal | pre | nowrap

参数：

normal : 　默认处理方式
pre : 　用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

说明：

设置或检索对象内空格的处理方式。
对应的脚本特性为whiteSpace。请参阅我编写的其他书目。

示例：

p { white-space: nowrap; }
]]> http://www.chxwei.com/article.asp?id=621 <![CDATA[样式中文字大小px、pt、em的区别]]> admin@yahoo.cn(chxwei) Fri,22 May 2009 10:08:21 +0800 http://www.chxwei.com/default.asp?id=621
基本概念:
px就是表示pixel，像素，是屏幕上显示数据的最基本的点，最小单位；

pt就是point，是印刷行业常用单位，等于1/72英寸。

em，其实就是％，从这个概念上看，em才是真正的“相对单位”。

px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。

pt全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。

px会随显示器的分辨率而改变，pt会随Windows系统字体大小设置而改变。

设置Windows系统字体大小：桌面上右键 > 属性 > 设置 > 高级 > 常规 > DPI 设置，默认的是“正常尺寸96DPI”，你可以自定义修改。

px和pt的使用区别，只有当用户改变默认的96DPI下才会产生：使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。

转换计算公式：px = pt * DPI / 72

在网页设计中，面向用户的屏幕的基本单位是px，因此使用px作为单位是最简单也最容易理解的，而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示，算是绕了个圈子。参考大部分大型网站，包括Adobe和Microsoft，都是使用px作为单位，而且在HTML中，默认的单位就是px。

但在Word或Photoshop中，使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。又或者在Photoshop中，设置一个图片中的某个艺术效果的字体是72pt大小，然后分别将这张图片设为300DPI和72DPI，再打印出来，就可以看出，这2个字体大小完全一样，只是“清晰度”不同，300DPI更清晰。这是毫无疑问的结果。
]]> http://www.chxwei.com/article.asp?id=593 <![CDATA[CSS挂马方式]]> admin@yahoo.cn(chxwei) Sat,21 Feb 2009 13:47:47 +0800 http://www.chxwei.com/default.asp?id=593 最新流行的数据库挂马”还正在猖狂，现在又出现CSS样式挂马。

随着所谓的Web2.0的网站增多，很多SNS和博客等网站都提供自定义样式，而熟悉CSS样式的黑客不免打起了在CSS中挂马的注意。

挂马实现：
使用background背景图片路径设置的漏洞，把路径设置成JavaScript的代码，照样可移执行。
例如：
body{background:url('javascript:document.write("www.chxwei.com")');}
这种比较厉害了，里面可以写任何内容。
下面是使用弹出窗口，如果把参数设置成：高度0、宽度0等等，就可能很难被发现了。
body{background:url('javascript:open("http://www.chxwei.com/")');}


经本人测试：
傲游2.15、IE6可以执行这类挂马，IE8、火狐、Opera不执行。


这种挂马方式的解决办法众说不一，如果像第一种只接输出内容，则可以在网页中只接看到；如果是输出Iframe挂马则可以在样式中把Src设置为空，第二种弹窗就不好整了。

对于网站有自定义样式功能的，可以在保存代码过程中检查代码中是否有可疑代码，然后加以提示或者只接删除。

另外就是要经常检查网站、代码、IIS日志等，做为站长真够累的。

]]>