为啥这个 CSS 中的元素相互抵消（在不涉及继承但带有注释的 HTML 中）彼此不相关？

Posted 2023-02-21

【中文标题】为啥这个 CSS 中的元素相互抵消（在不涉及继承但带有注释的 HTML 中）彼此不相关？

【英文标题】：Why are elements in this CSS canceling each other out (in HTML without inheritance involved but with comments) that aren't related to each other?为什么这个 CSS 中的元素相互抵消（在不涉及继承但带有注释的 HTML 中）彼此不相关？

【发布时间】：2019-02-16 14:40:01

【问题描述】：

使用这个类，一些元素不会显示。哪些显示取决于我将这些元素放入的顺序。 解决方法是使用了错误类型的评论方法。在 html 文件中的 CSS 样式元素中使用 HTML 样式 cmets 会造成各种破坏。

我想要所有的同时：

~ 彩色框中的文本， ~ 以页面为中心的框， ~ 文本距离框的左边距 120px ~ 棕褐色边框 ~ 方框 50% 的页面宽度

在 sn-p 中，当边距在 CSS 列表中的位置较高以使其居中时，边框会从棕褐色变为黑色！

margin:auto 无法按照 CSS 的某些顺序使框在页面上居中。

当 margin 放在 css 后面的 padding-left 之后，使边框为棕褐色时，50% 的宽度变为 100% 的宽度。

当我的边距处于居中状态且宽度处于 50% 时，padding-left 停止工作。

我已经将它们转移到这么多订单中，但我还没有发现什么模式会抵消其他东西以及为什么。

我无法找到任何关键字来搜索以了解更多关于为什么会发生这种情况，并且 3www.school 没有我找到的答案。

CSS是

<style>
  .highlightbox4 

    background-color:linen;
    margin: auto;
    font-weight:bold;
    color:black;
    padding:20px;
    width:50%;
    border-color:tan;   <* use linen color instead? *>
    border-style:solid; <* border didn't show up until style was added *>
    border-width:5px;
    padding-left:120px;
  
</style>

--

我也在代码创建器中创建了它，但里面的大小并不能说明它是否全部工作。 （原来我不知道你可以运行问题底部的 sn-p 看看它是否有效。）

这个 sn-p 应该有一个棕色边框和 120 像素的左边距。 （补充：解决方法是sn-p中的html样式将其停止。）

.highlightbox4 

    background-color:linen;
    margin: auto;
    font-weight:bold;
    color:black;
    padding:20px;
    width:50%;   <* use linen color instead? *>
    border-color:tan;
    border-style:solid;
    border-width:5px;  <* another comment *>
    padding-left:120px;

<!-- Not added yet box-shadow: 5px 10px; -->

<div class="highlightbox4">
Text that I'm trying to put into a linen colored box, <br> lined up 120px from it's left edge <br> and the box centered in the page <br> with a tan border that's a little thick.
</div>

【问题讨论】：

您的代码工作得非常好——它创建了一个棕褐色边框并添加了正确的填充。 padding-left: 120px 被覆盖（当它是最后一条规则时），因为 padding: 20px 是包括 padding-left: 20px 在内的四个规则的简写。请确保您提供了问题的minimal, complete, and verifiable example，清楚地解释了您期望发生的事情以及当前发生的事情。

如果padding-left一般放在padding之后，会有效吗？所以最后一个地方应该没问题吧？只有放在padding general之前才会被消灭？

我更新了示例。我已经放弃了 cmets，因为它们看起来无关紧要而且很蓬松。原来是他们造成了问题！如果您在 CSS 中使用 html 样式的 cmets，CSS 会被阻止，但只有其中的一些行，具体取决于 cmets 所在的位置。

【参考方案1】：

尝试添加：

display: table;

这将 center 你的 div （因为以 margin: auto 居中仅适用于固定宽度元素。display: table 消除了这一点。

编辑：

您可以在很棒的页面上找到更多示例：Css Centering Things

【讨论】：

谢谢！我认为中心已降级并且最好不再使用？宽度固定为 50%。这还不够固定吗（必须以 px 为单位）？我不明白为什么需要一个表格来使一个文本框居中，并认为当表格不是数据表格时不使用表格被认为是最佳做法？

你没有使用表格（html），你只是指定它应该显示为表格（CSS）。

它只是 html 中的文本，没有表格。然后 CSS 在文本周围创建边距、填充和边框的框。

@curls 不将 HTML <table> 元素用于非表格数据的原因不适用于为 display CSS 属性使用 table 值。 CSS 属性不会影响 HTML 语义，因此您可以在任何您喜欢的元素上使用任何 CSS，而不会破坏语义。

哦，那个展示台可能会为我打开很多选择。特别是在显示表单输入时。但在这种情况下，CSS 应该可以工作。我想了解它的矛盾之处。这只是一个框中的文本。它应该可以通过一些简单的 CSS 属性来实现。

【参考方案2】：

问题在于在 css 样式元素中使用了 html 注释，而不是 css 注释方法。

例如，这里的属性对它们有这样的评论：

border-color:tan;
border-style:solid;  <!-- this is a comment that should be /* */ style instead -->
border-width:5px;

-

html 样式的注释取消或混淆了在注释后输入的属性。虽然不是所有的属性都被取消了。

将这些 cmets 更改为 /* 这是 css 的注释样式，导致标签正常工作。