css 相关问题

CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体和动画。它还描述了元素应如何在屏幕上，纸上，语音或其他媒体上呈现。

使用Flexbox复制leetcode的日历布局，但间隙不均匀且不一致

我正在尝试从leetcode的个人资料页面复制日历功能，如下所示。 [\[leetcode 的日历功能\](https://i.stack.imgur.com/OMUSJ.jpg)][1] 就这样完成了...

css flexbox grid

回答 1 投票 0

CSS table td 宽度 - 固定，不灵活

我有一张桌子，我想在td上设置30px的固定宽度。问题是当td中的文本太长时，td会被拉伸超过30px。溢出：隐藏不起作用 ei...

html css html-table

回答 9 投票 0

CSS：将visibility属性与focus/active伪元素结合使用来强制元素失去焦点是错误的吗？ [已关闭]

我正在尝试仅使用 CSS 来“禁用”输入元素，以阻止用户关注特定的 DOM 元素。这是一个涉及使用指针的老问题（并且得到了很好的回答）-

css input focus visibility disable

回答 1 投票 0

我只想并排两个盒子

看在上帝的份上，我看了很多关于如何使用 CSS 排列两个盒子的教程，但它们似乎都不适合我的 neocities 网站。我究竟做错了什么？ * { 保证金：0；填充：0...

css

回答 1 投票 0

错误报告：我正在使用 bootstrap 4 和 Angular 11，尽管这个问题似乎与包直接相关，而不是与其中任何一个相关，但我已经尝试过：将 css 文本对齐更改为左、右和

javascript css angular bootstrap-4 html2canvas

回答 1 投票 0

星号 (*) 在 CSS 选择器中起什么作用？

我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，有人能解释一下CSS中星号*的作用吗？ * { 轮廓：2px 红色虚线 } * ...</desc> <question vote="109"> <p>我找到了这个 CSS 代码，我运行它来看看它的作用，它概述了页面上的每个元素，</p> <p><strong>有人可以解释一下星号<pre><code>*</code></pre>在CSS中的作用吗？</strong></p> <pre><code><style> * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue } </style> </code></pre> </question> <answer tick="true" vote="109"> <p>它是一个通配符，这意味着它将选择 DOM 该部分内的所有元素。</p> <p>例如，如果我想将边距应用于整个页面上的每个元素，您可以使用：</p> <pre><code>* { margin: 10px; } </code></pre> <p>您还可以在子选择中使用它，例如以下将为段落标记内的所有元素添加边距：</p> <pre><code>p * { margin: 10px; } </code></pre> <p>您的示例正在执行一些 CSS 技巧，将连续的边框和边距应用于元素，从而为它们提供多个彩色边框。例如，白色边框被黑色边框包围。</p> </answer> <answer tick="false" vote="32"> <p>您引用的 CSS 对于网页设计师调试页面布局问题非常有用。我经常将其临时放入页面中，这样我就可以看到所有页面元素的大小并进行追踪，例如，填充过多的元素将其他元素推到了位置之外。 </p> <p>仅使用第一行即可完成相同的技巧，但定义多个轮廓的优点是，您可以通过边框颜色获得嵌套页面元素层次结构的视觉线索。</p> </answer> <answer tick="false" vote="6"> <p><pre><code>*</code></pre> 充当通配符，就像在大多数其他情况下一样。</p> <p>如果你这样做：</p> <pre><code>*{ margin: 0px; padding: 0px; border: 1px solid red; } </code></pre> <p>然后<strong>所有</strong> HTML 元素都将具有这些样式。</p> </answer> <answer tick="false" vote="4"> <p>* 是通配符。这意味着它将将该样式应用于任何 HTML 元素。附加的 * 将样式应用于相应的嵌套级别。</p> <p>此选择器将根据元素的嵌套级别将不同颜色的轮廓应用于页面的所有元素。</p> </answer> <answer tick="false" vote="0"> <p>虽然这个问题已经得到解答，</p> <p>我只是想把这个CSS放在这里（<em>的标题）</em> StackOverflow页面..</p> <p>结果如下： <a href="https://i.stack.imgur.com/TqkJ2.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Rxa0oyLnBuZw==" alt=""/></a> 我以前从未见过这个CSS</p> </answer> <answer tick="false" vote="-1"> <p>在样式表中，通常您需要为所有元素定义基本规则，例如字体大小属性和边距。 <em>{字体大小：14px;保证金：0；填充：0；} /</em> 覆盖浏览器对元素的默认设置，所有文本字体大小将呈现为 14 像素大小，边距和填充为零，包括 h1,...pre。 */</p> </answer> </body></html>

css css-selectors

回答 0 投票 0

使用transformX内容溢出到页面边界之外

我有一个简单的项目。在该项目中，我有一个与 translateX 配合使用的抽屉。我的问题是，当我打开那个抽屉时，我的主要内容就超出了页面。这个问题显示在...

javascript html jquery css reactjs

回答 1 投票 0

rss feed 缺少网站图标和标语 - 验证器中未发现问题 - WordPress 网站

我有一个 wordpress.org 网站，用于托管网络漫画，当我再次更新时，我渴望确保我的 rss feed 达到专业标准，以确保没有人错过任何更新。 WordPress

css wordpress rss favicon

回答 1 投票 0

为什么 {{ width: "100vw", height: "100vh"}} 比我的浏览器窗口大？（margin:0 未应用）

我制作了一张{{ width: "100vw", height: "100vh"}} 的地图，它比我的浏览器窗口大。我用 {{ width: "100vw", height: "100vh"}} 制作了一张地图，它比我的浏览器窗口大。 <div id="map" style={{ width: "100vw", height: "100vh", margin: "0", padding: "0"}}></div> 我添加了border: "1px solid black"来看看问题是什么，这就是我所看到的：如您所见，地图周围有黑色边框线，周围也有白色空间。为什么当我显式地将其应用到 0 时，margin 仍然存在？完整代码作为参考： export default function Home(props){ useEffect(() => { let container = document.getElementById('map'); let options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3 }; let map = new window.kakao.maps.Map(container, options); }, []) return ( <> <div id="map" style={{ width: "100vw", height: "100vh", margin: "0", padding: "0", border: "1px solid black"}}></div> </> ) } 浏览器默认样式包括这些元素的间距，因此您必须从 Css 中的 <html> 和 <body> 元素中删除边距和填充： html, body { margin: 0; padding: 0; } <div id="map" style={{ ... border: "1px solid black"}}></div> 你的边框1px，这意味着每边+2px。您可以尝试为您的 div 添加 box-sizing ： box-sizing: border-box; https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 这个问题也让我很恼火。然后我尝试了“宽度：100%；”除了“宽度：100vw；”它起作用了。所以尝试一下，让我知道它是否适合你。 <div id="map" style="width: 100%; height: 100vh;"></div> 接受的答案不涵盖的情况 {position: fixed, height: 100vh} 但是上面的代码片段似乎只覆盖了屏幕，浏览器导航栏和设备导航栏的高度会影响视口的可见部分，导致溢出。如果需要一个元素占据整个屏幕但不溢出，请使用此： {position: fixed, top:0, bottom:0, left:0, right:0} 这将在尊重任何缩小视口可见部分的操作系统元素的同时布局元素。

javascript html css reactjs

回答 4 投票 0

仅使用 CSS 在 pre 上创建行号

我尝试设计一个代码前置框，并在每行前面添加行号。我更喜欢只使用 CSS 来实现。这就是我所做的预{ 背景：#303030；颜色：#f1f1f1；内边距：10px

html css css-counter

回答 5 投票 0

如何使用 CSS Flexbox 将徽标图像对齐到右侧？

如何使用 CSS Flexbox 将徽标图像对齐到右侧？ .logo 类设置为 display: flex;，这会将其子项转换为 Flex 项目。调整内容：弹性结束；对齐柔性...

html css

回答 1 投票 0

向网页添加动画 html 画布背景时遇到问题？

我正在尝试将以下动画添加到我的网页背景链接到背景，我面临的问题是背景加载在我网页的所有内容之上，至于...

javascript html css animation html5-canvas

回答 1 投票 0

选择 CSS 中前面没有另一个元素

考虑这个片段： .包装器{ 显示：柔性；间隙：5px；边框：1px 纯黑；边框半径：3px；宽度：80px；内边距：5px； } 考虑这个片段： .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> 该图标可能存在也可能不存在。我想要实现的是，如果图标不存在，则会向 .text 添加一些左侧填充。我该怎么做？我尝试了 :has、:not 和 +（下一个兄弟组合器）的几种组合，但无济于事。本质上，我想选择 .text，但前提是它前面没有 .icon。 .wrapper:not(:has(div.icon)) div.text 应该这样做。示例1（带图标） .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } { padding-left: 40px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> 示例2（无图标） .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } .wrapper:not(:has(div.icon)) div.text { padding-left: 40px; } <div class="wrapper"> <div class="text">paintings</div> </div> .text:not(.icon + .text)应该可以解决问题 .wrapper { display: flex; gap: 5px; border: 1px solid black; border-radius: 3px; width: 80px; padding: 5px; } .text:not(.icon + .text) { padding-left: 24px; } <div class="wrapper"> <div class="icon">🖼️</div> <div class="text">paintings</div> </div> <div class="wrapper"> <div class="text">paintings</div> </div>

css css-selectors

回答 2 投票 0

以编程方式在 Svelte 中添加（作用域）类名

代码片段： let coloredText = "这是彩色文本" let templateString = `此文本是以编程方式插入的`; 让 templateHtml = `<span class="colored&</desc> <question vote="0"> <p>代码片段：</p> <pre><code><script> let coloredText = "This is colored text" let templateString = `This text is programmatically inserted`; let templateHtml = `<span class="colored">I want this text to be red</span></h1>` </script> <style> .colored { color: red; } main { font-family: sans-serif; text-align: center; } </style> <main> <h1>This is normal text</h1> <h1><span class="colored">{coloredText}</span></h1> <h1>{templateString}</h1> <h1>{@html templateHtml}</h1> </main> </code></pre> <p>输出：</p> <p><a href="https://i.stack.imgur.com/E327h.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0UzMjdoLnBuZw==" alt=""/></a></p> <p><a href="https://codesandbox.io/p/sandbox/proud-brook-z3ph7y?file=%2FApp.svelte" rel="nofollow noreferrer">代码沙箱</a></p> <p>当您向元素添加 css 类时，Svelte 似乎会向（正确样式的）结果标记添加一个额外的 <pre><code>svelte-xxxx</code></pre> 类。它不会将相同的类添加到使用 <pre><code>@html</code></pre> 标签呈现的文本 HTML，并且生成的标记没有样式，即使 CSS 选择器应与生成的元素匹配。</p> <p>在 Svelte 中以编程方式生成的 HTML 添加类名的规范方法是什么？我知道 <pre><code>:global</code></pre> 但我想将结果限制在组件范围内。</p> </question> <answer tick="false" vote="0"> <p>使用 <a href="https://svelte.dev/docs/svelte-components#style" rel="nofollow noreferrer"><pre><code>:global(...)</code></pre> 修饰符</a> 与组件内的包装元素结合使用将使样式保持在范围内</p> <pre><code> h1 :global(.colored) { color: red; } </code></pre> <p>-></p> <pre><code>h1.svelte-nd95r3 .colored { color: red; } </code></pre> </answer> </body></html>

css svelte

回答 0 投票 0

如何在移动设备上将视频 div 调整为 100% 宽度

当我使浏览器窗口变薄以复制移动设备大小时 - 图像会精细调整大小并填充 100% 宽度... 但我无法将视频发送到填充 100% 宽度与顶部对齐 - 由于某种原因

css responsive-design

回答 1 投票 0

如何删除卡片最后一个元素上的空白

我希望卡片从左到右均匀地分布在页面上。然而，在现阶段，右侧存在巨大差距。我尝试在 CSS 中使用“last-child”类，但它......

html css sass

回答 1 投票 0

根据浏览器宽度正确调整特定位置的div的大小

有没有一种方法可以让 div 容器在容器开始触及浏览器侧面时响应式缩小（如果浏览器变小）......而不是只在它触及我时才这样做......