为什么 height: 0 不隐藏我的填充
,即使使用 box-sizing: border-box ?

2024-03-07

我有一个<div>带衬垫。我已将其设置为height: 0,并给出它overflow: hidden and box-sizing: border-box.

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
  padding: 40px;
  background: red;
  color: white;
}
<div>Hello!</div>

据我了解,这应该使<div>消失。

但是,它仍然可见(在我的 Mac 上的 Chrome 31 和 Firefox 25 中)。这height尽管声明似乎不适用于填充box-sizing宣言。

这是预期的行为吗?如果是这样,为什么?MDN 页面上box-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing好像没有提到这个问题。

据我所知,也不the spec http://www.w3.org/TR/css3-ui/#box-sizing0- 它对我来说就像宽度和高度都应该包括填充box-sizing: border-box(或者确实padding-box) 已设定。


的确切定义border-box is:

也就是说,元素上指定的任何填充或边框都会在此指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“width”和“height”属性中减去相应边的边框和内边距宽度来计算的。

所以你可以修改高度和宽度属性,但是padding and border从不改变。

由于内容的宽度和高度不能为负([CSS21],第 10.2 节),因此该计算的底限为 0。

那么,如果height为 0 时,不能将内边距设置在内部,因为这意味着高度将为负数。

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

为什么 height: 0 不隐藏我的填充
,即使使用 box-sizing: border-box ? 的相关文章

  • 如何在 Firefox 和 IE 中获得 user-modify:read-write-plaintext-only 行为

    Chrome Safari 支持 CSS webkit user modify read write plaintext only 它可以禁止用户将富文本粘贴到 contenteditable div 中 我不知道如何在 Firefox 和
  • 状态代码 304(Jade、Node、Express)

    我在我的 jade 文件中链接 bootstrap 和 jquery link rel stylesheet href stylesheets bootstrap css and script src javascripts jquery
  • Webix 树节点的 Font Awesome 图标

    Webix 与 Font Awesome 集成 http docs webix com desktop icon types html 但是如何使用 Font Awesome 图标代替树中的默认文件夹 文件图标来设置各个节点的样式呢 这是我
  • 防止拖动不可拖动元素时出现重影?

    我正在创建一个利用 HTML5 拖放 API 的网站 但是 为了增加用户体验 我想在用户拖动不可拖动元素时防止出现重影 这可能吗 此外 几乎每个元素似乎 可拖动的 默认情况下 人们可以单击然后快速拖动浏览器中的几乎任何元素 这会创建一个重影
  • 使用 CSS3 反转进度条

    我有这个EXAMPLE http jsfiddle net Mils fmaGZ 1 我想将进度条反转 180 度 从右向左进行 要获得这样的东西 我试图改变过渡属性但没有结果 Code progress bar span display
  • 将 JQuery UI Datepicker 与 Jquery UI 主题中的图标结合使用

    我有一个使用 JQuery UI 的日期选择器控件设置 我还使用 JQuery UI 主题 它提供了一堆我想使用的默认图标 DatePicker 允许指定特定图像 即 要显示图标集中的图标 您可以使用以下命令 span class ui i
  • iOS 中输入字段显示不同大小

    我有一个带有背景和固定宽度 高度的输入字段 它在我桌面上的所有浏览器中看起来都很好 但由于某种原因 它看起来更大iPad and iPhone 我在 CSS 中尝试了一些技巧 但到目前为止没有任何效果 width 120px importa
  • 某些表格后的分页符

    我的问题是 我有一个页面 其中包含几个要打印的 html 表格 有些表有很多行 有些则没有 我想要做的是将第一个和第二个表 大表 打印在单独的页面中 其余表 小表 每页打印两个 如何在我想要的位置放置分页符 我试过 但这会在每个表格后面添加
  • 如何使用 Spring MVC 和 Thymeleaf 添加静态文件

    我的问题是如何添加 CSS 和图像文件等静态文件 以便我可以使用它们 我正在使用 Spring MVC 和 Thymeleaf 我查看了有关此主题的各种帖子 但它们对我没有帮助 所以我才来问 根据这些帖子 我将 CSS 和图像文件放在res
  • minmax 失败(属性值无效)

    Chrome 给出了invalid property value并且不尊重CSS grid template columns repeat auto fill minmax auto 1fr 当auto被替换为min content and
  • 半流体布局 CSS/Html

    我有一个两列布局 其中右列的静态宽度为 350px 左列的宽度应填充页面的其余部分 或者至少这是我想要发生的事情 但不幸的是事实并非如此 看一下我的 css html http jsfiddle net CmJ7P http jsfiddl
  • 如何使用 javascript 将我的域名字母大写?

    假设我的域名是www hello com 如何使用 jQuery JavaScript 使浏览器的 URL 栏看起来像 www HELLO com 您无法更改浏览器地址栏中显示的内容 这是一项基本的安全功能 您可以使您的域名全部大写 并将页
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • 复合组件和 CSS

    I have newcss css formdiv width 30 margin 150 auto 和复合组件
  • Django - 渲染到字符串无法加载 CSS

    我正在尝试使用 Django 1 8 render to string 通过管理命令将 html 转换为 pdf 而不是使用 View request 以下代码可以将模板转换为 pdf 但它无法将 CSS 加载到模板中 def html t
  • 0 因为饱和度和亮度不起作用,但 0% 在 hsl/hsla 中起作用?

    我正在尝试一个简单的演示 其中我为元素赋予了颜色hsl 根据我的经验 我知道0CSS 中的 ZERO 是无单位的 如果要指定 0 作为值 可以保留单位 然而 情况似乎并非如此hsl hsla 在 Chrome 和 Firefox 上 结果都
  • jQuery hide() 动画向右滑动

    使用 jQuery 的hide 使用可选的持续时间参数的函数 我可以在我的网站上获得一些警报框 以优雅地滑出屏幕并消失 隐藏动画的默认方向似乎是向左滑动 尽管此行为未在hide 定义页 http api jquery com hide 我需
  • 跨浏览器方法使子 div 适合其父级的宽度

    我正在寻找适合孩子的解决方案div进入它的父母width 我在这里看到的大多数解决方案不跨浏览器兼容 eg display table cell IE 不支持 lt 8 解决方案就是不声明width 100 默认为width auto 对于
  • 如何使

    我有一个列表 用作选项卡列表 div ul class TabControl li a href search Funds Funds 60 a li li a href search Companies Companies 4 a li
  • CSS3输入元素的圆角,没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added

