开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS网格问题。我需要在页面的中心放置两个相互偏移的正方形。

要在页面中心放置两个相互偏移的正方形，你可以使用CSS Grid布局来实现。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Centered Squares</title>
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 100vh;
            width: 100vw;
        }
        .square {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .offset-square {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: -50px; /* Adjust this value to change the offset */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="square"></div>
        <div class="offset-square"></div>
    </div>
</body>
</html>

解释

容器（.container）:
- display: grid;：将容器设置为网格布局。
- place-items: center;：将网格项在容器中水平和垂直居中。
- height: 100vh; 和 width: 100vw;：使容器占据整个视口的高度和宽度。

正方形（.square）:
- 设置宽度和高度为100px，并设置背景颜色为蓝色。
偏移正方形（.offset-square）:
- 设置宽度和高度为100px，并设置背景颜色为红色。
- margin-left: -50px;：通过负边距来实现偏移效果。你可以根据需要调整这个值来改变偏移量。

应用场景

这种布局方式适用于需要在页面中心展示多个元素，并且这些元素之间有特定的相对位置关系的场景。例如，仪表盘、游戏界面、信息图表等。

参考链接

通过这种方式，你可以轻松地在页面中心放置两个相互偏移的正方形。如果你有任何其他问题或需要进一步的调整，请随时告诉我！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS进阶03-定位体系，格式化上下文，常规流

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。） 1....在打印媒体类型中，即便页面是通过视口来访问的（比如打印预览），盒也渲染在所有页，并且根据页盒固定。其他媒体类型中则未定义此表现。开发者可根据依赖媒体来指定 fixed 。...BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。 BFC拥有如下特性：内部的Box会在垂直方向，从顶部往下一个接一个地放置。...IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC。每个IFC对外表现为块级元素，与div垂直排列。...4.6 RFC RFC的英文全称是：Ruby Formatting Contexts。这一块我暂时没去研究。

1.7K1 0

Dash应用页面整体布局技巧

内容布局下面的例子中展示了最基础的页面布局方案，由页首及其下方的内容区域构成：其中页首左侧部分我们可以用来放置应用的logo图片、应用名称等信息，右侧部分则可以放置一级导航菜单栏等内容，为了快捷实现其中各元素的垂直居中...，可以利用css中的calc()动态计算高度，即页面视口整体高度100vh减去页首部分占据的64px高度：本示例完整代码见文章开头附件地址中的app1.py。...示例2：粘性页首+内容布局在前面的示例1中，若页面内容区域较长，页首部分会随着用户滚动页面而被滚上去，如果我们希望应用中的页首部分一直紧贴页面顶端，就像下面的示例2所示：最简单的方式就是在前面示例...示例3：固定的侧边菜单栏+粘性页首+内容布局在前面的两个例子中，我们的页面中充当导航作用的只有位于页首右侧的一级导航菜单栏，如果我们的应用功能进一步复杂起来，需要在当前一级菜单栏对应页面下再设立二级导航菜单...，经典的方式是像下面的例子那样，在原本的内容区中分出一部分宽度放置侧边菜单栏：且为了更现代化的交互效果，新加入的侧边菜单栏是处于固定状态的，与内容区域相互独立：要实现这样的经典页面布局效果，我们只需要在前面示例

5272 0

搜索新规则下，移动端如何优化？

移动端页面图片，建议采用正方形比例。这样方面搜索引擎抓取该页面的图片，并在百度搜索结果页面进行展示。...三、JS代码加载内容需规范对于移动端页面的JS，很多同学并没有像PC端那么去重视。...对于JS，我只说一句话：不管是PC还是移动，JS只封装与该页面主题无关的内容，并且放置页面页脚底部，进行加载，若非必须提前加载，统统放在页脚。...四、URL要规律，无效参数要删除对于URL的问题，我以前写过一篇《这9种URL错误对SEO优化有致命影响》，各位同学可以直接看看这篇文章，写的是比较全面的。...，正常情况下两周内可以自然恢复，如超期还没有恢复，需要在百度站长平台反馈中心中提交案例，后台工作人员会根据案例查询问题，告知解决方案。

8726 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。 01....通过使用 Flexbox 实现此效果，您不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。...您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。...不过，我确实想提及这一点，因为这是一个经常遇到的问题。这只是简单地保持图像的宽高比。使用 aspect-ratio 属性，当我调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。

4.6K2 0

多端排版杂谈

以table为主架构的排版，可以放置各种控件随着table的大量使用，更多的布局风格让table代码、结构臃肿的问题越来越突出；早在2000年，以div+css的排版方式已经开始进入开发者的视线；在现在看来...更为灵活的div+css排版后面很长的一段时间里，开发者一直徘徊在多浏览器间的排版渲染差异上面，为寻找更多的hack办法而坚持不懈，我相信如果针对该类问题去总结一本书，那必定是很受欢迎的在当时。...使用Grid Layout排版的表单这似乎跟table排版有些相似，起码网格式的排版思想是一样的，不过我想下面的意图应该才是定制该标准的意图： 1、页面扁平化，开发者以后的排版尽可能要从全局化考虑...，如何制定最合适的格子，减少不必要的层级嵌套； 2、削弱元素与元素之间的相互依赖，过去由于流体排版的特性，当一个元素的排版发生变化，相关联的元素都会受牵连而导致重排，网格却可以减少元素与元素的依赖关系，...，而且当布局变得复杂，相互的依赖关系也会变得复杂，后续的代码维护也变得越来越不可维护。

1.2K7 0

【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

定位布局什么是定位布局：标准文档流和浮动布局都只能在水平或垂直方向布局元素，但现实是，我们可能需要在上下左右几个方向上同时偏移元素，定位布局正是为了解决这一问题而设计的。...通常情况下，元素的 z-index 属性值都是 0 ，并且定位布局中的元素会覆盖标准流中的元素，同在定位布局中的元素，写在后面的会覆盖写在前面的元素。...格式上下文 Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，有一套渲染规则决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...BFC 的布局规则例如以下：内部的盒子会在垂直方向，一个个地放置；盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠；每一个元素的左边...IFC 的布局规则例如以下：内部的盒子会在水平方向，一个个地放置，水平的外边距，内边距，边框是可以有的； IFC 的高度，由里面最高盒子的高度决定；当一行不够放置的时候会自动切换到下一行；根据 vertical-align

1.6K3 0

「Shiny」应用程序布局指南

侧边栏布局侧边栏布局是许多应用非常有用的起点。该布局提供了一个侧边栏用于放置输入控件和一个大的主区域放置输出控件。 ?...要在网格中创建行，请使用 fluidRow()函数；要在行中创建列，可以使用column()函数。例如，考虑这个高层次的页面布局（列宽和为 12）： ?..."sidebar" ), column(10, "main" ) ) ) 列偏移还可以偏移列的位置，以实现对UI元素位置的更精确控制。...每增加一个单位的偏移量，就增加一列的左距。考虑一下这个布局: ?...响应布局 Bootstrap 网格系统支持响应式CSS，它使您的应用程序能够自动调整其布局，以在不同大小的设备上查看。响应式布局包括以下内容：修改网格列宽。在必要之处堆砌而不是浮动组件。

