程序员经验分享-hwhale

添加CSS边框改变HTML5网页中的定位

2024-03-03

当我在 HTML 5 文档中添加边框时，我遇到了页面元素移动的问题。

我期望包含标题元素（灰色）出现在屏幕顶部，但它似乎占用了内部 div（红色）的边距。但是，如果我向标题添加边框，它就会出现在我期望的位置，并且红色内部 div 只会稍微移动！

（第一图：无边框；第二图：有边框）

我尝试过设置相对或绝对定位，使用 div 而不是标题元素，将边距和填充设置为 0，使用 HTML4 文档类型等。HTML 验证。这是删除了所有内容的 HTML，但仍然不起作用。它发生在最新的 Chrome 和 FF 中。

帮助！！我错过了什么？？或者有什么解决方法（除了保留边界）？

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
    <header><div id="mydiv"></div></header>
    <div id="content"><p>hello</p></div>
</body>
</html>

CSS:

header {background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }

这个问题来自于所谓的“利润崩溃”。很简单：两个相邻的边距折叠到两个中最高的一个（我说两个，但也可以更多）。

在你的例子中，“#mydivs”margin-top- 80px - 正在触及“标题”margin-top- 0 像素。它们是相邻的——它们之间没有元素，也没有填充，也没有边框。

因此，边距折叠到两个元素中最高的一个 (80px)，然后将其应用于父子层次结构中最高的元素 - 这就是header在这种情况下。

解决这个问题的一种方法是在边缘之间放置一些东西；一些填充或标题上的边框都可以正常工作。

header {
  border-top: 0.1em solid rgba(0,0,0,0);
}

第二种解决方案（我的首选方案）是让父元素创建一个新的块格式化上下文。这样，它的边距就不会与其子项的边距一起崩溃。

如何创建块格式化上下文？有四种可能的方法。

  1. 通过浮动它。
  2. “绝对定位它”。
  3. 添加以下显示之一：“table-cell”、“table-caption”或“inline-block”。
  4. 添加可见以外的溢出。

为了防止边距塌陷，您可以执行以下任何操作 4。我通常选择第 4） - 将溢出设置为自动，因为它只是副作用......好吧，它不太可能成为问题。

header {
  overflow: auto;
}

这基本上就是父子边距崩溃的情况。兄弟姐妹之间也存在边距折叠，并且规则几乎相同：两个相邻的边距折叠到两个中的最高者。这些解决方案不是。

这是对边距折叠的一个很好的解释 - http://www.howtocreate.co.uk/tutorials/css/margincollapsing http://www.howtocreate.co.uk/tutorials/css/margincollapsing

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

css

html

position

添加CSS边框改变HTML5网页中的定位 的相关文章

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

  • 如何保留用户的输入打印？

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div

  • 在 Android 上禁用标注（上下文菜单）

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在

  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么

  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo

  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga

  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ

  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法

  • 如何在Yii框架中向Form添加类？

    我在 Yii 中有一个表单 我想向该表单添加一个类

  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P

  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s

  • 如何使使用 css 调整大小的图像在 IE 中看起来不错？

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制

  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent

  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障？

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

  • 禁用允许文本选择的？

    残疾人可以吗

