css盒子，很棒

作者：fbysss
Blog：blog.csdn.net/fbysss
msn：jameslastchina@hotmail.com
声明：本文章由fbysss整理编写，转载或引用请注明引用地址。
关键字：css盒子

css盒子模式其实还是很好的，今后的布局应该坚决贯彻。

一些基础知识与技巧：

1.什么是BOX？CSS把HTML中以<somesign>……</somesign>的部分称为BOX（容器），BOX有三类属性：padding、margin和border。

2.在CSS中，类选择符在一个半角英文句点（.）之前，而id则在半角英文井号（#）之前。
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
在使用时，<div id="top"></div>之间的内容就会应用#top定义的样式。
而intro则需要使用class="intro"

 

3.在同一个页面，可以指定不同的标签内部的链接属性

#nav li a{ 

color:#000000; 

text-decoration:none; 

padding-top:4px; 

display:block; 

width:97px; 

height:22px; 

text-align:center; 

background-color: #009966; 

margin-left:2px; 

} 

#nav li a:hover{ 

background-color:#006633; 

color:#FFFFFF; 

} 

#footer a{ 

color:#fff000; 

text-decoration:none; 

/*padding-top:4px; 

display:block; 

width:97px; 

height:22px; 

text-align:center; */

background-color: #009966; 

margin-left:2px; 

} 

#footer a:hover{ 

background-color:#ffffff; 

color:#FFFFFF; 

} 

通过指定 footer层的相关元素的css，就能实现层隔离个性化。

举一反三，其实css可以定义多层次的样式。比如#navcontainer ul ul a
4.css通配符使用

* {

margin: 0px;

padding: 0px;

}

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。

5.padding 可以用 padding-top, padding-right，padding-bottom, padding-left 来替换之。 类似的，margin可以用margin-top、margin-right、margin-bottom、margin-left替换

要注意，书写padding:5px 5px 5px 5px这样的形式，其对应的具体属性顺序是

top,right,bottom,left，也就是从上开始顺时针对应。

注意padding与margin的区别：padding是指元素内补白，margin是指元素外边距。

6.关于div完全替代table的说法，我不赞成。

为何有些人看到table就觉得不顺眼呢？一定要全换成div才叫web标准？我看未必。 

table相关标签就是专门用来做表格的，遇到表格的情形，当然是首选，使用div反倒麻烦。

改用div用div，该用table用table，这就是我的主张。