【学习笔记之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
