Div+CSS_2——1解析.ppt

规范化页面 ——使用DIV+Css 定义公用Css 简单页面，公用CSS： body{ background:#fff url(images/back1.gif) repeat-x center top; font-size:12px; font-family:宋体, Verdana, Arial;line-height:150%; margin:0; padding:0; color:#FFF; } div{margin:0 auto; padding:0;} h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,form,img,p{ margin:0; padding:0; border:none; list-style-type:none; } UL的默认边距问题 事先定义公共的CSS可以避免部分兼容性问题。 如：ul标签在IE和FireFox下容易发生问题，原因是不同的浏览器对ul对象的默认边距值（margin和padding）设置造成的。IE中ul的默认边距是margin造成的，而在Firefox中，ul的默认边距是padding造成的，因此当我们单独定义margin与padding时，都不能够在两个浏览器中达到同样效果。所以都设置为0就可以解决。 另一种解决方法为：因为浏览器对其他元素也可能存在着默认边距值，使用通配选择符先将浏览器的默认边距都修改掉，后面需要设置边距再进行margin或padding设置。 * { padding:0px; margin:0px; } 行级与块级元素 前面我们举过非常简单的使用a元素制作网页菜单的例子，本质上就是给a元素设置高度、宽度，以及边框等属性。例如下面的代码： 行级与块级元素 html head style a{ width:200px; line-height:40px; border:1px solid red; background-color:#CCC; text-decoration:none; text-align:center; } /style /head body a href=#链接文字/a /body /html 行级与块级元素 显然，我们希望将上面的超级链接设置为200像素宽，40像素高，红色边框，灰色背景，取消下划线。 那么在浏览器中到底是什么效果呢？下面左图是在IE 6 中的效果，右图是在Firefox中的效果。 行级与块级元素 这里的原因在于，根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。 那么链接 a 元素，在默认情况下是什么元素呢？答案是“行内元素”，因此像上面代码中那样，对a元素设置高度、宽度等属性，是无效的，这也就说明了在Firefox中，显示成图中的样子的原因了。 行级与块级元素 是IE在默认情况下，并没有遵守CSS的规范，它对a元素也同样设置了高度、宽度等属性。因此这里应该说Firefox是符合规定的，而IE在默认下，并不是规范的解释方法。 这里需要说明的是，如果我们给网页加上 DOCTYPE 指令，对HTML文档的类型加以限定，那么在IE中也会对他按照标准的CSS规范来解释这个代码。 例如，将上面代码中的第一行，改为： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml 这时在IE中看到的效果，就会与Firefox中相同了，说明当使用了DOCTYPE指令之后，IE会按照标准的方式解释上面的代码，从而得到与Firefox中相同的效果。 行级与块级元素 解决方法 方法很简单，只需要使用display属性，强制把a元素由inline元素改为block-level即可，方法是，在a元素的CSS样式中增加一条： display:block; 这时在IE、Firefox中就都可以