CSS Grid 嵌套在wrapper-div 或body 元素中?

2023-12-01

在这个系列中,他们都使用了包装 div。

MDN - CSS 网格布局

这是必要的吗?如果有,为什么?


包装器的用途有很多,包括:

  • 按语义对元素进行分组,例如分隔页面标题 来自正文 来自侧边栏 来自页脚。
  • 从外观上对元素进行分组,例如使用周围的边框或 常见的背景图像或颜色。
  • 对布局中的元素进行分组,例如使它们全部保持在同一位置 当列彼此相邻浮动时。
  • 启用特殊定位,例如当包装器被赋予相对值时 定位以便包含具有绝对值的子元素 定位。
  • 使在 CSS 和 JavaScript 中指定元素更加方便 通过引用它们的父级,而无需对每个父级进行 id 或 class 子元素。

(注意:上面的var应该全部在一行)

所以在这种情况下,我认为他们都使用了包装 div 只是为了对布局中的元素进行分组。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS Grid 嵌套在wrapper-div 或body 元素中? 的相关文章

  • 使关闭图像出现在 DIV 的右上角

    我想知道如何使一个小十字 闭合 图像出现在 div 的右上角 使用 CSS 和 XHTML 谢谢 你可以这样做 jsfiddle net 7JEAZ 1317 http jsfiddle net 7JEAZ 1317 代码片段 panel
  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 我应该使用 CSS3 媒体查询为视网膜显示设备提供不同的图像尺寸吗?

    之前已经在这里问过许多类似的问题 我相信我的有点独特 我用 JQM Cordova PhoneGap 开发了一个移动应用程序 最初我使用大图像 针对视网膜显示设备 并使用响应式 CSS 根据需要缩小图像 这种方法的问题在于 较旧的设备最终必
  • 嵌套在另一个内联块元素中的内联块元素具有 offsetTop

    我刚开始学习 HTML 现在我有一些代码 例如 div style height 300px width 500px font size 6 div style display inline block background pink wi
  • JavaScript 和 jQuery 以及句点的使用

    我很困惑在引用类名时何时使用类名之前的句点 在此示例中 为什么 active slide 类的第一次使用事先使用了句点 而其他两个则没有 var main function dropdown toggle click function dr
  • 当内容悬停时变为粗体时防止表格扩展

    我正在处理一张表格 其中一个要求是每一行在悬停时变为粗体 我可以正常工作 但是当发生这种情况时 列的宽度会发生变化 有什么办法可以防止这种情况发生吗 table width 100 border 1px solid ccc margin t
  • 使用 CSS 修复自定义字体行高

    在我正在开发的新网络应用程序上使用自定义字体时 我遇到了一个奇怪的问题 这种自定义字体 FF DIN 似乎具有自然垂直的偏离中心的行高 这迫使我放置一些顶部填充黑客来补偿按钮和输入等元素的顶部空间 示例 绿色字体 Helvetica Neu
  • CSS 字体不起作用

    我正在尝试向我的网站添加自定义字体 我尝试了很多事情但没有成功 这是我的CSS代码 font face font family myFirstFont src url ellis ttf body margin 0 padding 0 wi
  • 制作一个透明的圆形按钮,带有不透明边框和文本/字体很棒的图标

    基本上我想要一个性感的 反应灵敏的圆形按钮 它是透明的 这样你就可以通过它看到背景 但有一个不透明的轮廓 这样你就可以看到按钮和不透明的文本 或者也许我会在稍后阶段添加一个字体很棒的图标 这是我的 JS 小提琴 这样你就可以看到我正在尝试做
  • 使用 CSS 显示 div 内容后淡出

    我正在尝试在单击按钮时显示通知 单击按钮实际上会检查电子邮件验证 我知道要显示一个包含错误消息内容的 div 但是 我想淡出错误消息 比如说 5 秒后 我想用CSS来实现它 以下是我的尝试 它只是隐藏了一切 signup response
  • 三行无表 CSS 布局,中间行填充剩余空间

    我需要的是一个包含 3 行的基于像素高度的 div 最上面一行的高度根据内容而变化 底行具有固定高度 中间行填充任何剩余空间 一切都是宽度 100 我一直在努力构建一个 div 和基于 CSS 的布局几个小时 这让我从字面上看seconds
  • -webkit-overflow-scrolling:触摸;无效的属性值

    我不明白为什么这不起作用 我把它放在我的 html 和正文中 它仍然显示无效的属性值并被划掉 我首先尝试在媒体查询中使用它 但它在那里不起作用 有谁知道它对我不起作用的潜在原因 谢谢你 html body width 100 height
  • 关于调试打印样式表的建议?

    我最近一直在为一个网站制作打印样式表 我意识到我不知道如何有效地调整它 在屏幕布局上工作时有一个重新加载周期是一回事 更改代码 命令选项卡 reload 但是当您尝试打印时 整个过程会变得更加困难 更改代码 命令选项卡 reload pri
  • 如何使h1标签以其实际宽度居中

    我需要使 h1 标签居中 还需要在其周围制作边框 为了防止占用更多宽度 我给出display inline block但标签没有响应text align center then h1 text align center border 1px
  • Position:fixed 内的position:fixed: 哪个浏览器是正确的?

    将固定元素放置在另一个固定元素内的行为在 Chrome Safari 与 Firefox 中有所不同 这个答案很好地解释了预期的行为 https stackoverflow com a 28576596 1437016对于相对 div 内的
  • 标题的固定高度和更改宽度(HTML 表格)

    我需要确保表格标题的高度是固定的 并且宽度是根据标题单元格内容进行调整的 标题文本最多显示两行 我们如何使用样式来做到这一点 另外 我想确保表行的宽度与标题行的宽度相同 即标题行决定宽度 注 目前 交易部门负责人别名 是按行排列的 它需要分
  • CSS flex-basis: 0% 与 flex-basis: 0px 有不同的行为

    根据MDN https developer mozilla org en US docs Web CSS flex the flex 1应设置简写flex basis 0 然而 它实际上设置了flex basis 0 更令人惊讶的是 这有不
  • 调整大小后获取实际图像大小

    我有一个充满缩略图的页面 用 css 调整大小150x150 当我单击缩略图时 页面变暗 并且图像以其真实尺寸显示 目前 我必须手动创建一个包含所有图像的实际高度的数组 为了解决设计问题 减少画廊的手动操作 我需要在调整图像大小 CSS 后
  • 自定义字体有时在 IE8 / IE7 中以斜体呈现

    在 IE7 和 IE8 中 当使用自定义 Web 字体时 文本有时会以斜体呈现 即使我明确设置font style normal 这个问题是偶发的 它会渲染几次 然后我刷新 一切都是斜体 然后我刷新 它恢复正常 我正在用这个 font fa
  • 如何显示不同页眉的页面? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在为我的学校项目开发网站 但我遇到了一个问题 我在每个页面上显示一个标题 我的标题之一包含登录表单 另一标题包含用户名 搜索栏等 问题是

