前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 陷阱

CSS 陷阱

作者头像
云游君
发布2021-05-21 10:58:44
3230
发布2021-05-21 10:58:44
举报
文章被收录于专栏:云游的小教程

CSS 的奇妙 Bug

FAQ

Margin 塌陷

DEMO: Margin Collapse

See the Pen Margin Collapse by YunYouJun (@YunYouJun) on CodePen.

父子间

添加 overflow: hidden;

兄弟间

添加 float:left;

transform 后 z-index 属性失效

Demo:

See the Pen transform vs z-index by YunYouJun (@YunYouJun) on CodePen.

原因主要是 transform 新创建了层叠上下文,影响了正常的 z-index

解决方案:添加 transform-style: preserve-3d;,使之变成 3d 显示方式。再通过 transform: translateZ(-1px); 来控制层级顺序。

img 与父级元素下边框存在空隙

Demo:

See the Pen img space with father by YunYouJun (@YunYouJun) on CodePen.

可以看到在底部,背景的红色透了出来。 其主要原因是文字默认的行高所产生的问题。(参见 demo)

解决方案:默认的 vertical-align 属性为 baseline,我们只需要为 img 添加 vertical-align: bottommiddle | top | bottom 都可以)。

CSS 深入理解 vertical-align 和 line-height 的基友关系


To Be Continued.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-06-27-,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • FAQ
    • Margin 塌陷
      • 父子间
      • 兄弟间
    • transform 后 z-index 属性失效
      • img 与父级元素下边框存在空隙
      相关产品与服务
      图像处理
      图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档