发表于

in-flow和out-of-flow

规范规定

1
An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.

如果一个元素是浮动的(float:left/right)，绝对定位的(position:absolute/fixed)或者是根元素(html)，那么它被称之为流外的元素(out-of-flow)。如果一个元素不是流外的元素，那么它被称之为流内的元素(in-flow)。

1
The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

元素 A 的流是一个集合，包含 A 元素本身，以及元素 A 的流内的子元素且这些子元素最近的流外祖先是 A 元素。

示例

1
2
3
4
5
6
7
8
<div class="A" style="position: absolute;">
  <div class="B"></div>
  <div class="C" style="position:absolute">
    <div class="D"></div>
  </div>
  <div class="E">
  <div class="F"></div>
</div>

以上示例中，A 元素的流包含分析如下：

  1. A 和 C 是流外的元素，所以 C 被排除
  2. D 元素由于最近的流外祖先是 C，所以他也不是 A 的流
  3. 所以最终 A 元素流内的元素只剩下：ABEF

发表于

零、原文链接


一、使用场景

1
2
3
4
5
6
7
8
9
10
11
12
getUserId().then(getUserJobById).then(function(job) {
    // 对job的处理
});


function getUserJobById(id) {
    return new Promise(function(resolve) {
        http.get(baseUrl + id, function(job) {
            resolve(job);
        });
    });
}


二、具体实现

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
function Promise(fn) {
    //一个promise对象有状态、值、回调callbacksList
    //then()可以别调用多次，所以是callbacksList
    var state = 'pending',
        value = null,
        callbacks = [];

    //then()函数必须返回一个promised对象
    //then()函数功能类似于订阅者模式中的listen()
    this.then = function(onFulfilled, onRejected) {
        return new Promise(function(resolve, reject) {
            handle({
                onFulfilled: onFulfilled || null,
                onRejected: onRejected || null,
                resolve: resolve,
                reject: reject
            });
        });
    };


    function handle(callback) {
        if (state === 'pending') {
            callbacks.push(callback);
            return;
        }

        var cb = state === 'fulfilled' ? callback.onFulfilled : callback.onRejected,
            ret;
        
        if (cb === null) {
            //如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
            //如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因
            cb = state === 'fulfilled' ? callback.resolve : callback.reject;
            cb(value);
            return;
        }
        
        //如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e
        try {
            //cb()函数说明，只要父promise不抛出异常，子promise都成功执行
            //ret也可能是一个promise对象
            ret = cb(value);
            callback.resolve(ret);
        } catch (e) {
            callback.reject(e);
        }
    }
    
    //resolve()和reject()函数功能类似于订阅者模式中的trigger()
    function resolve(newValue) {
        //newValue可能是一个promise对象
        if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
            var then = newValue.then;
            if (typeof then === 'function') {
                //由newValue（promise）对象调用当前promise对象的resolve或reject
                then.call(newValue, resolve, reject);
                return;
            }
        }
        state = 'fulfilled';
        value = newValue;
        execute();
    }


    function reject(reason) {
        state = 'rejected';
        value = reason;
        execute();
    }


    function execute() {
        setTimeout(function() {
            callbacks.forEach(function(callback) {
                handle(callback);
            });
        }, 0);
    }


    fn(resolve, reject);
}

注：异步处理上，没有达到要求。具体参见事件循环


阅读全文 »

发表于

零、英文原文：Promise/A+


一、术语

  • Promise：是一个拥有 then 方法的对象或函数，其行为符合本规范；
  • thenable：是一个定义了 then 方法的对象或函数，文中译作“拥有 then 方法”；
  • 值（value）：指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）；
  • 异常（exception）：是使用 throw 语句抛出的一个值。
  • 据因（reason）：表示一个 promise 的拒绝原因。


二、要求

1、Promise 的状态

一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

2、等待态（Pending）

处于等待态时，promise 需满足以下条件：

  • 可以迁移至执行态或拒绝态

3、执行态（Fulfilled）

处于执行态时，promise 需满足以下条件：

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的终值

4、拒绝态（Rejected）

处于拒绝态时，promise 需满足以下条件：

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的据因

这里的不可变指的是恒等（即可用 === 判断相等），而不是意味着更深层次的不可变（译者注：盖指当 value 或 reason 不是基本值时，只要求其引用地址相等，但属性值可被更改）。


阅读全文 »

发表于

一、属性

  • column-count: 最理想的分栏数目
  • column-gap: 栏目之间的水平间隙
  • column-rule: 分割线，形式规则什么的等同于border
  • break-inside: 内容盒子如何中断 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*瀑布流层*/

