Creeper

> 有个疑问，请求大佬解惑！：关于作用域链的确认的 > > ``` > function a(){ > let num = 0; > return function(){ > console.log(++num) > } > } > const b =a() > b() > ```...

### 1. `position: absolute`的 containing block 问题 `position: absolute`的元素的包含块（containing block） 总是最近定位的祖先元素（nearest positioned ancestor）所在的包含块。所谓定位，即`position`是`relative, absolute, fixed`。 如果没有最近定位的祖先，那么包含块就是 **`initial containing block`** 。问题的难点就在谁是 **`initial containing block`** ？ 在我的（可能包括很多人）潜意识里，`initial containing block`显然就是``。可以看个例子： ``` html body{height:...

### 2. `-webkit-overflow-scrolling` `-webkit-overflow-scrolling: touch;` 在触屏设备上采用基于动量（momentum-based）的滚动。直觉上就是手指离开屏幕后滚动不会立即停止，会根据你之前的滑动速度继续减速滚动一段距离，和一般的 natvie 应用上的滚动类似。 ### 3. `overflow: auto;`在某些情况下总是出现滚动条（内容高度不大于容器高度） ```pug div(class='container') canvas(class='content') ``` 当 `container` 和 `content` 的高度相同，而 `container` 设置 `overflow: auto;` ，为什么滚动条总是出现？ 以下是 codepen 地址： See...

### 4. flexbox 布局中剩余空间分配的问题 hybrid 开发中碰到的一个 flexbox 布局问题： 上中下三栏布局中，上下固定高，中间`flex-grow: 1`（中间块 `overflow: auto`，其内容较多时可滚动），结果导致上下被挤压。 原因就是 flexbox 布局中剩余空间分配的默认规则跟我们小的不太一样，我们要正确设置 `flex-shrink/flex-grow/flex-basis`。 这篇文章可以一看，对剩余空间分配讲解的比较清楚： #### 什么是剩余空间呢？ 具备flex环境的父容器，通常是有一条主轴和一条侧轴，默认情况下主轴就是水平从左向右的，侧轴是垂直从上到下的（类似书写模式）。 剩余空间就是父容器在主轴的方向上还有多少可用的空间。 ```html ``` 假设 `container` 高度 500px ，那么剩余高度就是 `500px -...

### 5. CSS 规则不起效？ 同事碰到这样一个问题：如下代码，chrome 查看开发工具，发现 `.btn` 里的样式起效了，`.btn.disabled` 却完全不起作用。 ```html ``` ```css .btn { rules } .btn.disabled { rules } ``` 试过各种办法，包括重写 rules 都没用。然后同事删掉所有 css 代码重写，终于没这个问题了。 所以到底什么原因？ 结合以前碰到过的问题，我觉得应该是字符显示／编码问题。让同事恢复到有问题的版本，复制选择符测试： ```js `.btn...

### 6. `` 标签不能嵌套 `` 标签嵌套是非法的，详见 [Are you allowed to nest a link inside of a link?](https://stackoverflow.com/a/9883044) **如果嵌套，浏览器将不会“正确”解析元素层级关系：外部的 `` 会在内部 `` 前提前闭合。** 参见

### 7. table 布局 等宽/等高布局是常常碰到的需求，flexbox 也可以很容易地满足需求；但在需要兼容IE9等不能使用 flexbox 的情况下，table 布局是个不错的选择（兼容 IE8）。 table-cell 天然可以等高，但等宽时需注意给 container 加一个 `table-layout: fixed;`。 demo： https://gist.github.com/creeperyang/dcf0ad40624dec5e61441957cb061f2a link: https://stackoverflow.com/questions/10525744/css-table-cell-equal-width

### 8. 永不过时的问题：垂直居中 各个时期垂直居中的方法不尽相同，在 flexbox 之后，我以为不会再重提这个问题，毕竟在 flexbox 下居中实在太容易了。 但没想到，很快旧事重提... 在 Android 中， ```css .box { display: flex; align-items: center; justify-content: center; } ``` 以上代码并不能使`box`内的文字垂直居中。解决方案： ```css .box { display: flex; align-items:...

补充 **line-height** 相关链接： - [Android浏览器下line-height垂直居中为什么会偏离？ - 周祺的回答 - 知乎](https://www.zhihu.com/question/39516424/answer/274374076) - [Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align) - [CSS spec: Calculating heights and margins](https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins) - [line-height 图](https://segmentfault.com/a/1190000003038583)

### 9. `` 使用 flexbox 时在 iOS 9 文字不居中 问题出在某些版本的 safari 不支持 button 作为 flexbox 布局的 container。 详情可见 。 修复方法： ```css display: -webkit-box; -webkit-box-orient: horizontal; ```