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