写前端代码的时候，CSS 真的是让人又爱又恨。每次遇到那些奇奇怪怪的坑，都想把头发薅光，但解决之后又超有成就感。

一、flex 布局里的 “叛逆” 子元素

之前做一个响应式页面，满心欢喜地用 flex 布局，想着这不得轻松拿捏？结果在调试手机端的时候，直接破防了。页面上几个并排的卡片，在大屏上显示得好好的，一到小屏幕，其中一个卡片突然 “抽风”，疯狂拉伸，把整个布局都搞乱了。

我对着代码反复检查，CSS 样式看起来没毛病啊，display: flex;，子元素也设置了flex: 1;，想着平均分配空间。后来才发现，那个 “叛逆” 的卡片里有个图片没设置宽度，它默认宽度是内容撑开的，到小屏幕空间不够时，就开始 “胡作非为”，把父容器撑爆了。最后给图片加上max-width: 100%; height: auto;，这才让它 “安分” 下来，布局也恢复正常了，真的是被它气笑了。

二、神奇的外边距折叠

有一次给网页加了几个段落，想着用margin设置一下间距，结果发现怎么调都不对劲。明明给每个段落都设置了margin-bottom: 10px;，但段落之间的距离要么是 10px，要么直接 20px，就是没有我想要的每个段落间隔 10px 那种效果。

查了资料才知道，这就是外边距折叠在捣鬼。当两个垂直外边距相遇时，它们会合并成一个外边距，值是其中最大的那个。解决方法也不难，给父元素加上overflow: hidden;或者display: flex;，破坏外边距折叠的条件，段落间距就正常了。当时知道原因后，我直呼 “就这？”，但找问题的过程可太折磨人了。

三、z-index 的 “迷惑行为”

做轮播图的时候，我想让导航按钮浮在图片上方，就给按钮设置了z-index: 10;，图片默认z-index: auto;，按道理按钮应该在上面了吧？结果根本没用，按钮还是被图片盖住。

后来才明白，z-index只有在定位元素（position不为static）上才生效，而且还会受父元素的z-index影响。我给按钮加上position: relative;，这下终于如愿以偿显示在图片上面了。这z-index的规则也太绕了，每次用都得小心谨慎，生怕又出问题。

这些 CSS 的坑真的是防不胜防，每次遇到都要耗费我好长时间去排查。但换个角度想，也正是因为这些坑，才让我对 CSS 的理解越来越深。

标签：无

你的评论