CSS网页布局的几个建议

CSS网页布局的几个建议

1、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

2、li标签前面的图标推荐使用background-image，而不是list-style-image。

3、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

4、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

5、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

6、与内容无关的图片请使用background

7、定义颜色可以缩写#8899FF=#89F
 

8、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

9、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。

10、绝对定位时使用margin值定位可以达到相对于本身所在位置的定，这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

11、在IE中可能由于注释带来的文字重复问题时可以把注释改为：

<!–[if !IE]>Put your commentary in here…<![endif]–> 

12、如何让一个表单中的文本框中的文字垂直居中？

让行高与高度相等，如果在FF中没有效果，可以定义上下补白就可以实现。
 

13、定义A标签要注意的小问题：

当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式。

只定义了一个a:link时，一定要记得把其它三种状态定义出来！

15、并不是所有样式都要简写：

当样式表前定义了如 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的样式也要变。 

16. 背景尺寸

背景尺寸（Background size）是CSS3中最实用的效果之一，目前很多浏览器都已经支持。Background size属性可以让你随心所欲的控制背景图的尺寸大小。

从前用于背景的图像大小在样式中是不可调整的，如果你无法想象那样有多么糟糕，可以试着回忆一下，在自己的电脑桌面上做壁纸的时候遇到一张合乎心意却偏偏与桌面尺寸不合的图片，只能通过平铺来填充。

那样的桌面丑的让一个审美观及格的人都会有砸屏幕的冲动。而现在我们可以通过改变一行代码让背景图片适应自己的页面。

li
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

17. Margin: 0 auto

Margin: 0 auto实现的是CSS中最基础的功能，我们常常也会用它来实现最简单也最常用的功能—居中。虽然CSS本身没有一个指定居中的功能，但是通过auto margin指定一个边距仍然能非常简单的就实现居中这个功能。

通过这个属性，用一段简单的代码就能实现元素的居中。但需要注意的是，就像以下代码中那样，必须给li设定一个宽度。

.myli {
margin: 0 auto;
width:600px;

}

18、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。