7K3 2

CSS3、JS 探索三维粒子

概念用很多小的移动部件制作动画是非常有趣的。对每个部件或组应用不同的时序偏移和缓冲可以使一些有趣的可视化。...我的目标是显示一组基本的粒子运动能达到什么效果，而最小的是three.js的弯曲。调试模式：网格，相机和时间刻度要进入调试模式，请单击右上角的调试图标。...粒子位置由单纯的噪声设置，在两个边缘附近逐渐变小。随着时间的推移，线条在z轴上旋转并前后移动。 3: 圆分离这个演示将一些简单的物理应用于每个粒子。...他们都在中心产卵，然后彼此推开，使他们都有自己的空间。 4: 扭转双螺旋这个演示显示了一个双螺旋，就像是一个简化的DNA可视化。旋转时正在扭曲和解旋。...每个粒子都有一条随机长度的弧线。 7: 正方形格子混合这个演示显示了基于它们的位置被拉伸的框。每个盒子的移动稍微偏移。四个不同的颜色框彼此紧密放置，并与添加剂混合混合以创建白色。

4K1 0

前端-CSS Grid中的陷阱和绊脚石

也许它来自于网格系统的使用，比如在Bootstrap或Foundation，大家关心的是一个整体网格上放置项目。这当然是使用网格布局的一种方法。不过，我还是会考虑在上一节提到的不同之处。...重要的是你想在布局里面的项目分配空间和相互关联。网格轨道大小是否由内容来决定？我们已经看到了如何在使用网格布局时，在容器上设置网格和网格大小。但是，网格中的项可以指定网格轨道大小。...下面的这个示例中，我在网格中通过伪元素来完成，将其放置在基于行的位置，然后添加一个背景和边框到该网格区域。...在 CSS WG上有一个关于这方面的问题，所以你可以在这里参加讨论，把你的想法与大家一起参与讨论。跨越到网格的末端网格布局具有隐式和显式网格的概念。...在接下来的几个月的时间里，我还将在Smashing Magazine中深入探讨网格布局相关的问题。

