CSS 负边距定位

2023-12-05

使用负边距进行定位可以吗?我当前的网站中有很多内容,感觉这不是一种稳定的定位方式。我通常也建议使用它们。

例如,我有一个结账页面,其中三个 div 彼此叠置

<div class="A">
   header
</div>
<div class="B">
   content
</div>
<div class="C">
   footer
</div>

(A、B 和 C),它们应该叠放在一起,看起来像是相连的。我这样做是使用:

.B
{
    margin-top: -20px;
}

在 div B 上,与 div A 的底部相接。

这是好的做法还是我应该使用重新编码top and left?


如果您的 div 之间有一些边距,则可能您没有重置边距和填充(请参阅:http://meyerweb.com/eric/tools/css/reset/).

一般来说,使用负边距并不是一件坏事,无论如何,如果你被迫在几乎所有地方设置它们,你可能应该重构你的 CSS,因为不同浏览器的结果可能略有不同,这可能会导致一个大麻烦:) 。

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

CSS 负边距定位 的相关文章

  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 用于生成多色文本的 jQuery 插件,该文本可在悬停时改变颜色

    我想为各种链接生成多色文本 并从预先指定的颜色数组中为各个字母随机分配颜色 当将鼠标悬停在带有文本的 div 上时 颜色会发生变化 我正在考虑一个 jQuery 插件 脚本将是可行的方法 我想知道是否存在这样的插件或近似插件 Thanks
  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display
  • iOS 10.3 safari text-align:调整波斯语/阿拉伯语内容的错误

    在更新到 10 3 之前 我的网站在 iPhone 的所有移动浏览器上都能正常运行和查看 从我将 iOS 更新到 10 3 后 我的内容页面遇到了一个问题 内容被包装在 div CSS 属性为text align justify 我的内容在
  • .addClass 仅添加到无序列表中单击的项目符号

    我有一个简短的无序列表 其中有两个项目符号 我添加了一些 Javascript 这样当我单击项目符号时 它会向其中添加一个类 问题是 它将该类添加到所有现有的 li 中 而不仅仅是我单击的那个 这是 JSFiddle http jsfidd
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa
  • 隐藏选择中的第一个选项[重复]

    这个问题在这里已经有答案了 我在下拉列表中有动态生成的选项 我想隐藏第一个选项 因为不需要 有没有跨浏览器兼容的方法来实现这一点 无论使用 jquery 还是 css 任何解决方案都是好的 Ahmar my drop down select
  • CSS 中的 &::before、&::after 是什么? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想创建一个垂直时间线 然后我发现了这个页面 http cssdeck com labs oz2nu681 http cssdeck
  • 更改特定元素的滚动速度[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 好吧 我不知道如何编写脚本 但是在
  • CSS 双边框,外边框比内边框粗

    在我目前的工作中 我需要在容器上生成双边框 边框样式 双 实现这一点 但是我的客户希望外边框更厚 内边框具有正常厚度 除了创建 2 个 div 其中 1 个嵌套在另一个 div 中 外部 div 具有更大的厚度 或者通过使用边框图像 还有什
  • 更少的编译错误

    我正在使用 Incident57 的 CodeKit 预处理器来编译一系列 less 文件 这些文件将被导入并缩小为一个名为 template css 的 CSS 文件 然而 在进行一些编辑后 我不知道是什么编辑导致了这个 我开始得到non
  • 清理 CSS 抖动

    我已经构建了这些圆圈 当鼠标悬停时它们会扩展边框 我现在遇到的唯一问题是有时圆圈会抖动 摇晃 当我设置transition all 1s ease in out 超过 0 2 秒 有解决这个问题的方法吗 还是事情就是这样 这是其中的代码Js
  • 是否可以使用纯 css 禁用 mat-tab 动画

    我想禁用 Angular Material mat tab 动画 内容滑入到位时发生的动画 我知道可以使用 disabled 属性 但我想知道是否可以使用纯 css 达到相同的效果 EDIT 我们的用户体验团队希望从材质选项卡中删除幻灯片动
  • HTML 文件上传“未选择文件”文本样式

    我正在构建一个需要文件上传的 html 表单 当我让文件上传部分正常工作时 我无法获得表单上传按钮和 未选择文件 文本的样式 我想要的标记是 有办法做到吗 PS 请忽略绿色文本 上传屏幕截图 我有那个工作 当前行为按钮和 未选择文件 位于同
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • 为什么响应式图像需要“高度:自动”?

    是否有必要定义height auto现在 原因是什么 img max width 100 height auto Thanks 在没有明确设置高度尺寸的图像上 它实际上默认为自动高度 所以如果你设置max width 100 高度将由浏览器
  • IE 中的文件上传按钮和奇怪的文本光标行为

    我构建了一个上传按钮 其格式类似于典型的 html 按钮 而不是浏览器标准文件上传表单 该方法是设置锚元素的样式并在顶部覆盖透明文件输入元素 这种方法在除 IE 之外的所有浏览器中都可以正常工作 在 IE 中 当用户单击上传按钮时 会出现一
  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐

  • 如何使用以下访问日志获取 uniq 报告

    Input Severity Warning Missing argument 1 for Pxxer rzxczt v3 mast sdfdsfv ddw hdd nddd system adsdn codsds pr rt v3 php
  • 如何解析 XML 以检索嵌入的文本节点

    我想解析这个 XML 文件 要解析的 XML 文件
  • 为什么不允许“SplFileInfo”序列化?

    我正在尝试存储一个数组SplFileInfo缓存中的实例serialize命令 但该命令抛出此异常 Exception with message Serialization of SplFileInfo is not allowed 为什么
  • Pygame:画线

    在我之前的问题中Python 中的 For 循环函数 我在放置包含为刽子手游戏画线的命令的函数时遇到了麻烦 它并没有完全划清界限 我首先怀疑这是 for 循环或函数的问题 现在我意识到 Pygame 存在一些问题 我尝试在加拿大国家使用此代
  • PDO:用bindvalue和%来准备

    我在各个网站上查看了一个多小时 但无法解决我的问题 所以这是有效的代码 animes array q this gt db gt query SELECT id nom nom id FROM animes WHERE nom LIKE c
  • django 1.11.4 中的错误('datetime.datetime'对象没有属性'split')

    我正在通过官方文档上的教程学习 django 版本 1 11 4 我使用 python 3 6 5 和 mysql8 作为数据库 我还使用 mysql connector django 连接到 mysql 数据库 我尝试制作第一个 Djan
  • 正则表达式。查找包含某个单词的段落

    在这样的文本中 p 1 bla bla em bla em bla bla p p 2 bla bla em bla em bla TEXT bla p p 3 bla bla em bla em bla bla p p 4 bla bla
  • Google App Engine - 单个数据存储大约使用多少配额?

    数据存储放入的延迟约为 150 毫秒 http code google com status appengine detail datastore 2010 03 11 ae trust detail datastore put laten
  • 尝试使用 C# ado,net 将行插入到 sql server 数据库

    我正在尝试在控制台应用程序中使用 Ado Net 在 SQL Server 数据库中插入一行 我正在从键盘读取输入 这是我的代码 private void InsertStudents string con SqlConnection Co
  • Spring + JPA + Hibernate

    我是春天的新手 我正在尝试使用 Spring 3 1 3 和 JPA 2 0 设置简单的 Web 应用程序 我已将所有必需的库添加到 WEB INF lib 中 启动过程中没有错误 但我的 DaoImpl 文件中的entityManager
  • 从项目目录内的文件夹中读取文件

    在 JSP 项目中 我正在从目录中读取文件 如果我给出完整路径 那么我可以轻松读取该文件 BufferedReader br new BufferedReader new FileReader C ProjectFolderName fil
  • for(;;)循环解释

    在 JS 中 我偶然发现了一种 for 循环 它是for 其功能类似于while true 环形 for 循环括号中的分号起什么作用 for statement 1 statement 2 statement 3 code block to
  • scikit-learn 中每个数据分割的交叉验证指标

    我需要为 X test y test 数据的每个分割显式获取交叉验证统计信息 因此 为了尝试这样做 我做了 kf KFold n splits n splits X train tmp y train tmp X test tmp y te
  • 带有辅助工具提示的 EditText

    我在 iPhone 上有这个应用程序 我想使其适用于 Android 在 iPhone 上 当开始在 EditText 中编辑文本时 显示屏顶部会显示带有消息的工具提示 我想让它也适用于 Android 但我没有找不到任何有帮助的东西 这里
  • 如何在c#项目中使用c++ dll? [复制]

    这个问题在这里已经有答案了 可能的重复 在 C 应用程序中使用 C 类 DLL 我尝试在 c 中添加引用以添加 c dll 失败 如果您有任何其他方法在 c 中添加或使用 c dll 我们该如何使用 我在 C 项目中添加 dll 的错误在哪
  • Visual Basic 6 中 Shell 进程的标准输出读取

    首先 我要声明我不是 Visual Basic 6 专家 我的需要是 从 VB6 客户端代码启动外部 exe 文件 等待该过程完成 并在执行期间 即时 读取来自其标准输出的消息 以便我可以将其打印在文本文件小部件或类似部件上 我想知道是否有
  • 带有本地 docker 的 Jenkins 服务器

    我的 CI 实施有问题 我安装了 Jenkins 服务器并创建了构建管道 来自本教程 https getintodevops com blog building your first docker image with jenkins 2
  • php 邮件附件

    我一直在使用这个脚本向某些员工发送电子邮件 但由于我的系统发生了变化 我现在必须随电子邮件发送附件 并且我已经尝试了多种代码来完成此操作 但没有成功 我仍然收到电子邮件 但没有附件 在这种情况下毫无意义 我已将我正在使用的脚本放在下面 我已
  • 我可以使用 C++ 程序之外的随机内存地址访问随机数据吗

    如果有两个程序正在运行 其中一个程序在某个内存地址存储一个数字 如果我知道该内存地址 并将其硬编码到第二个程序中并打印出该地址处的值 它实际上会得到该信息吗 C 是否允许程序访问 RAM 中存储的任何数据 无论它是否是程序的一部分 在没有虚
  • CSS 负边距定位

    使用负边距进行定位可以吗 我当前的网站中有很多内容 感觉这不是一种稳定的定位方式 我通常也建议使用它们 例如 我有一个结账页面 其中三个 div 彼此叠置 div class A header div div class B content