20. Конфликты полей.
Конфликты полей - это парадоксы технологии CSS, когда интуитивно кажется, что должно быть так, а на самом деле получается по-другому.
Конфликт 1. Столкновение двух блочных элементов маржинами.
Если верхний элемент имеет нижний маржин равный 30px (margin-bottom:30px;), а второй нижний элемент имеет верхний маржин равный 20px (margin-top:20px;), то можно ожидать, что расстояние между ними будет равным 50px, т.к. 30+20=50.
Пусть имеется некий желтый див и верхний маржин у него равный 50px (margin-top:50px;)
Маржины не суммируются, а берется наибольшее значение из данных двух.
Опять воспользуемся дополнением к FireFox - "Web Developer" (Веб Девелопер, Веб Разработчик). Нажмите кнопки Miscellaneous - Disply Ruler (Разное - Показать Линейку) и теперь вы можете измерять расстояния на экране.
Кроме того, можно нажав кнопки Outline - Outline Block Level Elements (Контуры - Контур элементов уровня блока) выделить блочные элементы для максимального удобства.
Что касается наших парадоксов, то второй из них лечится добавлением бордеров к элементам. И это, кстати, только создает дополнительную путаницу. Представьте, что дизайнер при подготовке к проекту использовал бордеры и все было ок. А затем в последний момент, перед сдачей проекта эти бордеры убрал. Тут то весь дизайн и рассыпался.
Кардинально оба конфликта разрешаются путем использования паддингов вместо маржинов.
Теперь исследуем на практическом примере:
css_020_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_020_001.zip ← скачайте пример, чтобы установить на свой сайт...
Конфликт 1. Столкновение двух блочных элементов маржинами.
Если верхний элемент имеет нижний маржин равный 30px (margin-bottom:30px;), а второй нижний элемент имеет верхний маржин равный 20px (margin-top:20px;), то можно ожидать, что расстояние между ними будет равным 50px, т.к. 30+20=50.
верхний элемент имеет нижний маржин равный 30px (margin-bottom:30px;)
нижний элемент имеет верхний маржин равный 20px (margin-top:20px;)
Естественно было бы рассчитывать, что расстояние между ними будет 50px, но... Маржины не суммируются, а берется наибольшее значение из данных двух.
Естественно было бы рассчитывать, что расстояние между ними будет 50px, но... Маржины не суммируются, а берется наибольшее значение из данных двух.
Внутри желтого дива помещаем внутренний див и верхний маржин у него равный 60px (margin-top:60px;)
Конфликт 2. Поглощение маржинов у внутренних и внешних элементов.Пусть имеется некий желтый див и верхний маржин у него равный 50px (margin-top:50px;)
Маржины не суммируются, а берется наибольшее значение из данных двух.
Кроме того, можно нажав кнопки Outline - Outline Block Level Elements (Контуры - Контур элементов уровня блока) выделить блочные элементы для максимального удобства.
Что касается наших парадоксов, то второй из них лечится добавлением бордеров к элементам. И это, кстати, только создает дополнительную путаницу. Представьте, что дизайнер при подготовке к проекту использовал бордеры и все было ок. А затем в последний момент, перед сдачей проекта эти бордеры убрал. Тут то весь дизайн и рассыпался.
Кардинально оба конфликта разрешаются путем использования паддингов вместо маржинов.
Теперь исследуем на практическом примере:
css_020_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_020_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
