Что вы не знаете о расчете процентной маржи в CSS
Большинство веб-дизайнеров думают, что они хорошо знают CSS. В конце концов, в этом нет ничего особенного - несколько типов селекторов, несколько дюжин свойств и некоторые каскадные правила, которые вам едва нужно помнить, поскольку они сводятся к здравому смыслу. Но когда вы переходите на уровень сложности, есть много неясных деталей, которые действительно понимают лишь немногие дизайнеры..
Когда я изучил результаты бесплатного теста CSS, который я предлагал онлайн в течение последних шести месяцев, я обнаружил, один вопрос, который почти ни один. Никто получил право. Из тысяч людей, которые прошли тест, менее 14% правильно поняли.
Вопрос сводится к этому: Как вы рассчитываете процентные маржи?
Вопрос
Скажем, на вашем сайте есть контейнер ДИВ, и внутри этого контента ДИВ:
Теперь давайте дадим этот контент ДИВ верхнее поле:
.content margin-top: 10%;
Хорошо, так что это 10% ... но 10% какие? Это вопрос, который только 13,8% людей могут ответить правильно. И имейте в виду: эти люди имеют доступ к Google!
Что мне нравится в этом вопросе, так это то, что похоже, ответ должен быть очевидным. Настолько, что я подозреваю, что большинство людей просто делают предположение (и угадывают неправильно). Но возможно это не кажется очевидным для вас. Я имею в виду, что если вы действительно используете свое воображение, браузер может рассчитать маржу таким образом.
Так что если я ограничу это для вас, так как вопрос в тесте на самом деле множественный выбор. Вот ваши варианты:
- 10% высоты содержимого div
- 10% высоты контейнера
- 10% ширины содержимого div
- 10% ширины контейнера
Помните, только 13,8% людей могут выбрать правильный ответ из этого списка. Это намного хуже, чем шанс!
Посмотрите внимательно на ответы; вы увидите, что на самом деле нужно знать только две вещи:
Контейнер или Контент?
Во-первых, это размер поля в зависимости от размера самого содержимого div или от размера контейнера div?
Теперь это не дай мне, но вы, вероятно, можете доверять своим инстинктам. Если бы я установил значение div равным 50% ширины его контейнера, а затем я бы хотел, чтобы его левые и правые поля заполняли оставшееся пространство, я бы, естественно, установил их равными 25% каждый (поэтому проценты в сумме составляют 100%). Чтобы это работало, процентные поля должны основываться на размерах контейнера.
Конечно, две трети людей, прошедших тест, правильно понимают эту часть ответа..
Ширина или Высота?
второй, это размер поля на основе ширины или высоты этого элемента?
Если вы обращали внимание, вы, вероятно, уже настороже. Для стольких людей, чтобы выбрать правильный ответ, это должен быть хитрый вопрос, верно?
И все же, держу пари, что ты едва веришь, что ответ не рост. Ну, это не так.
Да, мы говорим о верхней границе здесь. Да, размер этого поля является вертикальным измерением. Да, если блок составляет 50% от высоты его контейнера, и вы дали ему верхнее поле в 25%, вы ожидаете, что он составит 25% от высоты контейнера. И ты ошибаешься.
Не расстраивайтесь, если вы думали, что это должен быть рост. Почти 80% людей, которые сдают тест, согласны с вами:
Это имеет смысл ... Нет, действительно!
Все еще не веришь в это? Вот цитата из спецификации W3C CSS:
Процент рассчитывается относительно ширины содержащего блока сгенерированного блока. Обратите внимание, что это верно и для margin-top и margin-bottom.
То же самое касается верхнего и нижнего заполнения, если вам интересно. Что касается границ, нельзя указывать их ширину в процентах.
Итак, на данный момент, вы, вероятно, думаете, что создатели CSS либо помешанный, или они просто совершили действительно глупую ошибку. Но я здесь, чтобы сказать вам, есть две веские причины, чтобы основывать вертикальные поля на ширине содержащего блока:
Горизонтальная и вертикальная согласованность
Разумеется, существует сокращенное свойство, которое позволяет указать поле для всех четырех сторон блока:
маржа: 10%;
Это расширяется до:
маржинальная вершина: 10%; наценка справа: 10%; нижнее поле: 10%; поле слева: 10%;
Теперь, если бы вы написали что-либо из вышеперечисленного, вы, вероятно, ожидаете, что поля на всех четырех сторонах блока будут одинакового размера, не так ли? Но если бы поля margin-left и margin-right были основаны на ширине контейнера, а поля margin-top и margin-bottom были бы основаны на его высоте, то они обычно были бы разными!
Избежание круговой зависимости
CSS размещает содержимое в блоках, расположенных вертикально вниз по странице, поэтому ширина блока обычно полностью определяется шириной его родительского элемента. Другими словами, вы можете рассчитать ширину блока, не беспокоясь о том, что внутри этот блок.
Высота блока - это другое дело. Обычно высота зависит от комбинированной высоты его содержимого. Измените высоту содержимого, и вы измените высоту блока. Увидеть проблему?
Чтобы получить высоту содержимого, вам нужно знать верхнее и нижнее поля, которые применяются к нему. И если эти поля зависят от высоты родительского блока, у вас проблемы, потому что вы не можете рассчитать одно, не зная другого!
Основывая вертикальные поля на ширина контейнера нарушает эту круговую зависимость и позволяет выложить страницу.
Эйс Класс
Итак, у вас есть: самый сложный вопрос на тесте, и теперь вы можете ответить на него. Хотите знать, как бы вы поступили на остальной части теста? Попробуй сам. Я обещаю, большинство вопросов гораздо проще, чем этот.
Между тем я нахожусь в поисках нового сложного вопроса! Какую деталь CSS вы думаете никто не знает?
Примечание редактора: Это написано для Hongkiat.com Кевин Янк. Кевин писал о сети с 1999 года, с книгами по PHP, CSS и JavaScript. Он также принимал подкасты, выступал на конференциях и проводил видео-тренинги, посвященные Интернету. Сейчас он возглавляет команду разработчиков в Sit the Test, веб-приложении для создания и прохождения онлайн-тестов..
Больше на Hongkiat:
- Веб-дизайн: одинаковая высота столбца с помощью CSS
- 6 хитростей CSS для выравнивания контента по вертикали
- Взгляд на CSS-единицы: пиксели, EM и процент
- Взгляд в: CSS3 Размеры коробки
Теперь прочитайте: 10 скрытых свойств CSS3, которые вы должны знать
