css 杂记（持续补充）

margin

• 作用
  • 让块元素水平居中
  • 让元素之间留有间距
  • 处理特殊的first，last
  • 布局
• 要点
  • margin折叠
  • margin百分比
  • margin的auto值
  • margin和相对偏移的异同
  • IE6浮动双margin Bug
  • IE6浮动相邻元素3px Bug

auto

一般auto计算值取决于可用空间

百分比

默认在writing-mode:horizontal-tb和direction：ltr，百分比参照父级的宽度

margin折叠

• 垂直边毗邻
  • 元素的上外边距和其属于常流中的第一个孩子的上外边距
  • 元素的下外边距和其属于常流中的下一个兄弟的上外边距
  • 属于常流中的最后一个孩子的下外边距和其父亲的下外边距
  • 元素的上下外边距，如果该元素没有建立新的块级格式上下文，且min-height的计算值为0或auto，且没有属于常流中的孩子

IE6浮动双倍margin bug

• 解决方案
  1. _margin-left:*/2
  2. _display:inline

z-index

• 元素的层叠级别为整型，描述在相同层叠上下文中元素在z轴上的呈现顺序
• 同一层叠上下文中，层叠级别大的显示在上，相同层叠级别时，遵循后来居上的原则
• 不同层叠的上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关
• 当定位元素没有显式定义z-index值时，不会创建新的局部层叠上下文
• 子元素有可能和祖先的兄弟会长祖先兄弟的子元素处在同一个层叠上下文中
• 当opacity值小于1时，该元素会创建新的局部层叠上下文，
• 当opacity值小于1时，该元素拥有层叠级别相当于z-index：0或auto，但不能定义z-index，除非本身是定位元素