отрицательные поля в css: хороший учебник и трюки на сайте?

Один из аспектов CSS, который иногда смущает меня, когда я смотрю на сайт - это отрицательные поля, используемые для макета. Мне требуется некоторое время, чтобы понять, что дизайнер пытается сделать с отрицательными полями на странице. Я имею в виду страницу, на которой есть несколько элементов div, несколько из которых используют отрицательные поля, и я пытаюсь понять, что происходит. Я использую Firebug, чтобы изменить значения и увидеть эффект.

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

Попытка выяснить, что оставляют на полях: -100%.

Ответы на вопрос(2)

На сайте мне нужно было разметить всю главную страницу, которая содержала 8-12 «коробок». (1), поэтому я использовал «boder: 1px solid black» чтобы увидеть, что поля находятся в правильных местах, затем заполните их сплошным фоном, чтобы получить «более или менее дизайн сайта».

Через несколько дней появились настоящие фоновые изображения. Изображения содержали небольшую «тень», и содержание изображений было оттенком, основанным на сплошном цвете, который я использовал.

Решением было использование: & quot; margin: 0px -5px -5px -5px & quot; чтобы сохранить точное положение / размер, а затем установить новые изображения в качестве фона оригинальных полей.

Надеюсь, что это дает вам представление о том, когда использовать отрицательные поля.

(1) терминология, использованная клиентом, была ламерской

Решение Вопроса

оста. Относительная ширина может привести к интересному поведению. В основном, процентная ширина относится к содержащему элементу. Если родительский элемент имеет абсолютную ширину, то его легко разработать. Часто это не так, поэтому вы можете получить сложные вычисления того, как браузер вычисляет, сколько места ему нужно. Если все его дочерние элементы имеют процентную ширину, то он часто будет иметь меньшую ширину, чем обычно рассчитывает разработчик.

Итак, когда вы видитеmargin-left: -100%Это означает, что этот элемент перемещается за пределы родительского элемента влево на полную ширину родительского элемента. Одним из следствий отрицательных полей (в частности) является то, что пространство, в которое они перемещаются, часто не учитывает их присутствие, и вы должны учитывать это при планировании макета.

Еще один хороший совет: если у вас есть такая ситуация:

<div id="outer">
  Outer
  <div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>

это действительно не сработает. Вернее, он будет работать на (iirc) Firefox, но не на IE (любой версии). Поэтому, если вы хотите сделать что-то подобное, вам нужно использовать содержащий элемент.

<div id="outer">
  Outer
  <div id="wrap">
    <div id="inner">Inner</div>
  </div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>

и это будет гораздо более совместимо с браузером.

Вот полный пример, который демонстрирует отрицательные поля (проверено на FF, Chrome и IE8):

removed dead ImageShack link

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; } 
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>

Ваш ответ на вопрос