[record]19-03~04

Posted on

3.19

标题右端浮动问题

你需要知道的浮动二三事

See the Pen 2019-03-01 by cookie (@suedar) on CodePen.

右端浮动占位 使用width失效 设置上高度即可

flex布局

宽度不定 无法使用网格布局

用margin-right？

3.21

周五啦

async函数返回问题

https://stackoverflow.com/questions/55293336/why-i-get-pending-from-this-function

async函数返回promise

怎么深入响应式监控state的数据

https://stackoverflow.com/questions/55295528/how-do-i-monitor-a-deep-value-in-object-while-using-vuex

3.25

上班啦

form表单验证是怎么实现的

less sass scss 区别

3.27

border导致位置挪动问题

https://stackoverflow.com/questions/55369507/why-is-the-position-change

nginx走缓存

location = /index.html {
add_header Cache-Control “no-cache, no-store”;
}

顺畅的scroll-smooth

https://www.youtube.com/watch?v=y9nlfqT4s9s

可以写个blog

在html设置 {
height: 100vh;
overflow: hidden;
}

在父级设置

1
2
3
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;

子级

scroll-snap-align: center;

啊 我的毕设啊QAQ

3.28

ie中jq的addclass不起作用

https://stackoverflow.com/questions/17060531/addclass-removeclass-not-working-in-ie

4.2

flutter

貌似是安卓的东西 了解一下跟react native的关系

4.5

无法在codepen复现的伪元素问题


See the Pen
Pseudo bug by cookie (@suedar)
on CodePen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    .content {
        margin-top: 3vh;
    .text, .year, .year-item {
        height: 50px;
        line-height: 50px;
        padding-left: 3rem;
        border-left: 3px solid $greyWhite;
        position: relative;
        &::after {
            color: $dot;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-67%, -50%);
            content: '●';
        }
    }
    .text {
        &::after {
            font-size: 28px;
            // BUG: 定位问题
            transform: translate(-57%, -56%);
        }
    }
    .dot {
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="content">
    <div class="text dot">
        这块地方一共有{{length}}篇文章
    </div>
    <div class="menu-item" v-for="item in year" :key="item.id">
        <div class="year dot">
            {{item}}
        </div>
        <div class="year-item dot" v-for="menuItem in menu[item]" :key="menuItem.id">
            <span class="date">
                {{menuItem.date}}
            </span>
            <span class="title">
                {{menuItem.title}}
            </span>
        </div>
    </div>
</div>

4.16

curry

我看了一下css大会的东西




4.22

grid布局可以自动紧缩吗

https://stackoverflow.com/questions/55793415/how-to-make-the-elements-of-unknown-location-compact

4.23

屏幕支持

According to this website, I think

1
2
@media screen and (min-width: 800px) {}
@media screen and (min-width: 1200px) {}

can support for 三端

富婆，饭饭