4.8K2 0

CSS Grid 那些鲜为人知的内幕

❞ 下面的页面结构是我们常见的「圣杯布局」使用 Grid来实现该布局，我们只需要在...在这种情况下，额外的空间已经减少了16px，以用于设置gap。隐式和显式行隐式行如果我们向一个两列网格添加「超过两个子元素」会发生什么呢？从结果来看，gird将第三个元素放置到了第二行。...键盘用户的注意事项 ❝在处理网格分配时存在一个重要的问题：Tab 键顺序仍然基于 DOM 位置，而不是网格位置。 ❞ 通过一个示例会更容易理解。...为了解决这个问题，我们应该重新按视觉顺序在 DOM 中重新排列网格子项，以便我可以从左到右，从上到下进行 Tab 键浏览。 6....：在每个网格项之间放置相等量的空间，两端的空间为一半大小 space-between：在每个网格项之间放置相等量的空间，两端没有空间 space-evenly：在每个网格项之间放置相等量的空间，包括两端

1571 0

关于 CSS 反射倒影的研究思考

这篇文章主要探索现有的制作反射倒影的方法、举例说明可能的解决方案、跨浏览器问题以及我的一些想法。...用 SVG 来代替 CSS 渐变并没有遇到太多问题。让我们尝试一下其他的角度。在下面的可交互 demo 中，左侧是一个 CSS 渐变，右边是一个SVG 渐变。...我们如之前一样放置这些竖条的位置。...我们可以通过增加 loader 元素的尺寸来修复这一问题（伪类元素不受影响）： SCSS $loader-w: ($n + 1) * $bar-w + $bar-h; 但是我们对于其余的两个问题就束手无策了...为了制作可以放置在图像背景 background 上的渐变反射，我们不能替换成 SVG 的方案（其自身也有很多问题）。哪一种方案更好？

2.5K9 0

nicegui布局细节补充——绝对定位，固定定位

首先快速做一个卡片界面：行9：这里我全用 tailwind css 类名，设置一样的宽高( w-[4rem] h-[4rem] )，加上让正方形的4个角圆弧填满( rounded-full ) ，就成了一个圆形...布局相关样式不再展开说明，相关知识回看前面的章节可以看到，每个元素会占据自身的空间。但我们希望数字图案可以脱离这种规则，它可以很容易放置在容器(卡片)任意角落。...top , right , bottom , left ，可以用百分比，参照物是父容器的宽高设置目标元素的偏移。...但是要记住的东西也太多了吧！我们可以参考别的 ui 框架做一些简单的封装。比如下方的函数功能：原理很简单，两个参数 x 和 y ，范围 -1 到 1 之间。控制图形的绝对位置。...并且以自身中心为圆点。看原理图：

