上回说到这次该具体耍一下style这把大刀的定义了，不过，耍大刀之前还得弄明白一个概念，就是之前说过的块的事情，官方好像说是box model，暂且就认为是官方定义的吧，翻译过来就是盒子模型，或者是盒子模式，所有的HTML元素都被是被看作box的，<div>也好，<p><span><ul><li><img>等等。所以在做网页，设计框架，具体布置页面内容的时候，这个box是要先说明一下的，要不然后面的style大刀没地方砍啊，多没劲，是吧，看下图：
有了box这个概念，咱就可以先来安排页面的框架了，头部header，导航nav，尾部footer，中间内容content部分是分左右，还是左中右还是上下等等，都可以通过box来安排，各个部分之间的间距、对齐方式、宽度高度等等。之前也说了我自己感觉叫box或者盒子比较别扭，我还是喜欢块这个概念，所以下面或者今后的文字里我所说的块就是官方说的box，块是我自己的理解，你也可以有自己的理解。
言归正传，每一个块，都有四个区域，从内到外看上图，分别是content内容区，padding区，border区，margin区。咱们一个一个区来侃侃，内容区，是咱们安排文字、图片、动画什么的区域，可以定义背景色，也或者是安排其他块的区域，块是可以嵌套的。然后是padding区，是内容区和border区之间的一个间隙，用来间隔实际内容和块边框的，只能定义宽度和高度，上下为高，左右为宽，padding区的背景色就是内容区的背景色。接着是border区，border，顾名思义，就是块的边框，边框线的颜色、宽度、类型是可以定义的，可以分别定义，也可以一次定义，顺序是上右下左。border边框线的颜色得专门说一下，如果你定义了边框的颜色，那就是显示你定义的颜色，如果你没有定义，那就是内容区文字的颜色，如果内容区文字颜色你也没定义，边框的颜色就是整个页面的背景色。这是我自己DW里写好样式，用Firefox浏览测试的，至于页面背景或者块的背景是图片的情况我没有测试，有时间的话您就自己动手试试看。最后是margin区，就是一个块最外面包围的一个区域了，它不能定义背景色，是透明的，会显示它的上一层块的背景色，如果块本身就一层，没有嵌套，那就是整个页面的背景色或者是背景图片的内容。毕竟margin区是用来控制块本身和和它上下左右其他块之间的间隔用的，所以还是透明比较合理和人道一点。[另：CSS2里又出来一个outline，介于border区和margin区之间，有点多余，没啥太大用途，就不罗嗦了。有空的自己Google一下。]
margin/border/padding，这三者的参数，上下左右可以分别定义，也可以一次定义，顺序是上右下左，或者上/右左/下，上下/右左。border特殊一点，牵扯到颜色和边框线类型的问题，不能使用哪种上/右左/下，上下/右左的方式去定义。具体看下面代码，其中.style1和.style2两种定义是一样的效果。
div.margin1{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
div.margin2{
margin:25px 50px 75px 100px;
}
div.margin3{
margin:25px 50px 75px;
}
div.margin4{
margin:25px 50px;
}
div.padding1{
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
}
div.padding2{
padding:25px 50px 75px 100px;
}
div.padding3{
padding:25px 50px 75px;
}
div.padding4{
padding:25px 50px;
}
p.style1{border:5px solid red;}
p.style2
{
border-color:red;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}
上面的例子只是为了说明定义方式，具体使用的时候，margin/padding/border是可以在一个ID或class里面一起定义的。具体有啥效果还得各位看官自己用DW定义好然后用浏览器试试才能体会，多动手，你才能耍好大刀啊。
最后就是块的宽度和高度的问题，从上面那张图片各位应该可以看出什么了吧，样式里定义的width和height，是内容区的宽度和高度，块的高速和宽度还要计算上margin/padding/border的宽和高。
且听下回分解关于内容区的style定义，包括文字的大小，颜色，字体，背景色，背景图片，链接的样式，列表的样式。[Edit on 2011-2-8 0:19:38 By 笑傲江湖]
