CSS+div常见问题解答

css+div网站设计时常见问题解答一、在网站建设时，有问题，先验证在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS会导致许多布局上的错误。在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是Mozilla，Safari或Opera。二、确保您期望的效果确实存在许多特定的浏览器专有的CSS扩展在正式标准中并不存在。如果您对filter（滤镜）或滚动条指定了样式，那么您就用了私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，这样在不同的浏览器中很难达到一致的效果。如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。浮动对象似易实难，而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看EricMeyer的教程边距的合并：可用padding或border来避免。您可能被多余的（或者想要却不出现的）空白搞得焦头烂额。如果您用了margins，边距的合并可能就是问题的根源。AndyBudd对此的解释可能为你解惑。避免将padding/border和固定宽度同时应用到同一元素。IE5的区块模型是错误的，是它把事情办坏了。对此也有权宜之计，不过最好是绕过这个问题，当子元素的宽度固定时，为父元素指定padding。三、避免IE下未指定样式内容的闪烁。如果您仅仅靠@import来输入外部样式表，早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前，未经格式化的HTML文本会短暂地出现。这是可以避免的。四、别指望min-width在IE中有用。IE不支持它，但是它将width当作min-width，所以通过一些IE的过滤技巧（filtering），可以实现同样的最终效果。把CSS过滤器（filters）当作最后的手段CSS技巧和过滤器可以使您有选择地应用到（或者不应用到）某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果，而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS过滤技巧。［译注：不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一，人们找到了许多技巧，将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。webjx.com如果使用了锚点，在应用超链接样式时要特别小心。如果您在代码中使用了传统的锚点（），您会注意到：hover和：active伪类也会作用于它。要避免这种情形，你可以使用id，或者使用鲜为人知的语法：：link:hover，：link:active五、记住“LoVe/HAte”（爱/恨）链接规则要以下面的顺序指定超链接伪类：Link，Visited，Hover，Acitve。任何其他顺序都不妥当。假如用了：focus，次序应为LVHFA（“LordVader‘sHandleFormerlyAnakin”，MattHaughey这样建议）。请记住“TRouBLED”（麻烦的）边框。边框（border）、边距（margin）和补白（padding）的简写次序为：顺时针方向从上开始，即Top，Right，Bottom，Left。比如margin：01px3px5px;表示上边距为零，右边距为1px，依此类推。六、非零值要指明单位。在用CSS指定字体、边距或大小时，必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是px还是em还是其他单位，它不需要单位。例如：padding：02px01em;七、测试不同的字体大小。像Mozilla和Opera这样的高级浏览器允许对字体进行缩放，不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同，尽最大努力去满足他们。用嵌入式测试，发布时改为输入。将样式表嵌入在你的HTML源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些Mac下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用@import或引入。八、加上明显的边框有利于布局调试。像div{border：solid1px#f00;}之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。对图片路径不要用单引号。当设置背景图片时，要坚持用双引号。尽管看起来有些多余，但是如果不这么做，IE5/Mac会噎住。不要为将来的样式表（比如手持式设备或打印用样式表）留个“空位”。MacIE5对空的样式表比较感冒，会增加页面的装入时间。建议样式表中至少应该有一条规则（哪怕是注释也好），免得MacIE噎住。另外值得一提的还有一些虽然不针对某些功能，但是在开发过程中应当注意的理论九、好好组织您的CSS文件恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。以功能（而不是外观）为类和ID命名假如您创建了一个.smallblue类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如.copyright和.pullquote。十、组合选择符保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、利用继承（inheritance）以及使用简写（shorthand）来减少冗余。使用图片替换技术时要考虑亲和力已经发现传统的FIR在屏幕阅读器，以及关闭图片显示中会出问题。对此有其他解决办法，要根据具体情况，慎重使用。1、正确地使用position属性position的英文原意是指位置、职位、状态，也有安置的意思。在CSS布局中，position发挥着非常重要的作用，很多容器的定位是用position来完成的。position属性有4个可选值，它们分别是：static、absolute、fixed、relative.下面我们来共同学习它们的不同用法。在学习中我们应该去思考在什么布局情况下应该使用它们其中的哪一种。(1)position:static无定位，该属性传值是所有元素定位的默认情况。在一般情况下，我们不需要特别地去声明它，但有时候遇到继承的情况时，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。(2)position:absolute绝对定位使用position:absolute，能够很准确地将元素移到到你想要的位置。将nav移动到页面的右上角，我们可以这样写：nav{position:absolute;top:0;right:0;width:200px;}使用绝对定位的nav层，前面的或者后面的层会认为这个层不存在，也就是在Z方向上，它是相对独立出来的，丝毫不影响其他Z方向的层。所以position:absolute用于将一个元素放到固定的位置，很好用。但是如果需要层相对于附近的层来确定位置就无能为力了，只能用下面讨论到的相对定位了。这里个WINIE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。(3)position:fixed相对于窗口的固定定位，元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如Web浏览器中，元素在文档滚动时不会在浏览器视窗中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现在第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大多数效果不是通过CSS来实现，而是应用了JS脚本。请特别注意，IE6不支持CSS中的position:fixed属性。(4)position:relative相对定位，所谓相对定位是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里。用topbottomleftright4个数值配合，来明确元素的位置。如果要让nav层下移20px，左移40px，我们可以这样写：#nav{position:relative;top:50px;left:50px;}不规则文字排版在网页设计中，会遇到许多意想不到的情况，不规则文字的排版就是其中之一。遇到这种问题，通常情况下我们有两种选择：(a)用图片来制作，并应用热区制作链接。用这种方式可以很方便地解决问题，但对搜索引擎很不友好，不易被搜索引擎发现。(b)用Flash来完成，还可以加上动感的特效。这种方式除了同样对搜索引擎不友好之外，还存在着用户是不是安装有Flash播放插件的风险，以及浏览器对Flash文件的屏蔽的问题。我们可以考虑用Div+CSS来完成它。主要的思路就是用不同的容器，对容器进行定位来实现。虽然这样做非常烦杂，而且不利于后期的更新维护，但可以收到很大的效果：显示速度快，更有语义，适合多种上网设备，有利于对搜索引擎更加友好等。制作不规则文字排版可以首页定义一个容器，并设置一定的背景图片，在这个容器内，再加上不同的容器标签，如:h1、span、div、p等等。建议直接用h1标签。对h1标签，应用不同的样式，设置不同的margin以进行定位。2、如何正确使用标题元素HTML标题元素类型是h1、h2、h3、h4、h5和h6，数字表示标题的结构级别，最高级别的标题在页面中必须是h1。它应该描述这个页面是做什么的。大多数的页面有一个h1标题，但复杂页面文件也许不止一个h1标签。h2标题将标记下个结构级，次一级的是h3，依次类推，而不能从h2跳到h4。h4不应该跟随h2，它们之间应该是h3。3、如何正确使用P和BRP元素标记文本的一个段落。段落包括一个或更多的句子。强制换行(br)通常只是一个表面上的工具，应该由CSS而不是HTML处理。但是，强制换行在某些地方也可以说是有语义的，例如在诗歌、歌曲、邮件地址和计算机编码演示等方面，这些可能会构成合法的用途，但使用br分离段落绝对是不正确的。另一方面，P有一个非常清楚的语义意思:它表示段落。有时Web设计者将P作为普通块级元素用，这显然是不正确的。不难看出，在一个表单label和input标签被包含在P标签里，这样在语义里绝对是错的，label和input标签不构成一个paragraph。4、CSS的书写建议给CSS文件加注释。注释会给你今后的维护工作带来方便。建议尽可能给CSS文件加注释，不要担心增加少量的字节。尽量简写CSS语法。比如颜色#ffffff可以简写成#fff，padding-top:30px;padding-right:0;padding-bottom:10px;padding-left:20px可以简写为padding:30px010px20px;。在定义上有很多节省技巧，随着对CSS应用的熟练，你会不断发现更好的办法。5、DIV居中设置在传统的表格布局中，只要设置表格的居中属性就可以实现块元素居中。应用DivCSS网站布局，Div的居中该如何通过编写CSS来控制它呢？主要的样式定义如下。body{text-align:center;}#center{margin-right:auto;margin-left:auto;}首先在父级元素定义text-align:center,意思就是在父级元素内的内容居中。对于IE，这样的设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时再加上margin-right:auto和margin-left:auto。需