Блочная модель CSS
Блочные и строчные элементы
Свойства блочной модели очень важны, чтобы получить действительно красивый и современный дизайн сайта вместо простого отформатированного текста.
Для того, чтобы построить такой дизайн необходимо понимать одну важную вещь. HTML-элементы – это всегда прямоугольные блоки с заданными свойствами. Из них-то, как из конструктора Lego и состоит любая, даже самая сложная, веб-страница. Один блок – одна прямоугольная деталька в общей картине.
Однако, не все элементы одинаковые. HTML-элементы делятся на блочные и строчные.
Блочные элементы
- никогда не располагаются в строчку по горизонтали;
- стремятся занять всю доступную ширину.
Строчные элементы
- по умолчанию становятся в строчку, пока помещаются;
- занимают ровно столько, сколько нужно для их содержимого.
Преобразование строчных в блочные и наоборот
- Если элемент является блочным (строчным) по умолчанию, это не значит, что ты не можешь заставить его вести себя с точностью до наоборот;
- Для того, чтобы превращать блочные элементы в строчные или строчные в блочные существует CSS-свойство display. Оно может принимать следующие значения:
- inline - вести себя, как строчный;
- block - вести себя как блочный;
- inline-block - совмещает лучшее от строчных и блочных.
Блочная модель
Для того, чтобы создавать профессиональный дизайн, в первую очередь, необходимо научиться управлять размерами элементов.
Размеры для блоков задаются при помощи свойств width и height:
Отступы, поля и границы
На самом деле прямоугольный блок не так-то прост и в свою очередь состоит из нескольких составляющих частей.
Если представить, что содержимое блока (текст, картинка или что-то еще) - это человечек, тогда сам блок - это его жилище, загородный дом, как у бабушки в деревне.
Что это значит? Это значит, что блок состоит не только из содержимого (самого человечка), но еще и из:
- пространства внутри дома;
- стен дома;
- двора вокруг дома.
В таком случае, веб-страница - это целая деревня из таких домов, граничащих друг с другом!
Точно так же “живут” и элементы на веб-странице. На самом деле любой элемент состоит не только из его содержимого. Кроме этого существуют еще:
- внутренние отступы;
- границы;
- внешние поля.
Давайте посмотрим, например, вот на такие кнопки:
Возможно вы удивитесь, если я скажу, что это никакие не кнопки, а самые обыкновенные ссылки, оформленные с использованием блочной модели! Посмотрите, в случае с красной кнопкой “Danger” - это текст ссылки, красная линия - это граница. Между контентом и границей существует внутренний отступ, он нужен, чтобы рамка не прилипала к тексту, ведь тогда это будет выглядеть совсем плохо.
Между кнопками также есть немного “воздуха”. Мы его не видим, но это дело рук внешнего поля, оно используется для того, чтобы соседние элементы не “прилипали” друг к другу.
Для каждого из этих параметров есть отдельное CSS свойство.
CSS-свойства:
1) padding - внутренний отступ;
2) margin - внешнее поле;
3) border - граница.
Элементы-пустышки
Использование DIV
Тег div в HTML является блочным элементом верстки. Используется как контейнер для содержимого.
С помощью тега div обычно создается каркас и внутренняя структура страницы.
Тег div может содержать вложенные div элементы в неограниченном количестве.
Фрагменты дизайна
Кнопка в стиле Android
На платформе при помощи тега button созданы две кнопки. Также в CSS странички уже настроен шрифт ("Roboto" из Google Fonts). Допишите им стили так, чтобы эти кнопки походили на образцы.
Важно! По умолчанию кнопка имеет обводку. Чтобы ее убрать, используй border: none; outline: none;
Настройки:
- Размер шрифта: 14 пикселей;
- Padding: сверху и снизу - 10 пикселей, справа и слева - 16;
- Цвет: фона - RGB(38,156,164), текста - белый.
Контурная кнопка
Подсказка: у этой кнопки явно видно небольшое скругление углов. Это делается при помощи свойства border-radius: 4px;
Настройки:
- Цвет обводки и шрифта: #28A745(#28A745).
- Размер шрифта: 16 пикселей;
- Шрифт: жирный;
- Внутренние отступы: вертикальные - 6 пикселей, горизонтальные - 12 пикселей.
