使用 CSS Grid 和百分比 Margin 实现响应式 Div 边框效果

本文将介绍如何使用 CSS Grid 布局和百分比 margin，实现一个响应式的 div 边框效果。通过将元素放置在 Grid 中，并结合百分比 margin，可以确保边框与内容之间的间距在不同屏幕尺寸下保持一致，从而实现更好的用户体验。本文提供详细的 CSS 代码和 HTML 结构示例，帮助你轻松实现该效果。

需求分析

目标是在一个 Gallery 上方创建一个响应式的 “边框” 效果，该 “边框” 实际上是一个 div，并且需要响应不同的屏幕尺寸。核心问题在于如何让 Gallery 始终位于 “边框” 的下方，并且两者之间存在一定的间距，且这个间距能够随着屏幕尺寸的变化而自动调整。

实现方案

使用 CSS Grid 布局将包含 “边框” 的元素放置在一个容器中，然后使用百分比 margin-top 来调整 Gallery 的位置，使其始终位于 “边框” 下方并保持响应式间距。

代码实现

首先，我们需要 HTML 结构：

立即学习“前端免费学习笔记（深入）”；

<div class="container">
<div class="hovertrigger" id="hovertrigger1"></div>
<div class="logoanim" id="logoanim1"><img src="http://lilphil.de/wp-content/uploads/2022/08/Comp-1.gif"  class="wp-image-536"></div>
<div class="logo" id="logo1"><img src="http://lilphil.de/wp-content/uploads/2022/08/Comp1_00000.jpg"  class="wp-image-587"></div>
</div>
<div class="wp-block-gmedia-gallery gmedia-shortcode" id="gallery1">[gmedia id=13]</div>

然后是 CSS 样式：

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
blend-mode: lighten;
z-index: 100;
pointer-events: none;
position: relative;
mix-blend-mode: lighten;
}
.logo {
grid-area: 1 / 1 / 6 / 5;
text-align: center;
z-index: 400;
opacity: 1;
pointer-events: none;
height: 100%;
width: 100%;
}
.hovertrigger {
z-index: 1000;
grid-area: 1 / 1 / 4 / 5;
width: 100%;
height: 50%;
pointer-events: auto;
background: none;
}
.logoanim {
grid-area: 1 / 1 / 6 / 5;
text-align: center;
z-index: 500;
opacity: 0;
pointer-events: none;
height: 100%;
width: 100%;
}
#gallery1 {
margin-top: -38%; /* 使用百分比 margin */
}
#hovertrigger1:hover~.logoanim {
opacity: 1;
}
#hovertrigger1:hover~div.logo {
opacity: 0
}
.wp-image-536 {
height: 100%;
width: 100%;
object-fit: cover;
}
.wp-image-587 {
height: 100%;
width: 100%;
object-fit: cover;
}

关键在于 #gallery1 的 margin-top 属性，这里使用了 -38%。这个百分比值需要根据实际情况进行调整，以达到最佳的视觉效果。

代码解释

• .container: 使用 display: grid 创建一个 Grid 容器，定义了 4 列和 5 行的网格。
• .hovertrigger: 作为 “边框” 的 div，占据网格的一部分区域，并设置了 pointer-events: auto，使其可以响应鼠标事件。
• #gallery1: 通过 margin-top: -38% 将 Gallery 向上移动，从而使其与 “边框” 之间产生间距。由于 margin-top 使用了百分比值，因此这个间距会随着屏幕尺寸的变化而自动调整，从而实现响应式效果。

注意事项

• 百分比值的调整: margin-top 的百分比值需要根据实际情况进行调整，以达到最佳的视觉效果。可以尝试不同的值，并在不同的屏幕尺寸下进行测试。
• 其他元素的样式: 确保其他元素的样式不会影响到布局。例如，如果其他元素设置了固定的高度或宽度，可能会导致布局出现问题。
• 浏览器兼容性: 虽然 CSS Grid 布局的兼容性已经很好，但仍然需要注意一些旧版本浏览器的兼容性问题。可以使用 Autoprefixer 等工具来自动添加浏览器前缀。

总结

通过使用 CSS Grid 布局和百分比 margin-top，我们可以轻松地实现一个响应式的 div 边框效果。这种方法不仅简单易懂，而且具有很好的灵活性和可维护性。在实际开发中，可以根据具体的需求进行调整和扩展，以实现更加复杂和精美的布局效果。