В этой части учебника, разберём что такое СSS блочная модель и как с ней работать, но по сути это работа с блочными элементами.
Что такое блочная модель:
Блочная модель в CSS, это и есть блочные элемент в HTML, то есть вы будите работать с обычными блокам в HTML.
Из чего состоит блочная модель:
А работать с ней очень просто, суть в том, что каждый элемент, имеет несколько параметров, это content, padding, border и margin, как на этой картинки.
Давайте разберём эту картинку, что тут, да как.
- Content — это то что посередине и выделен синим цветом, это как понятно из названия, хранит контент/данные;
- Padding — Это внутренние отступы, от контента, нужна для разделение рамок и контента, отмечено зелёным цветом;
- Border — Рамка элемента, она не обязательно должна быть вокруг, может быть только с одной стороны, отмечено жёлтым;
- Margin — Внешние отступу, используется для того, что бы отделить блоки, отмечено оранжевым;
Как работать с блочной моделью:
Теперь разберём как работать со CSS блочная модель, а точнее какие свойство для работа с ней нужно знать.
Content:
Для content есть два свойства, высота и ширина.
- height — Высота;
- width — Ширина;
Теперь перейдём к примеру, мы сделаем два блога на HTML разного цвета.
1 2 3 4 5 6 | <div class="red"> <p>Это красный блог</p> </div> <div class="green"> <p>Это зелёный блог</p> </div> |
Это обычный HTML, не чего интересного.
1 2 3 4 5 6 7 8 9 | div.red { background-color: red; } div.green { height: 50px; width: 100px; background-color: green; } |
Как видите, у одного мы меняем только цвет, а у другого, ещё и высоту и ширину, вот результат.
Можете заметить, верхний блог, которому мы только цвет поменяли, не как не изменился. Вы должны были запомнить, ещё с учебника по HTML, что блочный элемент, по умолчанию занимает всё ширину страницу, и сколько надо высоты.
Нижний блог, у него изменены размеры, по ширине и по высоте, то есть всё работает.
Padding:
Теперь перейдём к внутренним отступам, с ними всё не много сложнее.
- padding-top — Верхний внутренний отступ;
- padding-left — Левый внутренний отступ;
- padding-bottom — Нижний внутренний отступ;
- padding-right — Правый внутренний отступ;
- padding — внутренний отступы со всех сторон стразу;
Как видите тут несколько свойств, все они отличаются только в одном, это с какой стороны делать отступ.
Вот CSS, HTML я уже не буду делать, так как, будим использовать из предыдущего примера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | div.red { height: 50px; width: 100px; background-color: red; } div.green { height: 50px; width: 100px; background-color: green; padding-top: 20px; padding-left: 50px; padding-bottom: 10px; padding-right: 35px; } |
Как видите, абсолютно одинаковые свойства, но у зелёного добавлены padding’и, каждый их них имеет своё значение, вот результат.
Как видите у первого блока нет вообще не каких отступов от текста, у второго есть но они все разные.
Также надо поговорить и про обычный padding, который задаёт отступы для всех сторон, дело в том, что вы может задавить для разных сторон, разные отступы, вот как это делается.
1 | padding: top left bottom right |
То есть сначала вы задаёте верхний, потом левый и нижний отступ, последнее это правый, по часовой стрелки.
Вот как наш пример выглядел, если использовали только один padding.
1 2 3 4 5 6 | div.green { height: 50px; width: 100px; background-color: green; padding: 20px 50px 10px 35px; } |
Такой вариант мне нравится не много больше, но также есть и другие варианты использования, более симметричные.
1 2 | padding: [top bottom] [left right] padding: 10px 20px |
В этом примере вы должны использовать два значения, первое будит использоваться для верхнего и нижнего отступов, второй для левого и правого.
1 2 | padding: top [left right] bottom padding: 10px 20px 30px |
Тут уже используется три значения, первый для верхнего отступа, второй для баковых, третий для нижнего.
На этом с padding можно закончить.
Border:
Для создание рамок, есть только одно значение border, но оно принимает три значение, размер, цвет и тип рамки.
Вот пример CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | div.red { height: 50px; width: 100px; background-color: red; padding: 10px; } div.green { height: 50px; width: 100px; background-color: green; padding: 10px; border: 1px blue solid; } |
Вот результат.
У второго блока, который зелёный, появилась рамка,и как можете заметить, оно только ещё добавляет размер блоку.
Также стоит сказать, что значения тега border, можно ставить в разном порядке, не обязательно в том, котором я показал.
Ещё стоит упомянуть одно свойство, это border-radius, оно делает закругления углов, к примеру, если вы сделаете его значение 50% для квадрата, то у вас получится круг.
Margin:
Margin похож на padding, только это внешние отступы, вот все их типы.
- margin-top — Верхний внешний отступ;
- margin-left — Левый внешний отступ;
- margin-bottom — Нижний внешний отступ;
- margin-right — Правый внешний отступ;
- margin — внешний отступы со всех сторон стразу;
Вот пример работы с ним.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | div.red { height: 50px; width: 100px; background-color: red; padding: 10px; border: 1px blue solid; } div.green { height: 50px; width: 100px; background-color: green; padding: 10px; border: 1px blue solid; margin: 10px; } |
Мы добавили margin только для зелёного блока, поэтому он должен поменять свою позицию,
из-за отступов, вот результат.
Действительно позиция не много изменилась, я не буду дальше подробно описывать как работать с margin, так как, суть такая же как с padding, только это внешние отступы.
Единственное стоит сказать, что если вы будите делать отступы для двух блоков, которые стоят рядом, то они не будут складываться, они будут накладываться друг на друга.
То есть, если два блока имеют отступы «10px», то отступ между ними будет равен «10px», а если у одного из них отступ равен «20px», отступ между ними будет равен «20px».
Вывод:
В этой части учебника, мы разобрали что такое блочная модель CSS и как с ней работать.
Подписываетесь на соц-сети:
Оценка:
Загрузка...