vue组件库开发日志（5）|青训营笔记这是我参加青训营笔记创作活动的第12天可接触面积过小 v-show 和 v-if

这是我参加青训营笔记创作活动的第12天

可接触面积过小

inline-block需要配合 vertical-align使用不然会导致bug

  > span {
    //可触面积过小
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;
  }

或者改用 display:block来替换display：inline-block

  > span {
    //可触面积过小
    padding: 10px 20px;
    display: block;

v-show 只是单纯的改css v-if 会影响生命周期只有 v-if生效的时候才会监听

if会造成create 和distroy

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代&。

Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位

Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。

Relative：相对定位，是相对于其原本的位置来定位的。

Inherit：继承父元素的position值。