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

Question

使用此类，某些元素不会显示。哪些显示取决于我将这些元素放入哪个顺序。解决方案结果是使用了错误类型的评论方法。在CSS样式元素中使用HTML样式注释，在html文件中，会产生各种各样的破坏。

我想要所有人同时：

〜彩色框中的文字，〜框中心的页面，〜文字120px从框的左侧边缘〜棕褐色边框〜框50％页面宽度

• 在片段中，当边距位于CSS列表中较高位置以使其在框中心时起作用，边框从棕褐色变为黑色！
• 边距：auto无法使CSS的某些顺序在页面上居中。
• 当填充左边后边距放在css中以使边框为棕褐色时，50％宽度变为100％宽度。
• 当我的边距在中心工作并且宽度工作在50％时，填充左边停止工作。

我已经把他们变成了这么多订单，但是我还没有发现什么能够取消其他东西的原因以及原因。

我无法弄清楚要搜索的任何关键字，以了解更多为什么会发生这种情况，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>

--

我也在代码创建器中创建了它，但是里面的大小并不能说明它是否全部工作。 （事实证明我不知道你可以在问题的底部运行代码片段，看看它是否正常工作。）

此代码段应为棕色边框，左边距为120px。 （补充：解决方案是那些由代码段中的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的注释样式，导致标记正常工作。