【学习笔记之CSS+DIV】CSS盒子模型

CSS设计彻底研究第3章笔记

*红色标记的为默认值

  • border(边框):border-top,border-bottom, border-left,border-right

     1.border-color(边框颜色);

     2.border-width(边框粗细):medium|thin| thick|数值;

     4.border-style(边框样式):none|hidden(隐藏)|dotted(虚线)|dashed(点线)|solid(实线)|double(双实线)|groove(IE不支持)|ridge(IE不支持)|inset(IE不支持)|outset(IE不支持)。

  • padding(内边距):padding-top,padding-bottom ,padding-left,padding-right
  • margin(外边距):margin-top,margin-bottom ,margin-left,margin-right
    当margin设为负数时,会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。当块之间是父子关系时,通过设置子块的margin参数为负数,可以将子块从父块中“分离”出来。
  • background-color(背景颜色)
    1.在给元素设置background-color背景色时,IE作用的区域为content+padding,而Firefox则是content+padding+border。
    2.body是一个特殊的盒子,它的背景色会延伸到margin的部分。
  • 属性值的简写形式 

     1.如果给出2个属性值,前者表示上下的属性,后者表示左右的属性;

     2.如果给出3个属性值,前者表示上的属性,中间的数值表示左右的属性,后者表示下的属性;

     3.如果给出4个属性值,依次表示上、右、下、左的属性,即顺时针排序。

  • 标准流
    所谓“标准流”,就是指在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。
  • 元素的分类

     1.块级元素(block):占一行

     块级元素div1和div2之间的垂直margin=MAX(div1的margin-bottom , div2的margin-top)。

     2.行内元素(inline

     行内元素span1和span2之间的水平margin=span1的margin-right + span2的margin-left

  • 盒子的浮动

     1.设置浮动:float:none|left|right

     2.清除浮动:clear:none|left|right|both

  • 扩展盒子的高度

实际效果

希望实现的效果

     一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关。

     【解决方法】在其后添加一个div,并设置样式如下:

     .father .clear{

     margin:0;

     padding:0;

     border:0;

     clear:both;

     }

     *注意:这里必须指定其父div,并覆盖原来对margin,padding和border的设置。

  • 盒子的定位
    position:static|relative|absolute|fixed
    1.static这是默认的属性值,也就是该盒子按照标准流(包括浮动方式)进行布局。
    2.relative相对定位。
    (1)除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left(向右)或者right(向左)属性来指定,竖直方向通过top(向下)或者bottom(向上)属性来指定。
    (2)使用相对定位的盒子,会相对于它原本的位置,通过偏移指定的距离,到达新的位置;
    (3)使用相对的盒子仍在标准流中,它对父亲和兄弟盒子都没有任何影响。
    3.absolute绝对定位。
    (1)使用绝对定位的盒子以它的“最近”一个“已经定位”(position属性被设置,并且被设置的不是static)的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位;
    (2)使用绝对定位的盒子从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样;
    (3)如果设置了绝对定位,而没有设置偏移属性,那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况;
    (4)IE6的BUG:错误的位置和正确的位置相差了父div的padding的宽度。
    【解决方法】给父div(定位的基准盒子)增加一条CSS样式:height:1%;
    4.fixed(IE6不支持)称为固定定位,它和绝对定位类似,只是以浏览器窗口为基准,进行定位。
  • 盒子的display属性
    display : inline|block|none

posted on 2010-01-24 15:21  shuz  阅读(5484)  评论(0编辑  收藏  举报

导航