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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券