CSS经验整理

1、如何重写input radio、checkbox样式？

2、inline-block元素设置了overflow:hidden后，它的兄弟元素（也是inline-block）出现了下沉，两者没有水平对齐。

原因：inline-block默认的对齐方式baseline(基线对齐)。 正常情况下，line-block元素的基线是其内部最后一个行内元素基线。 在内容非空或者overflow不为visible的情况下，它的基线是其下边距。 inline-block设为overflow:hidden后，因为要遵循基线对齐，另一个元素就向下偏移了。 解决： 方案1：设置为浮动元素，浮动元素的display默认为block，就不遵循inline-block的baseline对齐规则了。 方案2：修改vertical-align:top，不是基线对齐自然就不会下沉。 方案3：也加上overflow:hidden。

3、穿透的 div ( pointer-events: none )

禁用 HTML 元素的 hover/focus/active 等 和鼠标行为说拜拜┏(＾0＾)┛ 使用场景： 1)防止透明元素和可点击元素重叠不能点击; 2)点击提交按钮的时候，为了防止用户一直点击按钮，发送请求，当请求未返回结果之前，给按钮增加 pointer-events: none。

4、-webkit-text-size-adjust:100%;

解决移动端微信字体被自动放大的问题

5、-webkit-tap-highlight-color:transparent;

改写iOS Safari中可点击元素的高亮颜色

6、background-clip: content-box;

设置元素的背景（背景图片或颜色）是否延伸到边框下面 使用场景： 解决选中时active状态，背景要出现在元素外时的情况

7、IE兼容问题：

1）IE9以下版本浏览器对HTML5新增标签不识别 解决的办法：给新标签加上{display:block} 其他：https://juejin.im/post/5b04124151882542c83315d8