Snook 展示了一个经典的设计,顶部有一个超大的头部,内容区域“拉入”到头部区域。我的想法也一样
从历史上看,我一直使用负边距来实现这一点。头部有一个高度,在底部添加了很多填充,然后主体获得一个
margin-top: -50px
或设计所需的任何值。
如果您在这种情况下匹配margin
和padding
,它不完全是魔术数字,但对我来说感觉仍然不好,因为它们仍然是您需要在完全不同的元素之间保持同步的数字。
他的想法?使用 CSS Grid 构建它。 感觉确实更加稳健。

巧合的是,我正在阅读陈慧静的 “黑色与橙色” 文章,并且该模式也出现在那里。

(我最终 对此制作了一个视频)。