BFC:(block formatting context) 块级格式上下文,以特殊的规则渲染内部的元素,一片独立的渲染空间.
BFC:
1.块元素 自上而下排列
2.块元素的左边距(margin-left) 会贴合容器的内边距,就算出现浮动元素也会如此,除非该块元素也成为BFC
3.同一个BFC 的 块元素的垂直方向的外边距会叠加
4.BFC 区域不会和 浮动区域叠加
5.BFC 内部的浮动元素会参入BFC的高度计算
6.BFC 内部的元素不会影响外部的元素,外部元素不会影响BFC 区域的元素
产生BFC:
1.根元素
2.overflow 不为 visible,
3.display 为inline-block,
4.float 不为 none,
5.position: 为 absolute 或者 fixed
IFC (inline formating context):内联格式上下文 可以在同一行排列(inline,inline-block,float:left,right), 规定元素在同一行的水平和垂直对齐方式的
1.同一行排列 元素(inline boxes,没有容器包裹的文本,可以视为是 span ,匿名的inline boxes)在同一行排列 会产生行框(line box),行框内的元素默认按照自左向右的顺序依次排列(浮动元素除外),,行框在垂直方向 有顶部,底部,基线& 中间位置,同一行无法继续排列,会产生下一个行框,同一行的高度默认由最高的元素撑开,可以通过设置行高来改变 行框的高度.
2.水平排列的顺序:(text-align),
IE6 div最小高度19
解：与line-height和font-size 有关，设置为0
IE6中，float：left的第一个margin-left会显示双倍 right同理
解：_dispaly：inline （_下划线表示只被ie6识别）
IE7 以下块元素，不支持给块元素设置display：inline-block
解：*display：line
*zoom ：1 表示本身的大小缩放一倍，触发重新布局
IE7以下：相对定位的元素如果发生内容溢出父元素设置overflow：hidden； 无法阻止
解：父元素设置position：relative；
IE7以下li间隙 li内部有2个以上的浮动元素存在，li之间会有垂直间隙
解：设置垂直对齐vertical-align
IE6不能识别 png-24
CSS-hack 使用样式：hack来达到页面效果的统一
一：条件注释 内部的标签/样式/js等只能对应的ie浏览器识别
if gt IE 6 大于 ie 6
if lt IE 8 小于 ie 8
gte. 大于等于
lte 小于等于
<!--[if IE 6]>
<style>
div {
background: pink; ← 代码样式写在style外面
}
</style>
<![endif]-->
样式属性前添加特定的前缀被特定浏览器识别
_: ie6
+:ie6,ie7
*:ie6,ie7
选择器添加前缀
(* || _ || + )div ,span {
...........
}
