博文
为什么对容器设置float又要设置display:inline(2009-01-20 21:12:00)
摘要：看了很多网站，经常看到<li></li>标签内设置了float:left又设置display:inline。
既然设置了float:left，那标签内的元素都会向左浮动了。
为什么又要设置display:inline。既然设置了float:left，那该标签已具有块状元素的特征了，又设置内联元素，不是有矛盾吗？
例如：
http://www.52css.com/article.asp?id=845
里一个css的定义
Example Source Code [www.52css.com]
ul li {
float:left;
margin:0 12px 12px 0;
display:inline;
}
display:inline的意思是基线显示
可以消除IE6和IE7下的浮动BUG
display:inline 可以消除IE6双倍边距的BUG。
可以参考：IE中怎么会出现双倍边距？
http://www.52css.com/article.asp?id=144
相关推荐:http://www.114study.com/?ybtg=wuhuaitang......
css expression属性将javascript与css结合起来(2009-01-20 21:10:00)
摘要：关于css expression，在IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样
给元素固有属性赋值
例如，你可以依照浏览器的大小来安置一个元素的位
置。
Example Source Code [www.52css.com]
#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + “px”);
top: expression(document.body.offsetHeight - 110 + “px”);
background: red;
}
给元素自定义属性赋值
例如，消除页面上的链接虚线框。 通常的做法是：
Example Source Code [www.52css.com]
<a href=”link1.htm” onfocus=”this.blur()”>link1</a>
<a href=”link2.htm” onfocus=”this.blur()”>link2</a>
<a href=”link3.htm” onfocus=”this.blur()”>link3</a>
粗看或许还体现不出采用expressio......
杂谈24则CSS网页布局开发小技巧(2009-01-20 14:03:00)
摘要：在CSS网页布局开发中，会有很多小技巧，但新手朋友往往对此很不熟悉。在某一两个小问题上，或许纠缠很长时间才能搞明白，虽然在的文档中，多次提及过这方面的内容，但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧，认真读一读，或许您并不能完全理解，您可以在进行搜索，扩展您所想要得到的知识，相信您会有很多收获！
一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
二、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为id的权重要比class大。
三、一个兼容性调整（IE和Mozilla）的笨办法：初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：选择符{属性名：B ！important；属性名：A} 或许有时候并没有效果。你可以在搜索更多的BUG解决方法。
四、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
五、li标签前面的图标推荐使用background-image，而不是list-style-image.
六、IE分不清继承关系和父子关系的差别，全部都是继承关系。
七、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您，不要太疯狂了。
八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了，也可以保持文字的可读性。
九、定义链接的四种状态要注意先后顺序： Link Visited Hover Active
十、与内容无关的图片请使用background.时刻记住表现与内容分离。
十一、定义颜色可以缩写#8899FF=#89F
十二、table在某些方面还是有用武之地的，在遇到内容为......
CSS实战经验：浮动元素旁边的元素(2009-01-19 09:49:00)
摘要：当一个块级元素紧跟在一个左浮动元素之后时，它应该——作为一个块级元素——忽略这个浮动元素，而它的内容则应该因这个浮动元素而移位：一个紧跟在左浮动元素后的块级元素内的文字内容，应该沿着浮动元素的右边顺序排列并会（如果它的长度超过浮动元素）继续排列到浮动元素下方。但是如果这个块级元素有layout，比如由于某种原因被设置了宽度，那么这整个元素则会因浮动元素而移位，就好像它自己也是一个浮动元素一样，因此其中的文字就不再环绕这个左浮动元素了（而会形成一个矩形区域，保持在它的右边。）
在 IE5 中一个块级元素的百分比宽度是基于浮动元素旁边的剩余空间计算的，而在 IE6 中则是依照整个父块级元素的可用空间计算的。所以在 IE6 中设置 width: 100% 会导致某种浮动元素旁边的溢出现象，于是各种布局问题也会因此而来。
一些关于浮动块旁边的 hasLayout 块的测试案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实战经验：浮动元素旁边的元素 - www.52CSS.com </title>
<style type="text/css">
<!--
.testgrid {padding:10px;}
.float {width:100px; height:100px; border:2px solid #000;float:left; background:url(bg.gif) repeat 10px 10px}
.testgrid p {back......
Div CSS网页布局中全局字体控制的最佳实践(2009-01-19 09:46:00)
摘要：Div CSS网页布局中对字体的控制是非常重要的，对于需要精确效果的页面而言。这类设置会非常有用。对于一般用户与开发者而论，使用浏览器默认字体即可，52CSS.com鲜有这方面的知识的介绍。此文分享了作者很独特的CSS实践经验。从此文可以看出。对页面字体的控制与设置的思考，将CSS的工作进行的更加深入了。
body {font-family: Arial, sans-serif; }
这是我迄今发现的最好的全局字体解决方案。当然，所谓“最好”，也只是基于我个人的评判标准。所以我还是得分析一下其他的写法有什么缺点，最后再总结这个写法的特点。
Example Source Code [www.52css.com]
body {font-family: "宋体", sans-serif; }
这个写法可能的缺点在于：
1. 宋体在Safari和Vista的IE 7下，看起来很难看。（我稍后把截图补上）
2. 宋体的英文字很难看。
3. 如果在CSS里写中文，你得小心你HTML和CSS的编码是否一致。
Example Source Code [www.52css.com]
body {font-family: SimSun,sans-serif; }
这样写，可以避免上面的第三个问题。但是宋体本身确实很难看。我们希望在不同平台下，都用各自默认的字体。XP是宋体，Vista是微软雅黑，Mac是黑体。这样的话，只能将字体的第一个设置为英文字体，这样遇到中文的时候，浏览器会自动调用默认字体（Vista IE 7的一些版本里貌似默认还是宋体，这个我就无能为力了，交给用户设置的自主权吧）
Example Source Code [www.52css.com]
body {font-family: Tahoma, sans-serif; }
这是一个不错的解决办法。Tahoma其实是一个挺漂......
CSS布局基础：DOCTYPE 声明 常被遗忘的角落(2009-01-18 21:54:00)
摘要：网页开头部分的声明 我们可能很少关注，下面我就结合网上的资料，把自己的理解写下来，不对的地方，还请多多指正。
查看 http://www.114study.com/?ybtg=wuhuaitang的源文件
开头部分是
Example Source Code [www.52css.com]
<!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">
查看http://www.52css.com 的源文件
开头部分是
Example Source Code [www.52css.com]
<!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" lang="UTF-8">
两个网页源代码的开头部分基本一样 52css比 HTML XHTML网页编码这个页面多了一句 lang="UTF-8"
1、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
表示那网页是服从W3C//标准.语言是EN ,&......
Web Developer插件教程 CSS网页布局辅助设计利器！ 详细图文讲解(2009-01-18 17:30:00)
摘要：建立符合WEB标准的网站，应用XHTML与CSS来构建网站，我们往往处在开发与调试两个重要的环节，对于DIV+CSS的XHTML开发环境，页面的调试更加的重要。我们完全手写代码，需要不断的预览所形成的页面效果。而DIV+CSS这一形式是刚刚兴起的一种新技术，目前还不是非常的普及，我们需要不断的学习，浏览他人的成功作品从中汲取制作经验显得非常重要，也是我们学习的一种捷径。
现在我们介绍一种网页调试的辅助工具：Web Developer！ 它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具。
Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：
对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。
Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。
Web Developer作为FF的插件存在，这一点我们在上面已经提及，在安装好FF时，我们必须单独的下载安装Web Developer插件。如果你还没有Web Developer插件，我们在页面最顶部给出了Web Developer插件的下载链接。关于FF安装我们就不多费口舌了，一路确定即可，我们下面详细的说明Web Developer插件的安装步骤。
首先我们运行FF点击菜单栏的：工具>>扩展，如下图：
扩展工具面板列出了FF所有安装过的插件，例如GG工具栏等。如下图：
我们从本页最顶部提供的链接下载Web Developer插件，我们将此文件拖到FF的扩展工具面板上（在文件上按左键不要松动 移动鼠标拖动到面板上释放左键），如下图：
此时会出现一个新的对话框，要求我们确认是否安装Web Developer插件，点击“确认安装”，如下图：
界面回到了扩展工具面板，提示我们在重启FF后即安装Web Developer插件，如下图： ......