随机推荐

  • 如何使用 tvOS 打开另一个应用程序？

    Does UIApplication openURL work NSString iTunesLink http www youtube com watch v TFFkK2SmPg4 BOOL did UIApplication shar

  • 如何创建一个使用 gzip 压缩静态文件的简单节点服务器

    我已经在这几个小时了 我做的第一件事就是跟随this http blog modulus io nodejs and express static content教程有这个代码 var express require express var

  • 在 DateTimePicker 中设置小时超过 23

    在我的项目中 我需要使用格式为 HH MM 的 Timepicker 但我将它用作持续时间 而不是时间 所以是否可以将 HH 增加到 99 而不是停留在 23 我使用此页面中的日期时间选择器 http tarruda github io b

  • 以干净的方式打破 javascript 承诺链

    我正在尝试将承诺串联起来 这样如果一个承诺被拒绝 链条就会断裂 我跟随一个人的线索上一个SO问题 https stackoverflow com questions 20714460 break promise chain and call

  • (413) 请求实体太大 |上传预读大小

    我使用 NET 4 0 编写了一个 WCF 服务 该服务托管在我的 Windows 7 上x64带有 IIS 7 5 的终极系统 其中一个服务方法有一个 对象 作为参数 我正在尝试发送一个包含图片的字节 只要该图片的文件大小小于约 48KB

  • 使用 webpack 配置 CSS 模块时出错

    我正在尝试使用 webpack 配置 CSS 模块 但出现错误 我已经检查了 stackoverflow 上的其他答案 但到目前为止 没有一个解决方案对我有用 我已经按照文档的建议添加了加载程序 但它仍然显示错误 这是我的 webpack

  • 在 jQuery mobile 中创建侧边栏

    通常 当您使用 jQuery mobile 创建 data role page 元素时 它会占据整个查看区域 因此 我不明白如何创建侧边栏 我想模拟以下内容 但查看源代码没有多大帮助 http jquerymobile com demos

  • 嵌套字典到 MultiIndex pandas DataFrame（3 级）

    我想对 3 级嵌套字典执行相当于此操作 嵌套字典到多索引数据框 其中字典键是列标签 https stackoverflow com questions 24988131 nested dictionary to multiindex dat

  • 来自 CALayer 的 CGImage（或 UIImage）

    我创建了一个CALayer 我向图层添加了几个形状 但最终我只有一个 CALayer 并且将其添加到 CGImage 时遇到了很多麻烦 我找到了一些参考资料 CALayer renderInContext ctx 但我不知道如何实现它 以前

  • 我可以拥有在单个 js 文件中发出 Angular 元素的 Angular 库吗？

    我开始接触 Angular 6 位 并且对 Angular Elements 以及新的库项目非常感兴趣 我即将开展一个项目 可能需要这两个新功能 我需要创建可跨 Web 框架重用的自定义 UI 组件 但我也希望获得在 Angular 项目中

  • 忽略版本控制上的文件夹元文件

    Unity 创建和删除元文件folders在资源文件夹内 在使用版本控制时 这可能会产生令人烦恼的情况 您可以跳过并转到问题 有人创建了一个将被忽略的文件文件夹 但忘记忽略该文件夹的元文件 Unity 创建元文件 此人将元添加到版本控制中

  • Android 获取设备区域设置

    安装 Android 程序后 我检查设备区域设置 String deviceLocale Locale getDefault getLanguage 如果 deviceLocale 在我支持的语言 英语 法语 德语 内 我不会更改区域设置

  • 如何在 where 子句中使用别名？

    我试图在多列文本和备忘录中搜索我不想看到的某些短语和黑名单短语 假设如下表 stories id title author publisher content 前任 我想找到所有提到 在任何领域 苹果 但将 苹果酱 列入黑名单的故事 SEL

  • Apple Silicon 上的 ARCHFLAGS 值正确吗？

    在我以前的基于 Intel 的 Mac 上 我曾经包含 export ARCHFLAGS arch x86 64 在我的 shell 资源文件中 新的基于 ARM 的 Apple 芯片上的正确编译标志是什么 arm arm64 arm 64

  • WPF：OnCollectionChanged 未触发

    使用 VS 2102 NET 4 0 和 MVVM Light 我有以下代码 可将 XML 文件中的项目读取到 ObservableCollection 中 然后 如果集合发生更改 使用 IsDirty 标志 但 OnCodeCollect

  • 如何将 pandas 列的值除以其他列

    我有一个数据框 gt gt gt dt COL000 COL001 QT STK ID RPT Date STK000 20120331 2 6151 2 1467 1 20120630 4 0589 2 3442 2 20120930 4

  • 如何从 django 选择字段中的值检索键？

    示例代码如下 REFUND STATUS S SUCCESS F FAIL refund status models CharField max length 3 choices REFUND STATUS 我知道在模型中我可以使用 get

  • GitHub：是否可以搜索内部代码并按星号排序

    我不确定这是否是解决这个问题的正确论坛 在 GitHub 上看到不少与搜索相关的 Q A 故在此发帖 例如 在 Github 项目中搜索代码 https stackoverflow com q 3616221 781695 GitHub 高

  • 带有 Swift 和 iOS 8 Storyboard 的登录屏幕

    我在处理 iOS 应用程序的登录流程时遇到了很多麻烦 我想要实现的故事板的图像如下 我正在尝试实现一个可选的登录屏幕 仅当用户首次打开应用程序且尚未登录时才会显示该屏幕 目前 我将选项卡栏控制器设置为根视图控制器 然而 我不知道如何处理这些

  • 添加CSS边框改变HTML5网页中的定位

    当我在 HTML 5 文档中添加边框时 我遇到了页面元素移动的问题 我期望包含标题元素 灰色 出现在屏幕顶部 但它似乎占用了内部 div 红色 的边距 但是 如果我向标题添加边框 它就会出现在我期望的位置 并且红色内部 div 只会稍微移动

热门标签