Начну с того, что я веб-разработчик, а не веб-дизайнер. Я обнаружил, что на протяжении всего моего путешествия кто-то создал то, что я ищу, и они сделали это лучше, чем я мог себе представить. Обычно у них есть HTML / CSS, с которыми вы можете поработать и изменить. Однако есть несколько вещей, которые по-прежнему остаются загадкой для многих людей, поскольку я вижу, что каждый год возникают одни и те же типы вопросов о переполнении стека.
Еще одна проблема, с которой я столкнулся, заключается в том, что большинство дизайнеров хотят показать, насколько они хороши, и включают ненужное количество CSS в свои таблицы стилей. Вы быстро понимаете, что это по большей части вздор.
О чем мы поговорим в этой статье:
- Блок против встроенных элементов
- Встроенная маржа
- Контейнер полной страницы
- Баннер в полную высоту под навигацией
- Центрирование содержимого в баннере
- Выравнивание содержимого в баннере
- Фоновое изображение в полную высоту
- Коробка Модель
- Размеры коробки
- Изображение баннера Исправлено при перемещении текста
- Делаем фоновое изображение темнее
- Подгонка изображения к контейнеру
Давайте пройдемся по нескольким до боли простым примерам без лишних слов. Эта статья будет обновляться всякий раз, когда я найду что-то еще, с чем люди, кажется, борются.
Блок против встроенных элементов
Вы когда-нибудь пытались добавить маржу сверху к тегу привязки, и это просто не работает? Это потому, что margin-top - это свойство элемента block, например тега div. Вот список всех элементов блока:
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Вот список всех встроенных элементов:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Согласно W3, свойства Margin определяют ширину области поля поля. Сокращенное свойство margin устанавливает поле для всех четырех сторон, в то время как другие свойства поля устанавливают только соответствующие стороны. Эти свойства применяются ко всем элементам, но вертикальные поля не влияют на незамещенные встроенные элементы ».
Если вы действительно хотите добавить margin-top к встроенному элементу, вы можете добиться этого несколькими способами. Вы можете рассматривать этот элемент как блок или встроенный блок. Блок будет занимать всю ширину экрана, а встроенный блок будет занимать необходимое пространство вокруг встроенного элемента.
В приведенном выше примере создается ссылка с красным фоном, чтобы вы могли видеть, что верхнее поле не повлияло на тег привязки.
Если мы изменим тег привязки на элемент block, он будет охватывать всю ширину окна, но свойство margin-top будет работать.
Наконец, если мы не хотим, чтобы тег привязки занимал всю ширину окна, мы можем просто использовать inline-block в качестве параметра отображения. Поля все еще действует, но ширина сохраняется в элементе.
Встроенная маржа
Браузер имеет встроенную маржу. Если вы хотите, чтобы ваша навигация отображалась в верхней части экрана и расширялась слева направо без каких-либо полей, вам сначала нужно удалить это поле.
Давайте создадим элемент div и придадим ему красный цвет фона. Вы быстро увидите поля вокруг него.
Давайте удалим встроенное поле для тега body.
И вот так убирают маржу. В большинстве случаев вы увидите, что поле удалено как с тегов body, так и с тегов html.
Если вы хотите удалить встроенное поле для всех тегов, вы можете использовать символ *.
Контейнер полной страницы
Вы видели эти полностраничные баннеры и задавались вопросом, как вообще они это делают? На самом деле это довольно просто. В этом примере нам сначала нужно удалить внутреннее поле браузера и создать элемент div.
Мы можем использовать единицы view-height и view-width для наших свойств ширины и высоты. Поскольку это блочный элемент, который уже занимает всю ширину браузера, нам просто нужно свойство height. Мы установим высоту 100, что займет 100% от текущей высоты браузера.
Вы можете добавить другие теги div внизу с тем же свойством view-height, и у вас будут секции с полной высотой окна.
Даже если вы измените размер окна, оно все равно займет 100% доступной площади. Я добавил классы red-banner и blue-banner, чтобы показать различия.
Баннер в полную высоту под навигацией
Если у вас есть элемент вверху, например панель навигации, и вы попытаетесь добавить под ним полноразмерный баннер, вы увидите, что на самом деле он занимает высоту, превышающую доступное пространство. Если ваше окно имеет высоту 800 пикселей, но панель навигации имеет высоту 100 пикселей, 100vh будет видеть высоту контейнера до 800 пикселей. Давайте посмотрим на это, прежде чем искать решение.
Вы можете видеть, что появляется полоса прокрутки, означающая, что высота больше, чем доступный размер экрана. Если прокрутить вниз, вы увидите, что этого достаточно, чтобы убрать панель навигации.
Чтобы баннер занимал 100% доступного пространства на экране, мы должны вычесть высоту панели навигации из 100vh. Итак, мы можем использовать функцию calc (), чтобы помочь нам в этом. Мы видим, что высота навигации составляет 50 пикселей, поэтому давайте вычтем 50 пикселей из 100vh: calc(100vh - 50px). Убедитесь, что у вас есть пробел до и после оператора вычитания, иначе он не сработает.
И вот так убрана полоса прокрутки.
Центрирование содержимого в баннере
Продолжим приведенный выше пример. Допустим, мы хотим, чтобы текст Banner располагался по центру внутри нашего тега div. Самое простое решение - преобразовать баннер div в гибкий блок и использовать свойства justify-content и align-items. Установка justify-content на center приведет к горизонтальному выравниванию элементов по центру экрана, а установка align-items на центр будет выравнивать по вертикали Предметы.
Это не обязательно должен быть текст. У вас могут быть другие элементы внутри тега div и выровнять их. Мы собираемся добавить внутренний div к баннеру div. Этот внутренний div будет красным, будет иметь заголовок и подзаголовок и будет расположен по центру страницы. Я уберу навигацию из этого примера, чтобы убрать лишнюю ерунду.
Как видите, внутренний div центрирован, но его содержимое не центрировано. Поскольку в нем есть только текст, мы могли бы использовать свойство text-align и установить его в центр, или мы могли бы использовать flex, как мы это делали в баннере div. В этом примере мы будем использовать свойство text-align.
Помните, что text-align выравнивает текст только по горизонтали. Если вы установите высоту вашего внутреннего div на большее значение, вам нужно будет использовать метод flex для центрирования элементов по вертикали. Единственная проблема в том, что после использования flex элементы выравниваются по горизонтали.
Чтобы снова выровнять их по вертикали по центру, вам нужно установить для flex-direction значение column; по умолчанию для него установлено значение row.
Выравнивание содержимого в баннере
Давайте перейдем к выравниванию содержимого баннера (а не только к его центрированию). Я уверен, что вы, вероятно, сможете понять это из приведенных выше примеров, но давайте все равно посмотрим на это. Давайте поработаем с примером сверху (слегка измененным, чтобы убрать ворс). В этом примере показан баннер с внутренним элементом div, который находится по центру экрана.
Чтобы выровнять внутренний div по правому нижнему углу, мы могли бы просто изменить свойства justify-content и align-items. Мы установим оба параметра на flex-end.
Чтобы переместить его в верхний правый угол, используйте flex-start для вертикального выравнивания.
Я уверен, что вы сможете понять, как настроить конфигурацию в верхнем левом и нижнем левом углу. Мы также можем добавить немного поля к внутреннему элементу div, чтобы отделить его от края.
Чтобы увидеть полный список вариантов, с которыми вы можете поэкспериментировать, ознакомьтесь с документацией.
Что, если мы хотим быть очень конкретными? Например, я хочу, чтобы мой внутренний контейнер был 12 пикселей справа и 27 пикселей снизу? Мы можем это сделать. Нам просто нужно убедиться, что внутренний контейнер позиционируется абсолютно. Затем мы можем установить свойства top, right, left и bottom.
Фоновое изображение в полную высоту
Как только вы получите некоторые основы сверху вниз, добавление фоновых изображений, а затем текста поверх них должно казаться довольно естественным. Продолжим работу с приведенным выше примером.
Для начала давайте снова воссоздадим баннер во всю высоту с центрированным внутренним элементом div.
Давайте изменим цвет фона с синего на реальное изображение. Я собираюсь получить изображение с Pixabay.
Удалите свойство background-color и замените его свойством background. Укажите url на путь, по которому будет сохранено изображение. Поскольку мое изображение находится в той же папке, что и мой файл, я могу просто добавить имя изображения в функцию url ().
Если я изменю размер браузера, он будет показывать верхний левый угол изображения. Я хочу, чтобы его размер был изменен вокруг центра изображения. Этого можно добиться с помощью свойства background-position.
Это отлично работает, если изображение большое, но что, если изображение не такое большое? Давайте посмотрим на уменьшенную версию этого изображения.
Это не совсем похоже на то, что мы предполагали. В большинстве случаев мы просто хотим растянуть изображение, чтобы заполнить пространство. Начнем с того, что избавимся от повторения. Мы установим для свойства background-repeat значение no-repeat.
К сожалению, теперь вокруг него образовалось много белого пространства. Причина, по которой он находится в центре экрана, заключается в том, что для свойства background-position ранее было установлено значение center. Давайте растянем изображение, чтобы заполнить пространство контейнера. Мы можем сделать это, установив для свойства background-size значение cover.
В зависимости от разрешения экрана и качества изображения изображение может выглядеть размытым. Насколько размыто приемлемо? Это вам решать.
Давайте быстро добавим навигацию обратно наверх и уберем высоту навигации из общего фонового контейнера. Текст навигации выравнивается по правому краю и по центру и имеет отступ по правому краю 20 пикселей. Общая высота навигации составляет 50 пикселей, поэтому из контейнера баннера было вычтено 50 пикселей.
Коробка Модель
Я уверен, что большинству из вас уже надоело слышать о коробчатой модели. Это важно для следующего раздела, поэтому я кратко расскажу об этом здесь.
Давайте создадим элемент div и установим красный цвет фона. Текст, который вы видите, находится внутри области содержимого.
Свойство background-color применяется к области content, а также к области padding. Давайте добавим отступ, чтобы увидеть это.
Давайте добавим границу к элементу div.
И наконец, давайте добавим поля к div.
Когда мы исследуем следующую тему, важно иметь это изображение.
Размеры коробки
Посмотрим, сможешь ли ты это угадать. Если у нас есть элемент div со следующими заданными свойствами, каковы высота и ширина элемента div?
div {
height: 100px;
width: 100px;
padding: 10px;
border: 1px solid black;
}
Вы угадали? Высота не 100 пикселей, и ширина тоже. На самом деле они имеют размер 122 пикселя каждый. Как? Из-за того, как работает размер коробки. Без свойства размера блока CSS фактическая ширина и высота рассчитываются следующим образом:
- Фактическая ширина = ширина + отступ + граница
- Фактическая высота = высота + отступ + граница
Итак, фактическая ширина = 100 пикселей + 20 пикселей + 2 пикселей. Почему отступ 20 пикселей? Потому что у нас есть левый и правый отступ. Почему граница 2 пикселя? Потому что у нас граница в 1 пиксель слева и граница в 1 пиксель справа.
Это может усложнить задачу, если мы хотим, чтобы на экране отображался полноразмерный баннер. Давайте создадим навигацию и баннер, как мы делали раньше. Высота навигации составит 50 пикселей, а размер баннера - 100–50 пикселей.
Давайте добавим отступ в меню навигации: 10 пикселей по периметру.
Вы сразу видите, что появляется полоса прокрутки. Мы можем использовать два разных подхода к решению этой проблемы. Первый вариант - вычесть 20 пикселей, которые были добавлены отступом. В нашем банном контейнере вместо 50 пикселей вычтем 70 пикселей.
Другой вариант - изменить способ расчета ширины и высоты контейнера. Мы можем добавить свойство box-sizing и установить для него значение border-box. Это говорит браузеру, что высота 50 пикселей, которую мы только что установили, должна быть высотой, на которую мы смотрим. Отступ и граница должны быть заключены в пределах этих 50 пикселей. Как только это будет установлено, мы можем вернуться к обычному вычитанию 50 пикселей из 100vh, чтобы получить баннер, занимающий 100% доступной площади.
Изображение баннера Исправлено при перемещении текста
Вы когда-нибудь видели те страницы, на которых вы начинаете прокручивать вниз, а изображение фиксируется, пока текст перемещается для этого конкретного раздела. И снова добиться этого довольно просто. Давайте создадим страницу с тремя элементами div.
- Первый и третий div будут иметь цвет фона лосося, а второй div будет иметь фоновое изображение. Фоновое изображение просто помогает визуализировать этот процесс еще больше.
- Каждый div также будет иметь тег p с некоторым текстом внутри него. Тег p будет синим и будет иметь отступы.
- Каждый div будет иметь высоту 100vh.
- Каждый тег p внутри каждого div будет центрирован на экране.
Все это мы уже делали раньше. Ничего не должно вас пугать.
Тем из вас, кто паникует, давайте быстро пройдемся по CSS. Каждый раз, когда свойство повторяется между div, я разделял его. Например, мы собираемся установить высоту 100vh для классов banner и banner-fixed, поэтому я сгруппировал их. Все остальное должно быть самоочевидным.
Посмотрим, что происходит, когда мы прокручиваем страницу вниз.
Пока что он ведет себя как обычная веб-страница, которую мы привыкли видеть. Содержимое и фоновое изображение второго блока div перемещаются вместе. Давайте изменим это, исправив фоновое изображение второго div во время перемещения содержимого. Этого можно добиться, установив для свойства background-attachment значение fixed.
Делаем фоновое изображение темнее
Если у вас есть изображение баннера, и вы хотите, чтобы текст выделялся, вы можете затемнить фоновое изображение. Для этого давайте создадим баннер и добавим к нему текст. Мы центрируем текст с помощью гибкости и делаем шрифт белым и жирным. Это действительно будет выглядеть довольно прилично.
Если мы хотим сделать изображение немного темнее, мы можем применить линейный градиент с непрозрачностью 50% для начала и увеличить или уменьшить его оттуда. Линейный градиент применяется к свойству background.
Подгонка изображения к контейнеру
Возможно, вы уже сталкивались с этой проблемой раньше. У вас есть контейнер, и у вас есть изображение внутри контейнера. Изображение слишком велико для контейнера, поэтому оно выходит из контейнера.
Мы можем использовать свойство overflow и установить для него значение hidden. Чтобы центрировать изображение, мы можем использовать flex.
