Можете ли вы объяснить код CSS, как показано ниже?

Question

margin-left:-500px;margin-right:-500px;

В чем смысл? Почему это так?

Answer 1

Прочитайте эту хорошую статью: Полное руководство по использованию отрицательных полей

Отрицательные поля обычно применяются в небольших дозах, но, как вы увидите позже, они способны на гораздо большее. Несколько замечаний по поводу отрицательных полей:

1. Они очень действительны CSS

Я не шучу над этим. W3C даже говорит, что «отрицательные значения для свойства маржи разрешены… », - сказал Нуфф. Проверьте статью для больше деталей.

2. Отрицательные поля не взломать

Это особенно верно. Это из-за непонимания отрицательных полей правильно, что он получил свой хакерский образ. Это становится взломом только если вы используете его чтобы исправить ошибку, которую вы сделали в другом месте.

3. Это идет с потоком

Не нарушает поток страницы, если применяется к элементам без плавающих элементов. Так что, если вы используете отрицательное поле для перемещения элемента вверх, все последующие элементы также будут подталкиваться.

4. Это очень совместимо

Отрицательные поля полностью поддерживаются во всех современных браузерах (и IE6 в большинстве случаев).

5. Он реагирует по-разному, когда применяются поплавки

Отрицательные поля не являются обычным CSS, поэтому их следует применять с волновало.

6. Dreamweaver не понимает этого

Отрицательные поля не отображаются в режиме конструктора DW. Почему ты вообще все равно проверяете свой сайт в Design View?

Answer 2

Возможно, он отменяет отступ в 500px для родительского элемента:

<div style="padding-left: 500px; padding-right: 500px;">
   <div style="margin-left:-500px;margin-right:-500px;"></div>
</div>

Answer 3

Я прочитал один раз (ссылка забыта), что отрицательные поля должны отправлять элементы в сторону, отправляя их в самую левую часть браузера. Он предназначен для скрытия элементов из браузера, если вы не хотите использовать

style="display:none"

так ли ведет себя элемент с отрицательными полями?