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: 0;
        line-height: 0;
        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; }

 

posted @ 2016-04-01 14:24  没事看看电影  阅读(124)  评论(0编辑  收藏  举报