随机推荐

  • TinyMCE execCommand 返回未定义

    我试图从我之前创建的特定文本区域中删除tinyMCE 但以下命令不断产生 未定义 错误 使用firebug控制台检查 tinyMCE execCommand mceFocus false textarea plainText tinyMCE
  • 最高的 firebase 版本代码也用于编译播放服务库

    我在我的项目中使用某些 firebase 和 play 服务库 将播放服务插件版本更新至 4 0 0 后 由于 firebase 和 play 服务现在对每个库使用不同的版本编码策略 其中任一库中的最高版本代码将被所有其他库替换 这导致无法
  • 为什么 HRESULT 0 表示成功?

    我刚刚在处理 HRESULT 返回值时遇到了一些非常尴尬的事情 似乎成功为 0 失败为 1 这背后的逻辑是什么 我实际上尝试过if hr 并悲惨地失败了 浪费了我生命的一个小时 直到我发现实际的成功 retval 是 0 我想称想到这个的人
  • 没有活跃的源代码控制提供商

    我在 Ubuntu 上安装的 VS Code 编辑器表明它没有活动的源代码控制提供程序 我正在使用 Ubuntu 并且正在运行 git version 表明它是v2 18 0 我的项目中有一个 git 文件夹 我该如何解决这个问题 另外两个
  • 使用对象检测API的默认配置时,图像缩放器的不同尺寸有何影响

    我试图使用 Tensorflow 的对象检测 API 来训练模型 我正在使用更快的 rcnn resnet101 的示例配置 https github com tensorflow models blob master object det
  • 如何在windows下制作Qt mysql驱动?

    我已经在linux中多次构建了qsqlmysql so 我完全熟悉这个过程 但现在在愚蠢的窗口中 无论我做什么 我都无法构建它 我使用的是Qt5 12 1 最新 和Microsoft VS enterprise 2017编译器 我已经下载了
  • 在客户设备上测试 iPhone 应用程序

    我已经为 iphone 创建了一个应用程序 我还有一个苹果开发者计划证书来编译我的应用程序 现在我想将其发送给我的客户进行审核 我怎样才能做到这一点 他需要什么证书吗 谢谢你 是的 您需要前往苹果会员中心 然后前往配置门户 您需要在那里注册
  • 将 FOR XML 转换为 Varchar(max) [重复]

    这个问题在这里已经有答案了 我有一个返回 XML 的查询 我想将其转换为 varchar 我的查询返回 93 643 个 XML 字符 当我尝试将 xml 结果转换为 varchar 时 将结果集复制到文本编辑器时只得到 43 679 个字
  • Laravel 动态配置设置

    我在我的项目中使用一个包 它在里面存储一个设置config packagename 我想在配置文件中动态更改此值 这就是文件结构当前的样子
  • 如何在 MacOS 上安装 Firefox OS SDK?

    我想开始为 Firefox OS 进行开发 但安装时遇到问题 我正在关注 mozilla 的 wiki 但现在我不知道如何继续 我已经下载了 XULRunner 但是我该怎么办 我正在尝试遵循维基 但没有找到解决方案 Link https
  • 在子视图 (UIWebView) 上获取 TouchBegan

    我有一个 UIWebView 它作为子视图添加到 UIview 中 我想检测何时触摸此 UIWebView 但 TouchBegan 不起作用 任何想法 在代码中子类化 UIWebView 然后在类中实现 TouchBegan 将子类化的
  • Visibility.Collapsed 和 Visibility.Hidden 之间的区别

    之间有什么区别Visibility Collapsed and Visibility Hidden in WPF 不同之处在于Visibility Hidden隐藏控件 但保留它在布局中占用的空间 因此它渲染空白而不是控件 Visibilt
  • 判断Java中的网络掩码是否有效

    Java 6 中确定给定地址是否为有效网络掩码的最简单方法是什么 我找到了一个解决方案 它基本上创建了一组有效的IP以用于比较 即 255 255 255 255 255 255 255 254 255 255 255 252 等 有更简单
  • 无会话 CSRF 保护(双重提交 cookie)

    从我的讲座开始owasp org https www owasp org index php Cross Site Request Forgery 28CSRF 29 Prevention Cheat Sheet他们推荐同步器令牌模式 并且
  • Windows 8 将应用程序存储为企业软件

    我正在编写一个 Windows 8 应用商店应用程序 但该应用程序供我公司内部使用 该应用程序需要在 100 多台平板电脑上运行 因此安装过程必须简单 因此 我一直在使用 Windows 8 应用商店模板来创建我的应用程序 但现在我需要在我
  • 在 WPF 中将 DataSet 绑定到 DataGrid

    我知道这个问题之前已经被问过好几次了 但我无法得到这个 我有一个DataSet and a DataGrid 我想做的就是显示内容DataSet in the DataGrid 我写了这段代码 vConn new OleDbConnecti
  • 如何配置Intellij Idea live模板的适用上下文?

    我想为我的自定义文件类型创建一个实时模板组 但是当我选择适用的上下文时 除了我的自定义文件类型之外 还有一个文件类型或语言类型的列表 该列表是预定义的并且不能扩展吗 可用的上下文类型取决于启用的插件 Jetbrains 帮助页面中是这么说的
  • MapViewOfFile 失败,错误代码 6(无效句柄)

    我尝试将文件映射到内存并使用 MapViewOfFile 但它失败并显示错误代码 6 我尝试了几乎所有方法 我还读到大文件是问题所在 但问题也发生在 1kb 文件上 my code HANDLE hFile CreateFile pFile
  • java.lang.Thread.interrupt() 的作用是什么?

    你能解释一下什么吗java lang Thread interrupt 何时调用 Thread interrupt 设置目标线程的中断状态 标志 然后在该目标线程中运行的代码可以轮询中断状态并适当地处理它 一些阻止的方法 例如Object
  • 为什么 height: 0 不隐藏我的填充

    我有一个 div 带衬垫 我已将其设置为height 0 并给出它overflow hidden and box sizing border box div webkit box sizing border box moz box sizi