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

Question

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

我同时想要：

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

在代码片段中，当边距在 CSS 列表中位于较高位置以便它在框居中时，边框从棕褐色变为黑色！
在 CSS.
当 margin 在 padding-left 之后的 css 后面放置时，边框为棕褐色，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>

--

我也在代码创建器中创建了它，但是里面的大小并不能说明它是否全部有效。（结果我不知道你可以运行问题底部的代码片段，看看它是否有效。）

此代码段应具有棕色边框和 120 像素的左边距。（补充：解决方案是那些被代码段中的 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>

Answer 1

尝试添加：

display: table;

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

编辑:

您可以在精彩页面上找到更多示例：Css Centering Things

Answer 2

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

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

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

-

html 风格的评论取消了或混淆了评论后输入的属性。尽管并非所有属性都被抵消了。

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

为什么这个 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?

html

css

comments

margin

overwrite