imovies
当前位置:首 页>> 百 宝 箱 >>DIV+CSS 学习心得<4>:神奇的盒子

DIV+CSS 学习心得<4>:神奇的盒子

  上回说到这次该具体耍一下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 笑傲江湖]
微信支付宝

标 签:CSSDIV

评 论0 引 用0 浏 览2657

上一篇DIV+CSS 学习心得<5>:Style大刀开耍!

下一篇DIV+CSS 学习心得<3>:CSS是怎么给力的

说点什么:

正文内容:

 

图片博文

Wedding Anniversary

订阅Rss

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。