1. 移动端 flex 布局下 flex: 1 的 <input> 标签自适应失效
例如这种布局：
左边 input 标签样式为 flex: 1，右边按钮固定宽度，意思是 input 占据剩余空间跟着伸缩。但当屏幕宽度越来越小时，input 宽度不再被压缩，而按钮的宽度被压缩。这是因为 input 有个默认最小宽度（20个字符？），所以导致 flex: 1 不起作用，要想达到效果，需要给 input 标签加上 width: 0 或者 min-width: 0 即可。
同理，在左侧为 div 的情况下，默认也有最小宽度，英文为最长单词的宽度，中文为一个字的宽度：
若想要左边 div 占满剩余空间，也可使用上述处理方式，或者让左边的
word-break: break-all 或 word-break: break-word。
2. 如何让一个宽度自适应的div，使其高度和宽度一致
我们知道 padding 的百分比是基于宽度的，因此我们可以设置 div 的 padding-top: 100%，来强制撑开 div，这样 div 就是一个正方形结构来。缺点是内容必须用绝对定位了。
3. 如何让水平内联布局的列表均以内容最高块对齐
如上图，我们如何让其所有块的高度按内容最高的进行拉伸？这个时候可以使用
flex 布局进行拉伸操作：
.container {
display: flex;
align-items: stretch; // 拉伸到同一高度，默认值，可省略
}
.card {
display: inline-block;
background-color: #DEDEDE;
margin-right: 12px;
width: 200px;
padding: 8px;
border-radius: 12px;
}
效果如下：
若使用 flex-wrap: wrap; 进行换行，则只能保证同一行的高度一致，不同行之间高度不能保证统一。
4. 如何实现渐变色圆角边框
这里使用双层的 background 进行实现，也是最佳实践。
.box {
width: 100px;
height: 100px;
padding: 20px;
color: #fff;
/* 渐变色圆角实现部分 */
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222),
linear-gradient(90deg, #8f41e9, #54fb41);
}
background 由两部分构成:
- 原点和剪切区域都为
padding-box的黑色背景； - 原点和剪切区域都为
border-box的渐变色背景，在上面颜色的底部。
另外：background-clip 除了 border-box/padding-box/content-box 外，还可以设置为 text，以文字内容为剪切区域。
5. CSS层级顺序
- 具有定位属性(
position不为static)的元素层级比普通元素的层级要高，带定位属性的元素之间符合后来居上原则。 z-index仅在定位元素上有效果，且z-index为具体数值时会创建层叠上下文。
6. 如何让覆盖层不响应鼠标事件 pointer-events: none
下图是底部是一个轮播图，上面左右两边各有一个黑色阴影覆盖（使用absolute定位），轮播图可以使用鼠标抓取左右滑动切换，正常情况下在阴影区域操作Swiper不能拾取到动作而无法进行切换，这个时候可以使用 pointer-events: none属性给到阴影元素即可。
7. 如何扩大点击区域
下面按钮的点击区域我们希望往外扩大10px
我们可以使用透明的border来实现。但是由于 background 默认区域是 border-box，会导致按钮变大，因此我们还需要设置背景的剪裁区域：
border: 10px solid transparent;
background-clip: padding-box;
上述方式会占用border，如果我们确实需要border呢，可以通过box-shadow来实现。
最佳实践
最佳实践还是通过伪元素来实现：
.btn:before {
content: '';
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
}
通过此种方式，我们设置任意尺寸、任意位置和形状，甚至可以脱离元素原有的位置。
