发表于

IntersectionObserver API
可以自动”观察”元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做”交叉观察器”

1
2
3
4
let io = new IntersectionObserver(callback, option)
io.observe(element);  // 开始观察
  io.unobserve(element);  // 停止观察
  io.disconnect();  // 关闭观察器
阅读全文 »

发表于

Block fomatting context (简称BFC)

Box盒子定义

Box: 盒子，布局的基本单位。display ，决定盒子的类型

  • block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context
  • run-in box:CSS3
阅读全文 »

发表于

从达标到卓越 —— API 设计之道

规则

  • 达标：词法和语法
    • 正确拼写
    • 准确用词
    • 注意单复数
    • 不要搞错词性
    • 处理缩写
    • 用对时态和语态
  • 进阶：语义和可用性
    • 单一职责
    • 避免副作用
    • 合理设计函数参数
    • 合理运用函数重载
    • 使返回值可预期
    • 固化术语表
    • 遵循一致的 API 风格

  • 卓越：系统性和大局观

    • 版本控制
    • 确保向下兼容
    • 设计扩展机制
    • 控制 API 的抽象级别
    • 收敛 API 集
    • 发散 API 集
    • 制定 API 的支持策略

    正确拼写 (IDE 的 typo 提示（单词拼写错误提示）)

    准确用词
    理解 API 的作用和 上下文场景，成对出现的正反义词不可混用
    eg.
    message、notification、news

    message:一般指双方通信的消息，是内容载体。而且经常有来有往、成对出现。比如 postMessage() 和 receiveMessage()

    notification: 通知 new NotificationManager()
    news：较长的消息，比 notification 更重量级 getTopNews
    feed：订阅 fetchWeitaoFeeds

    阅读全文 »

发表于

margin 百分比

普通元素的百分比指margin相对于容器的宽度计算

绝对定位元素百分比margin值相对于第一个定位祖先元素（rleative/absolute/fixed）计算

阅读全文 »

发表于

hexo 静态博客搭建

hexo 静态博客搭建

Jekyll 静态博客搭建

Jekyll搭建个人博客

优点方便管理 缺点需要安装ruby环境，Windows环境比较麻烦

系统环境 win10 x64

1 Gem::InstallError: The ‘redcarpet’ native gem requires installed build tools.

2.C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/bundler-1.14.3/lib/bundler/runtime.rb:40:in block in se tup': You have already activated colorator 1.1.0, but your Gemfile requires colorator 0.1. Prep endingbundle exec` to your command may solve this. (Gem::LoadError)

检查 Gemfile，Gemfile.lock 文件是否缺少，重新Builder install

发表于

border-width

不支持百分比

border-style

  • solid
  • dashed Chrome/Firefox 框高3:1 IE 2:1 修改方法[ CSS3 border-inmet]??
  • dotted 点线 Chrome/Firefox 小方块 IE 圆形 ，IE7/8 实现圆角
  • double 双线 计算规则 实线区域[永远相等]: x 中间区域: y 2x+y = width;y= x+1;或者y=x-1;
  • inset 内置凹陷
  • outset
    eg.dotted 圆角
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .box{
    width:150px;
    height:150px;
    ovflow:hidden;
    }
    .dotted {
        width:150px;
        height:150px;
        border:149px dotted #cd0000
    }
1
2
3
<div class="box">
<div class="dotted"></div>
</div>
阅读全文 »