随机推荐

  • 如何自定义人性化Moment js日期结果

    我想用 moment js 自定义人性化的日期结果 假设我有一个约会 我想利用剩余时间 3 个月内 返回结果 moment 20141001 YYYYMMDD fromNow in 3 months 我如何自定义结果字符串 例如3 mont
  • 如何访问 Angular 2 组件和服务中的常量?

    我有一个常量文件常量 ts export const C0NST constant 我在服务中访问它一些服务 ts像这样 import C0NST from constants console log C0NST constant 但是 当
  • 我如何改进我的 opencv 程序以仅检测人行横道?

    我想检测下图中的人行横道 并用红色填充它 但程序也会检测其他东西 这是我的代码 import cv2 import numpy as np img cv2 imread zebra lane jpg cv2 imshow kep img i
  • 为什么 iOS 9 中纬度和经度显示为零?

    我必须找到当前位置并且我正在使用此代码 CLLocationCoordinate2D getLocation locationManager CLLocationManager alloc init locationManager dele
  • 一个单元格中多个条件的 Excel 匹配索引

    我有一个电子表格 它是根据 Microsoft Sharepoint 中的数据自动填充的 不幸的是 这些数据填充了我的位置列 如下所示 IND ENG USA 例如 如果该特定输入有 3 个位置 然后 我使用下拉框 通过数据验证制作 来过滤
  • 如何修复此正则表达式以便它正确替换 * (在单词之间)?

    我正在练习正则表达式 我想创建正则表达式 into em 就像使用 Markdown 一样 el el replace b g em el el replace b s g 1 em 这在大多数情况下都有效 但是 如果您将正则表达式应用于此
  • 如何将变量的值放入字符串中(将其插入字符串中)?

    我想放一个int into a string 这就是我现在正在做的事情 num 40 plot savefig hanning40 pdf problem line 我必须为几个不同的数字运行该程序 所以我想做一个循环 但是像这样插入变量不
  • For 循环除数

    对于 C 我是一个业余爱好者 但我已经收到了一项超出我知识范围的任务 任务是输入数字 n m 程序必须将其视为一个区间 在区间中检查是否存在相同指数的数字之和 编辑 15 10 18 事实证明我没有正确理解我的任务 这里是 用户输入两个数字
  • 使用 SQL JOIN 和 COUNT

    假设有两张表 一张保存用户信息 一张保存某种类型的用户记录 例如收据 用户和收据之间存在一对多的关系 检索用户 按最大收据数量排序 的最佳 SQL 方法是什么 我能想到的最好方法是使用 join 和 count 返回用户数组及其相关收据数量
  • on:click 在 Svelte 中更新 DOM 时不起作用

    The send random 当我将其添加为新添加的 DOM 中的指令时 它不起作用 for let i 0 i lt items length i data div class block received span class ite
  • Selenium WebDriver CSS 选择器帮助 - 用于选择日期

    我需要从小窗口中选择日期 下面是 html 代码示例 有人可以帮我通过 CSSSelector 或任何其他最适合执行此任务的方式选择日期吗 td class a class ui state default href 1 a td td c
  • Bootstrap - 5 列布局

    我正在尝试获得 5 列全宽布局 但找不到适合我需求的解决方案 这是我使用的代码 div class container div class row div class col lg 12 style border 1px solid red
  • 如何共享 Facebook 页面选项卡内部页面的内容?

    我正在尝试共享页面选项卡内部页面上的内容 此页面上的每个项目都有一个 赞 按钮 我想将用户重定向到该页面并通过 JS 滚动到该项目 我最好不要透露该网站的真实网址 换句话说 分享这样的事情 问题是当我尝试分享上面的网址时 Facebook
  • NSData 存储在某处

    最近我创建了一个帖子 NSData 缓存例程 但是 现在我想更具体地说明我的要求 你看 我有 轮播 这实际上是一个有 7 个图像的滚动视图 当它第一次出现时 它会从互联网加载图像并自动滚动 我的问题是 我不想每次滚动时都加载图像 幸运的是
  • 获取我的 wifi IP 地址 Android

    当手机连接wifi时 如何获取手机的ip地址 我找到了一个方法here但即使我在 wifi 下 它也会返回类似 24 182 239 255 的东西 并且我期望类似 192 168 1 10 的东西 我想要这样的东西 if you are
  • 封送切片结果为字符串

    我正在尝试对一部分进行 json 编码uint8值 但这样做会产生字符串 举个例子 这个 d uint8 1 2 3 4 data err json Marshal d fmt Println string data err 结果是 AQI
  • Firefox 中的全屏背景图像

    我有一个覆盖浏览器屏幕的整个宽度和高度的背景图像 它在 Chrome 和 IE 中工作 但在 Firefox 中图像被下推 有什么想法发生了什么吗 CSS HTML div img src http image iloqal com lib
  • 如何从 Telegram 获取公共频道的消息

    我需要阅读电报应用程序中一些公共频道的消息 我想将电报频道文本存储在文本文件中 我想使用Python 我尝试过电视马拉松 但它太复杂了 我的代码有一些错误 from telethon tl functions messages import
  • 有没有办法返回当前登录的设备用户数?

    有没有办法计算出有多少用户使用 devise 主动登录 Rails 应用程序 轨道3 1 gem 设计 gt 1 4 gem dm devise gt 1 5 with 数据库可验证 我正在专门寻找 ruby 代码 由于与登录相关的所有信息
  • CSS Grid 嵌套在wrapper-div 或body 元素中?

    在这个系列中 他们都使用了包装 div MDN CSS 网格布局 这是必要的吗 如果有 为什么 包装器的用途有很多 包括 按语义对元素进行分组 例如分隔页面标题 来自正文 来自侧边栏 来自页脚 从外观上对元素进行分组 例如使用周围的边框或