为什么按钮不拉伸以用“display: block”和“width: auto”填充容器？
发布于2024-11-09
浏览：382
为什么“display: block”和“width: auto”不能拉伸按钮来填充容器？
当使用“display: block”和“ width: auto” 在按钮上，它可能会拉伸并填充其容器。然而，情况并非总是如此。特别是，现代浏览器中的按钮在这方面的行为与其他块元素不同。
这种行为背后的原因在于按钮作为替换元素的本质。被替换的元素的外观和尺寸主要不是由 CSS 决定，而是由操作系统或其他外部资源等外部因素决定。就按钮而言，它们的大小和样式通常由特定于平台的用户界面约定定义。
内在维度
替换元素具有内在维度，这意味着它们的宽度和高度由元素本身而不是周围的内容定义。当“width: auto”应用于替换元素时，将使用该元素的固有宽度。对于按钮，此固有宽度通常对应于操作系统定义的默认按钮控件的大小。
视觉格式要求
除了固有尺寸之外，还替换了元素还可以施加视觉格式要求。对于按钮，这些要求包括标题的显示、按钮的边框和其他用户界面元素。这些格式要求会覆盖 CSS 属性的效果，例如“width: auto”和“display: block”。
结论
按钮关于“的行为display: block”和“width: auto”是它们作为被替换元素的状态的结果。它们的内在尺寸和视觉格式要求优先于 CSS 属性，导致观察到按钮并不总是拉伸以填充其容器的行为。
最新教程
更多>
-
如何在 Golang 中检索 XML 数组中的所有元素而不仅限于第一个元素？在 XML 中解组数组元素：检索所有元素，而不仅仅是第一个当使用 xml.Unmarshal( 在 Golang 中解组 XML 数组时[]byte(p.Val.Inner), &t)，您可能会遇到仅检索第一个元素的情况。要解决此问题，请利用 xml.Decoder 并重复调用其 Decode 方法...编程 发布于2024-11-09 -
带有管理面板的轻量级 Rest Api，可轻松管理食物食谱。你好， ？所有这篇文章都是关于我刚刚在 Github 上发布的 Django Rest Framework API。 如果您正在寻找一些简单而高效的 API 来从管理面板管理食物食谱并将其返回以供客户端使用，那么此存储库适合您。 该代码是轻量级的，可以在任何低功耗迷你 PC（如 Raspberry...编程 发布于2024-11-09
-
如何使用正则表达式匹配带有或不带有可选 HTTP 和 WWW 前缀的 URL？使用可选 HTTP 和 WWW 前缀匹配 URL正则表达式是执行复杂模式匹配任务的强大工具。当涉及到匹配 URL 时，格式通常会有所不同，例如是否包含“http://www”。 使用正则表达式的解决方案匹配带或不带“http://www”的 URL。前缀，可以使用以下正则表达式：((https?|f...编程 发布于2024-11-09
-
如何在不依赖扩展名的情况下确定文件类型？如何在不依赖扩展名的情况下检测文件类型除了检查文件的扩展名之外，确定文件是 mp3 还是图像格式是很有价值的编程中的任务。这是一个不依赖扩展的全面解决方案：PHP >= 5.3:$mimetype = finfo_fopen(fopen($filename, 'r'), FILEINFO_MIME_...编程 发布于2024-11-09
-
在 Go 中使用 WebSocket 进行实时通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...编程 发布于2024-11-09
-
除了“if”语句之外：还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型？无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换，使您能够在条件语句中直接使用其实例“t”。然而，这种显式转换提出了一个问题：“t”在哪里可以在不进行强制转换的情况下用作 bool？上下文转换场景C 标准指定了四种值可以根据上下文转换为 bool 的主要场景：语句：if、w...编程 发布于2024-11-09
-
在 JavaScript 中实现斐波那契数列：常见方法和变体作为开发人员，您可能遇到过编写函数来计算斐波那契数列中的值的任务。这个经典问题经常出现在编码面试中，通常要求递归实现。然而，面试官有时可能会要求具体的方法。在本文中，我们将探讨 JavaScript 中最常见的斐波那契数列实现。 什么是斐波那契数列？ 首先，让我们回顾一下。斐波那契数...编程 发布于2024-11-09
-
如何使用 .htaccess 更改共享服务器上的 PHP 版本？在共享服务器上通过 .htaccess 更改 PHP 版本如果您正在操作共享服务器并且需要更改 PHP 版本，可以通过 .htaccess 文件来做到这一点。这允许您为您的网站运行特定的 PHP 版本，同时服务器维护其默认版本。要切换 PHP 版本，请按照下列步骤操作：找到 . htaccess 文...编程 发布于2024-11-09
-
如何在Ajax数据加载过程中显示进度条？如何在 Ajax 数据加载期间显示进度条处理用户触发的事件（例如从下拉框中选择值）时，通常使用异步检索数据阿贾克斯。在获取数据时，向用户提供正在发生某事的视觉指示是有益的。本文探讨了一种在 Ajax 请求期间显示进度条的方法。使用 Ajax 实现进度条要创建一个准确跟踪 Ajax 调用进度的进度条，...编程 发布于2024-11-09
-
TCJavaScript 更新、TypeScript Beta、Node.js 等等欢迎来到新一期的“JavaScript 本周”！ 今天，我们从 TC39、Deno 2 正式版本、TypeScript 5.7 Beta 等方面获得了一些针对 JavaScript 语言的巨大新更新，所以让我们开始吧！ TC39 更新：JavaScript 有何变化？ 最近在东京举行...编程 发布于2024-11-09
-
为什么 Bootstrap 用户应该在下一个项目中考虑使用 Tailwind CSS？Tailwind CSS 入门 Bootstrap 用户指南 大家好！ ？如果您是 Bootstrap 的长期用户，并且对过渡到 Tailwind CSS 感到好奇，那么本指南适合您。 Tailwind 是一个实用程序优先的 CSS 框架，与 Bootstrap 基于组件的结构相比...编程 发布于2024-11-09
-
如何在 JavaScript 中将浮点数转换为整数？如何在 JavaScript 中将浮点数转换为整数要将浮点数转换为整数，您可以使用 JavaScript内置数学对象。 Math 对象提供了多种处理数学运算的方法，包括舍入和截断。方法：1。截断：截断去除数字的小数部分。要截断浮点数，请使用 Math.floor()。此方法向下舍入到小于或等于原始数...编程 发布于2024-11-09
-
标准字符串实现中的 c_str() 和 data() 是否有显着差异？标准字符串实现中的c_str()与data()STL中c_str()和data()函数的区别人们普遍认为类似的实现是基于空终止的。据推测，c_str() 总是提供以 null 结尾的字符串，而 data() 则不然。然而，在实践中，实现经常通过让 data() 在内部调用 c_str() 来消除这种...编程 发布于2024-11-09
-
C/C++ 中的类型转换如何工作以及程序员应该注意哪些陷阱？了解 C/C 中的类型转换 类型转换是 C 和 C 编程的一个重要方面，涉及将数据从一种类型转换为另一种类型。它在内存管理、数据操作和不同类型之间的互操作性方面发挥着重要作用。然而，了解类型转换的工作原理及其限制对于防止潜在错误至关重要。显式类型转换使用 (type) 语法执行的显式类型转换允许程序...编程 发布于2024-11-09
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