.waterfall {
    column-count: 4;
    column-gap: 1em;
}


/*一个内容层*/

.item {
    padding: 1em;
    margin: 0 0 1em 0;
    break-inside: avoid;
    border: 1px solid #000;
}


.item img {
    width: 100%;
    margin-bottom: 10px;
}
1
2
3
4
5
6
<div class="waterfall">
    <div class="item">
        <img src="https://imgsa.jpg">
        <p>1 convallis timestamp</p>
    </div>
</div>

发表于 
1
2
3
4
5
6
7
8
9
10
<div class="masonry">
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <div class="item">
        <div class="item__content item__content--small">
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.masonry {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    height: auto;
    
    /*缺点：需要设置一个固定的height*/
    @media screen and (min-width: 400px) {
        height: 1600px;
    }

    @media screen and (min-width: 600px) {
        height: 1300px;
    }

    @media screen and (min-width: 800px) {
        height: 1100px;
    }

    @media screen and (min-width: 1100px) {
        height: 800px;
    }
}

发表于

一、滚动条相关伪元素

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).


阅读全文 »

发表于

一、line-height值

normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

注：normal我们常常认为它是（或者应该是）1或者1.2，甚至也可以说，CSS规范都不清楚是哪一个。

1
normal: Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.


二、继承问题

  • 如果父级的line-height属性值有单位或百分比，那么子级继承的值则是换算后的一个具体的px级别的值；
  • 而如果父级的line-height属性值没有单位，则子级会直接继承这个“数值”，而非计算后的具体值，此时子级的line-height会根据本身的font-size值重新计算得到新的line-height值。


三、font-size 与line-height

每个元素使用相同的font-size，但使用不同的font-family，但渲染出来的line-height是不同的。

CSS 权威指南基本视觉格式化一章中讲到：对于行内非替换元素或者匿名文本来说， font-size 指定了它们的 content area的高度，由于inline box 是由 content area 加上上下的 half-leading构成的，那么如果元素的leading为 0，在这种情况下，font-size 指定了inline box 的高度。


四、leading

1、英文字体有基线（baseline）和中线（meanline），这两条线之间就是所谓的x-height，即小写字母x的高度。基线之上的部分是上伸区域（ascent），基线之下的部分是下伸区域（descent）。

2、两种说法

  • 现代排版软件 ：两行文本的基线之间的距离是现代排版软件中所说的行距（leading）


  • CSS ： leading = line-height - font-size


发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let delay = 800;
let pageHeight = 500;
let preNow = new Date();
let el = document.getElementById('demo');
let scrollTop = el.scrollTop;
el.addEventListener('scroll', myFunction);

function myFunction(e) {
    //节流计时器
    let now = new Date();
    if (now - preNow > delay) {
        preNow = now;
        if (el.scrollTop > scrollTop) {
            el.scrollTop += pageHeight;
        } else {
            if (el.scrollTop < scrollTop) {
                el.scrollTop -= pageHeight;
            }
        }
        scrollTop = el.scrollTop;
    } else {
        el.scrollTop = scrollTop;
    }
}

发表于

一、CSS3新属性

在CSS2中，背景图片定义的位置是相对于其包含元素的填充(padding)的外部界限的，所有的溢出都会扩展到边框之下。CSS3引入了两个新的属性，可以对其进行更精细的控制。

  • 第一个属性是：background-clip

  • 第二个属性是：background-origin

对于这两个新属性，其对应的属性值是相同的：border-box, padding-box, content-box。它们的最根本的区别就是：background-clip 是对背景图片的裁剪，background-origin是对背景图片设置起始点</font>。

对于background-clip, 其关键字是指将背景图片以border的尺寸、以padding的尺寸，以content的尺寸进行切割，其得到的结果是不完整的背景，也就是其中的一部分(原理与截图差不多)。而且有一点要注意，background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。

对于background-origin，其关键字是指将背景图片放置到border范围内，padding范围内、content范围内，其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是，它只是单纯设置背景图片的边界，并不会对背景颜色造成影响。

阅读全文 »

发表于

一、先上图

background-position

图片上的标注信息已经告诉大家很详细的信息了。示例中容器具备下述特性：

  • div容器尺寸410px x 210px，边框宽度10px
  • 容器背景图尺寸100px x 100px
  • 第一张背景图background-position:10px 10px；第二张背景图background-position: center
  • 其中黑白格子尺寸是10px x 10px


阅读全文 »