css小常识

1. static：对象遵循常规流。此时4个定位偏移属性不会被应用（即 没有声明position:relative, top、right、bottom、left不管用）。
2. 当position的值为非static时，其层叠级别通过z-index属性定义。
3. margin值不超出父级，需要在父级声明 position：relative overflow:hidden(父级包含子级的margin值)；
4. 不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。

5. 实现多行文本溢出显示省略号：

   overflow : hidden;

   text-overflow: ellipsis;

   display: -webkit-box;

   -webkit-line-clamp: 2;

   -webkit-box-orient: vertical;

6. 手机阻止旋转屏幕时自动调整字体大小

   {-webkit-text-size-adjust:none;}

7. 两个内联元素可通过vertical-align来调节对齐高度
8. IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block
9. 清浮动：

   @mixin clearfix {
     &:after {
       clear: both;
       content: '.';
       display: block;
       height: ;
       line-height: ;
       overflow: hidden;
     }
   }

10.margin折叠常规认知：

• • margin折叠只发生在块级元素上；
  • 浮动元素的margin不与任何margin发生折叠；
  • 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
  • 绝对定位元素的margin不与任何margin发生折叠；
  • 根元素的margin不与其它任何margin发生折叠；

11. IE8的hack

IE8字体显示为 黄色，IE8以上显示为 紫色
.test {
color: yellow;
}
html:root .test {
color: purple;
}