DIV+CSS样式表的一些技巧

使用CSS的一点心得：

1。当有两个层嵌套时，如果内层的div是浮动的，外层的div就要设高度，否则用border属性看看该层会发现它没有高度。这种情况下你对外层设置背景时会发现没有作用。 另外设外层的padding属性也可以让它有高度。还可以在内层设置ul dl列表，这样外层也会跟着内层调整高度。

2。浮动的层一定要设宽度！向左浮动，可以设margin-left属性，向右浮动可以设margin-right属性。然而当我们还需要在垂直方向进行调整时就要特别注意：margin-top属性的语句要在height之前。像这样：#logo{float:left; margin-left:5px; margin-top:20px; padding:0px; width:300px; height:40px; background:...} 当把height属性放在margin-top之前时，我的图标怎么做都margin-top都不起作用！为此苦恼了一个上午。

3。标题前面的小图标

标题前面的小图标可以用a标签的padding属性来设置，而且还很方便，具体如下：#node_1 a{padding-left:20px;background:url(...tag.gif) left 2px norepeat;}这样子就可以在标题（标题是个A标签可链接到新页面）的左边20px宽的地方放置一个tag.gif图标了,而且图标的位置可以调整。参考background属性。

4。关于页面底部背景图片

一般都把背景的颜色的处理放在网页底部，避免把不能重复的背景放在底部以上区域（即不放在foot层以上）。然而也有一些很特殊的情况，当页底foot部份高度很小（比如只有30px），而图片的结尾处理又需要更高的高度时（比如100px）。这是一个很苦恼的问题。我的情况是要在左边做一条有阴影的坚条，我的做法是这样，在center_all(主体层)下<div id="bodybg_left"></div> #bodybg_left{ float:left; margin:0px;padding:0px; width:30px; height:100%;background:url(...) left bottom no-repeat; }当然还有一个前提就是center层要设高度，不设高度#body_left的高度就显示不出来！至于center_all不设高度的情况我还不知道有什么好的方法去实现。

5. background属性包含在border包含的框内，所以background是将padding包含在内的。

6. IE中width属性只是content内容的宽度，如果一个div设了padding，又设width，它的总宽度是width+padding+border+margin.我们看到的背景图片的宽度是（如果设了背景的话）:width+padding+border.border设了宽度的话会显示border的颜色。也可以认为背景图片的宽度为：width+padding的宽度。