css 相关问题

有人可以解释一下这个CSS是如何工作的吗？这是我的 HTML 代码：第 4 项有人可以解释一下这个CSS是如何工作的吗？这是我的 HTML 代码： <div class="wrapper"> <div class="item-4"> <h2>Item 4</h2> <button>Click me</button> </div> <div class="item-5">Item 5 QR code</div> </div> 这是我的 CSS 代码： .wrapper { display: flex; border: 1px solid black; width: fit-content; margin: 0 auto; } .item-4, .item-5 { border: 1px solid red; background: white; } 像这样的编码将导致 .wrapper 框位于屏幕中央。它的弹性项目：Item-4 和 Item-5 的宽度也适合其内容，这符合预期。看这张图 .wrapper 框的宽度为 174.86px 看这张图我不明白的是，如果现在我再添加一段CSS代码： .item-4 { width: 100%; } item-4 的宽度突然扩大一些。其宽度经测量为 108.3px。看这张图 108.3px这个数字是怎么计算出来的？为什么当我添加 CSS width: 100% 时，Item-4 中仅添加了一些空间？以下是逐步说明，可帮助您了解正在发生的情况： .wrapper { display: flex; border: 1px solid black; width: fit-content; margin: 0 auto; } .item-4, .item-5 { border: 1px solid red; background: white; } <div class="wrapper"> <div class="item-4"> <h2>Item 4</h2> <button>Click me</button> </div> <div class="item-5">Item 5 QR code</div> </div> <p>adding width: 100% and flex-shrink: 0;</p> <div class="wrapper"> <div class="item-4" style="width: 100%;flex-shrink:0;"> <h2>Item 4</h2> <button>Click me</button> </div> <div class="item-5" style="flex-shrink:0;">Item 5 QR code</div> </div> <p>remove the flex-shrink: 0 to keep the default shrink behavior</p> <div class="wrapper"> <div class="item-4" style="width: 100%;"> <h2>Item 4</h2> <button>Click me</button> </div> <div class="item-5">Item 5 QR code</div> </div> 因此 item-4 将尝试获取所有父级宽度（使用 width: 100%），但这会将下一个项目推到外面，因此默认收缩行为将减小宽度以使它们都适合容器内。

html css

回答 1 投票 0

当鼠标悬停在表格单元格上时，我想向单元格添加边框以突出显示它。但是当我这样做时，所有其他单元格的宽度和高度都会受到影响

我有一个简单的介绍页面的以下 html 代码。在鼠标悬停（悬停）事件上，我将添加边框以突出显示单元格。但是当我使用现有的代码和 css 执行此操作时，所有单元格高度和 wi...

html css html-table hover border

回答 1 投票 0

使 YouTube 视频嵌入响应式

我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在手机和平板电脑上很好用，但在桌面上......

html css twitter-bootstrap iframe bootstrap-5

回答 3 投票 0

如何让前置标签的宽度减小？

如何让前置标签的宽度减小？当浏览器窗口缩小时，pre 标记可防止 q-card 减小。我想要一张 q 卡，其中包含类似于 ChatG 中的代码...