如何不给自己的 CSS 造坑

2020-10-112180

如何不给自己的 CSS 造坑

概述

编码跟语言一样,都很神奇。编程语音和普通语言很类似,都是由一些简单的元素组成,通过若干个简单元素的组合,可以构建一个复杂的世界。

在编程的世界里,很大程度上我们可以随心组合简单元素,正是这种自由赋予我们程序员无限的创造力。不过这种高度的自由也具有两面性,一不小心可能会让自己掉坑里。

想总结一些关于 CSS 的经验,尽可能避坑。

原则

尽可能保持文档流(正常布局流)的正常渲染,不然轻易让元素脱离文档流

容易造坑的方式

如下图所示,设计师经常会出这样的布局,有一个底色(有时可能是一张贴图,不单只是纯色),然后上面铺一个白色,放内容

当然,可以有很多种实现方式,但以下这种影响正常文档流的实现方式不大推荐

整个页面完整的截图如下:

如果去掉, transform 会看到如下效果:

transform 实现如上效果的话,就会留一个坑——底部留出一个空白:

避坑

避坑的方法核心还是围绕原则来实现,尽可能保持文档流。用两层包裹白色区域,第一层用 position: relative; 第二层用 position: absolute;,在第二层用 top 进行位移,并且第一层用高度撑开,模拟正常文档流的形式,避免因使用定位,影响原本的文档流结构和顺序

分享
点赞1
打赏
上一篇:代理工具Fiddler -调试与替换接口状态
下一篇:如何使用nvm管理多个node版本