vue

对于组件中，我们的基础组件是不写逻辑的，而是将所触发的事件派发出去

JS部分

CSS部分

使用filter: blur() 的时候解决图片周围泛白和容器外范围变模糊的问题

解决办法

1、给父元素添加上一个overflow
2、给目标元素添加一个放大属性，transform scale(1.2)

关于position的可延伸

absolute

绝对定位是相对于父元素来说的，它脱离了文本流。所以它的宽高没有继承而来

而是根据定位top left right bottom 来得值它的大小

fixed

fixed定位是相对于视口来说的，这个定位同样会导致脱离文本流

但是它的拉伸大小不再看父元素的脸色，而是直接相对于视口进行定位

flex

    <div class="mine">
        <div class="box">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
    </div>
    <style lang="stylus" scoped>
.box
  width 2rem
  height 1rem
  background yellow
  ul
    display flex
    height 100%
    li
      flex 0 0 1rem
      width 1rem
      height .5rem
      background pink
</style>

黄色区域是父盒子的宽度，但是即便是ul中子元素发生了严重的溢出，li的父元素ul的宽度仍然是和父盒子宽度一样，因为块元素的宽度是向上继承的关系，所以即便你并没有设置宽度的属性，子元素也不会将父盒子撑宽，只是简单的溢出

header布局大法

为了高效可控的实现上图的布局

position + flex

事实证明，position的作用只是定位时，提供一个附加位置属性

padding 对line-height的影响

行高一直是一个好玩的问题，因为设置行号=盒子高度，我们可以实现文字内容在竖直方向上的居中

当时，其中影响行高位置的一个属性出现了，也就是padding和margin，line-height的计算起始位置一直是真实盒子的左上角，如果左上角发生偏移，那么文字也会移动

有问题的情况 abusoltue和flex

在父盒子使用了相对定位或者绝对固定位后，子盒子再使用flex弹性布局会失效；它们不能再一起共同使用；

解决思路：给子盒子再嵌套一个盒子；

主要解决问题的思路就是，将position 和 flex 分别在不同的盒子定义，就能解决大部分布局问题

关于有padding的width继承和没有padding的width继承

对于一些常见标签的记录

input

取消input标签的默认样式

input {
    outline none
    background none
    border none
}

关于label标签的应用

<label for="username">用户名</label>
<input id="username" type="text">

当我们点击用户名时的，光标会自动出现在input框中

项目

vue