8931 0

有趣的 CSS 像素艺术

创建网格第一件事，我们需要一张绘制我们像素化作品的画布。我们有多种方式来创建网格。一种方式是使用标准的 HTML 元素，它的每一行都包含固定宽度的单元格。...比如我们画一个八行八列的完美的正方形。如果我们设置每一个单元格 10px 宽，那么我们会得到一个 80X80 的表格。...如果想获得更大的画布就给单元格一个更大的尺寸。如果想从 8-bit 分辨率改成 16-bit 的分辨率，只需要将表格的每一行的单元格数量翻倍。另外一种建立网格的方法是用两个 div 代替表格。...为此，可以通过将每行的像素数和每列像素数相乘得到。举例来说，如果和上面一样创建 80px 的正方形，并且希望得到 8X8 像素的网格，就可以算出总共需要 64 个像素点。...如果你声明一个 box-shadow 的垂直和水平偏移，而没有模糊值及阴影半径，你将得到一个可以随意移动的元素形状的彩色复制体。以下是概念实例。

1.2K7 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

例如，在上一个示例中，我添加了 margin-bottom:1rem 在两个堆叠的元素之间添加垂直间距。...按需定制我真正喜欢CSS Grid 的地方是 grid-gap 只在需要的时候才会被应用。考虑下面的模型。 ? 没有CSS网格，就不可能拥有这种灵活性。...-- --> .card__content { padding: 10px; } 上面的 padding 将向其中的所有子元素添加一个偏移量...在这种情况下，我倾向于向元素添加一个 margin-right，这样可以防止它们相互接触，从而加快 flex-wrap 的工作速度。 ?...它应该是灵活的。间距可能在X页上，但不在Y页上。我在检查Facebook的新设计CSS时首先注意到了这一点。 ?

12K1 0

Jump Start Bootstrap 第2章

网格系统允许我们适当地为我们的网站内容提供服务；它将屏幕分成多个行和列，这些行和列可以用来创建各种类型的布局。一旦定义了行和列，我们就可以决定将哪个HTML元素放置在何处。...根据您的设计需求，您可以创建无限数量的行。这些行和列的交点形成了一个矩形网格来包含网站的内容。例如，在图中，我创建了一行，然后使用网格系统把它分成12列。我已经改变了每一列的背景颜色来区分。...因此，我们重新设计了用于平板模式的线框，如图所示 ? 在这个设计中，我们看到标题看起来与桌面模式相同。下面的帖子现在被包含在一个两栏的布局中，而不是三个。接下来，我们需要在移动设备上查看相同的网站。...这两个新列现在被放置在第一列中。...诸如嵌套、偏移和重新排序的功能，也让网格系统变的更强大。

2.9K4 0

18种PCB设计特殊布线的画法与技巧！

栅格设置与捕获在 Altium Designer 中可视化网格和电气网格可以按捕获网格的倍数来设置（Design>>Board Options）。 ? 10....反转尺寸（宽度/高度）：设置反转文本矩形框的宽度和高度版面调整：定义文本框中文字的相对位置反转文字的偏移：定义反转文字相对矩形框的偏移量 ? 11....单层操作与定制操作对于纷乱的器件布局，已经很是麻烦如果要在混乱中走线，实属不易，在 AD 中可以使用 shift+s 解决这一问题（PCB 编辑状态下）： ?...我知道 AltiumDesigner 本身可以通过快捷键“shift+v”在走线过程中调用你填写好的各种尺寸过孔，但我单独放置过孔，要想改尺寸的话，要按 Tab 键后改写过孔尺寸的数据，非常麻烦。...改用下面的方法： ? ? 本来 Altium 放置过孔默认用快捷键“P”+“V”，我现在用小键盘区的“.”来实现同样的功能： ? 14. 多层线的操作有些人问这样的线是怎么画出来的： ?

