Почему элементы в этом CSS взаимно уничтожают друг друга (в HTML без наследования, но с комментариями), которые не связаны друг с другом?

Question

При использовании этого класса некоторые элементы не отображаются. Какие из них отображаются, зависит от того, в каком порядке я поместил эти элементы. Решение оказалось в том, что использовался неправильный метод комментария. Использование комментариев в стиле HTML в элементе стиля CSS в файле 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

Проблема заключалась в использовании html-комментария, вместо метода комментария css, внутри элемента стиля css.

Так, например, атрибуты здесь имели такой комментарий к ним:

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

-

Комментарий в стиле html отменял или вводил в заблуждение свойства, введенные после комментария. Хотя не все атрибуты были отменены.

Изменение этих комментариев на / *, что является стилем комментариев CSS, заставило теги работать правильно.

Answer 2

Попробуйте добавить:

display: table;

Это будет center ваш div (потому что центрирование с margin: auto Работает только с элементами фиксированной ширины. display: table устраняет это.

Редактировать

Вы можете найти больше примеров на большой странице: Css Centering Things