深入理解盒子模型(2)

  • 在前面,我们讲了什么是盒子模型,现在来介绍一些跟盒子模型有关的元素.首先声明一下,只讲平常容易错的一些细节.具体到某个元素的相对应属性,请读者自己去看CSS样式表.谢谢
    1.边框(border)
       border一般用于分割不同元素,因此在实际计算元素的宽和高时,需要将border纳入,所以在计算精细的版面时,一定要把border的影响考虑进去,本人以前就是没有考虑border,在用将两个<div>并列后,由于总宽度我已经限定死了,在给每个<div>分配时,没考虑border宽度,导致两个div没并列.
       经验:在用"#336699"这样16进制,可以进行缩写为"#369"
    2.对于不同的边框设置不同的属性值
       方法:
       如果给出1个属性值,表示所有边框的属性设置
       如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性

           如果给出3个属性值,前者表示上边框的属性,中间的表示左右边框的属性,后者表示下边框的属性.
           如果给出4个属性值,依次表示上,右,下,左边框的属性,即顺时针排序.
           注意:当有多条规则作用于同一个边框时,会产生冲突,后面的设置会覆盖前面的,在给元素设置background-color背景色时,IE作用的区域为content+padding,而Firefox则是content+padding+border,记住这点!


待续........

posted @ 2008-05-31 07:16  单车骑客  阅读(239)  评论(0)    收藏  举报