2K2 0

二维布局：Grid Layout

简介 CSS Grid Layout，旨在完全改变我们处理网格的方式，它是二维表格系统。CSS 经常被用来布局，即使它表现得不是很出色。...想象一下，定义整个页面的布局，然后只需几行 CSS 就能完全重新排列它来适应不同的屏幕宽度，Grid 是有史以来最强大的 CSS 模块之一。...下面的网格轨道就是第二条和第三条行线之间的空间。网格单元两个相邻行和两个相邻列网格线之间的空间。它是网格的单个“单元”。这是行网格线1和2以及列网格线2和3之间的网格单元。...（ grid-auto-columns， grid-auto-rows 和 grid-auto-flow），这可能是你想要在大多数情况下做的，所以建议使用网格属性而不是网格模板。...如果您没有明确放置在网格上的网格项，则自动放置算法会自动放置项目。

4.3K2 0

2017年值得学习的3个CSS特性

1.Feature Queries 前段时间，我写过关于Feature Queries的一篇文章，叫“我最想要的CSS特性之一”。好了，现在它已经出现在这里了。...清晰的项放置一个网格是由Grid Container（用 display: grid 创建），和Grid项（这是子项）构成。...在我们的CSS中，我们可以容易并且清晰的组织网格项的放置和顺序，而不用管他们在标记中的放置。举个例子，在我的文章“使用CSS网格的圣杯布局，我展示一下我们如何使用这个组件来创建类似的“圣杯布局”。...CSS网格组件介绍了一个新的长度单位 fr ，它表示网格容器中剩下的自由空间的一小部分。...例如，在圣杯布局中，我想要 main 容器占据除了两个侧栏之外剩下的空间，为了实现这个，我简单的写了： .hg { grid-template-columns: 150px 1fr 150px;

7342 0

高速PCB布线的原则

如果线中心距不少于3倍线宽时，则可保持70%的线间电场不互相干扰，称为3W原则。...主要是为了减少不同电源之间的干扰，特别是一些电压相差很大的电源之间，电源平面的重叠问题一定要设法避免，难以避免时可考虑中间隔地层。...图8.9 差分对的首选分线九、不要在分割平面上路由信号★不正确的信号返回会导致噪声耦合和EMI问题。设计人员在路由信号时应始终考虑信号返回路径。...这类型的设计可以通过放置2个不同的地平面作为参考来布线，可以有效降低噪声。两个平面应准确放置，数字和模拟组件应放置在相应部分下方，如下图所示。...添加图片注释，不超过 140 字（可选）我与春皆过客，你携秋水揽星河。觉得不错，动动发财的小手点个赞哦！关注我，后续干货官方有提醒！

3301 2

聊聊如何对eureka管理界面进行定制化改造

name: lybgeek # 认证的密码 password: lybgeek 仅需这两步，就可以实现一个带有登陆界面的eureka管理界面。...中，如图然后根据我们的需要，进行修改，比如在本示例中，我就新增了一个登出按钮和一个版权信息列表，如下图 05 在进行定制时，可能踩到的坑在自定义登陆页面时，出现如下异常 org.thymeleaf.exceptions.TemplateInputException...06 总结最近和朋友聊天，他知道我所在的公司注册中心还是用eureka的时候，他就很诧异说怎么不用nacos，然后我就问他说为什么要用nacos，他给我的答案是现在eureka已经闭源了，nacos...我所在项目组，eureka作为注册中心，因为注册上去的业务项目就那么一些，用eureka就完全满足需求了。...我这边并不是排斥nacos的意思，毕竟nacos也有一些其他注册中心所不具备的特性，比如动态DNS服务，同时支持AP和CP，nacos2的高性能，这些都是很值得去关注 07 demo链接 https:/

6103 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