CSS小总结
/*温馨提示：若觉得黑白的反差“亮瞎眼”，可适当调低屏幕亮度*/
最近在学习HTML5，包含其中的思想让人有了一种惊呼“终于~”的感觉，感觉布局又被整理一遍，不论从编程上还是搜索引擎友好上，\(^o^)/~，真是激动人心啊~~
当然，旧爱地位依旧~今天就把HTML，CSS的一些小知识点和理解总结一下，防止思维混乱~
1.块与内联
在HTML的标签中，有两种类型的元素，块状与内联。
块状一般的理解是盒子，它有其特有的盒模型，有两种，一种是IE特有的盒模型，另一种是标准的W3C盒模型，如图（图摘自维基）
块状元素的特点是：独占一行，可设宽高。
内联元素就类似于写作业的单行本，有其基线（base-line）限制其中内容的高度，内联元素是无法设置宽高跟padding-top，padding-bottom，margin-top，margin-bottom的，希望改变行高可以设置line-high（内联元素是由line-high撑起来的），希望改变行内元素与相邻行内元素距离可以设置padding-right，padding-left等，或者，干脆把它设为inline-block吧~
特点：内联元素不会独占一行，默认宽高由内容本身决定。
内联与块状之间是可以通过设置display属性相互转换的，内联->块状：display：block；块状->内联：display：inline；
一直我都纳闷，为何要相互转换呢，后来我明白了，我的理解是这个转换是应用在那些例如图片，默认是内联元素，但希望单行显示并能对其有例如padding控制时可以进行转换之类的情况下的。又例如，<a>元素是内联的，当希望链接的一些特性可以在块上实现时，可以转换。
注意，当内联元素设置为浮动元素时，会变成块状元素。
内联元素中还有一种特殊元素，替换元素，浏览器根据其标签元素属性来判断具体的显示内容，例如，<img><input><textarea><select><object>，可设宽高。
2.文档流，定位，float
文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素。
定位：absolute（绝对定位），fixed（固定定位） —— 脱离正常文档流，不占据正常文档流空间
static（静态定位），relative（相对定位） ——保持文档流，占据正常文档流空间
inherit（继承）——尚了解不足，尽快补上
absolute：使用top，right，bottom，left属性进行定位，相对于最近有定位的父对象(非static)的border偏移（定位），一般为其相对的父级设置
position：relative属性；可以通过z-index设置层叠属性；超出可视区会出现滚动条；
fixed：使用top，right，bottom，left属性，相对于浏览器窗口定位；可以通过z-index设置层叠属性；fixed在IE下不支持，可用JS补足；
static：默认值，top，right，bottom，left属性不被使用；z-index属性无效；
relative：使用top，right，bottom，left属性相对于本身默认位置的偏移（定位）；可以通过z-index设置层叠属性；
注意：relative与static定位是在最外层时，以<body>为定位父级，而absolute定位无指定父级时以<html>为定位父级，<html>与<body>之间相差大约9px。
浮动：float：不占正常流空间，但基于正常流尽可能左（float：left）或尽可能右（float：right）的排布；float元素务必指定width属性，否则浮动没意义，很多浏览器在显示未指定width的float元素时会有BUG；其父元素不可指定clear属性，否则周围的float元素布局会混乱；float元素之间的margin（上下）不会重叠；子容器浮动后，父级容器不会被撑开，会使子容器内容与其他内容重叠，此时应在标签结束后使用一个空的clear：both的div来撑开父级容器。
3.清除浮动（准确的说是：忽视浮动）
方案一：
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display: inline-block;} /* for IE/Mac */
.clear {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
}
方案二：
.clear{
height:0px;
clear:both;
font-size:0px;
line-height:0px;
zoom: 1;
}
方案三：
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;/*ie6,7*/
}
4.collapsing margins（折叠margin）
1.在正常文档流中，垂直相邻的div的外边距margin会重叠：相邻元素外边距皆为正数时，折叠后的结果为两者中的较大值
相邻元素外边距皆为负数时，折叠后的结果为两者绝对值中的较大值
相邻元素外边距一正一负时，折叠后的结果是两者相加后的值
2.一个没有设置padding与border的正常文档流元素与其第一个正常文档流子元素的margin-top会重叠
3.一个height为0，min-height为0且没有设置padding与border的正常文档流元素与最后一个正常文档流子元素的margin-bottom会重叠
4.inline-block元素不与任何元素重叠
5.BFC(Block formatting contexts)块级格式上下文
说白了就是形成一个箱子，使箱子内的元素与外部元素互不影响，同一箱子内的元素还是会互相影响的，通常应用在解决绝对定位，float，collapse margin所引起的相关问题中。
触发BFC的条件（情况）：
1.设置float不为none，是元素浮动，脱离文档流
2.设置overflow属性，并不为visible（IE6下无效）
3.display为table-cell，table-caption，inline-block
4.position为absolute，fixed
5.触发IE的haslayout
6.IE的haslayout
IE渲染引擎的一部分，在IE中，元素的属性要么依赖自身的属性去计算和确定自身表现，要么依赖以父级元素。为了调和这两个方案，IE设置了haslayout属性以确定自身表现。当元素的haslayout属性为true时，该元素有一个布局（layout），此时它不依赖于祖先元素来完成计算尺寸与组织内容的工作，haslayout属性一旦触发，很难逆转，除非把其所有触发条件去除。layout是IE大部分bug的根源，可以通过触发haslayout来修正。
触发条件：（任一即可）
display：inline-block
设置height/weight属性，且不为auto
设置float不为none
position：absolute
writing-mode：tb-rl
设置zoom除normal外的任意值（我最喜欢这个方法，安全无公害，可以触发BFC或用于判断bug是否出自以layout，以进行进一步的维修代码，而且不会对其环境有其他影响，IE5不支持）
IE7下还有：
position：fixed；
设置overflow/overflow-x/overflow-y且不为visible
. . . . . .还有很多
7.clearance
当浮动元素之后有设置clear以清除浮动影响的元素时，该元素的margin-top上会产生一定的空隙（即clearance），该空隙可以阻止margin-top的折叠。此时，清除浮动元素的border-top会紧贴着浮动元素的margin-bottom。空隙高度计算起来比较复杂，但空隙的高度与其margin-top之和足以使其border-top紧贴浮动元素的margin-bottom。
