CSS盒子模型

【学习笔记之CSS+DIV】CSS盒子模型   *红色标记的为默认值 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