Блоковая модель (боксовая модель, box model).
В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок). Браузер определяет размеры и положение боксов на странице, а также их свойства вроде цвета, фоновой картинки для того, чтобы отобразить их на экране.
В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. box model), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).
Для управления каждой из составных частей блока существуют соответствующие CSS свойства: внутренние отступы — padding, границы — border, внешние отступы — margin. При желании эти свойства можно задать для каждой стороны блока отдельно.
Посмотрим, как это работает на примере.
Создадим страницу cдвумя котами:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<linkrel="stylesheet" href="style.css">
<title>Коты</title>
/head>
<body>
<imgid="cat-red" class="cats" src="https://s00.yaplakal.com/pics/userpic/3/4/5/av-323543.jpg">
<imgid="cat-grey" class="cats" src="http://www.wapa.pe/sites/default/files/styles/img_171x110/public/imagen/2015/06/22/Nota-7798-videos_de_gatos_s_te_hace_feliz.jpg?itok=YXPmXwWg">
</body>
</html>
Теперь напишем в нашем файле стилей style.css:
{
.cats{
border:10px black solid; /*черная рамка толщиной 10px*/
margin:30px; /*внешний отступ со всех сторон 30px*/
padding: 20px; /*внутренний отступ со всех сторон 20px*/
}
Наши коты преобразились. Чтобы посмотреть детально наши отступы и области, нажмите правой кнопкой мыши на страницу и выбрать «Просмотр кода страницы». Откроется инспектор.
Можем выборочно написать внешний отступ с одной стороны и отодвинуть одного кота от другого:
.cats{
border:10px black solid; /*черная рамка толщиной 10px*/
margin:30px; /*внешний отступ со всех сторон 30px*/
padding: 20px; /*внутренний отступ со всех сторон 20px*/
}
#cat-red{
margin-right: 250px; /*внешний отступ справа 250px*/
}
Важная особенность! Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px.
Этот эффект называется эффектом «схлопывания» внешних отступов или «схлопывания» маргинов.
Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.
Свойство display.
Display – многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Display:block; -значение по умолчанию, для <p>, <div>, <form>, <ul>, <h1> и т.д.в этом случае, каждый элемент с display:block; располагается на новой строке, независимо от того какой размер он занимает.
<div>Ялюблю</div>
<div>IT Center</div>
Display:inline; -строчный элемент, значение по умолчанию для <a>, <strong>, <em>, <span>. Строчные элементы располагаются друг за другом в одной строке, при необходимости строка переносится. Особенности строчных элементов:
1.До и после строчного элемента отсутствуют переносы строки.
2.Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
3.Можно задавать только горизонтальные отступы.
Display:inline-block; - Ведет себя так же как и block, но у него отсутствует переход на новую строку. По умолчанию ни один тег не имеет такое значение. Но его можно задать в CSS.
Display:none; - удаляет элемент со страницы.
Существуют и другие значения для display, ознакомиться с ними вы можете здесь.
Сетки.
Поток — это порядок отображения элементов на странице. По умолчанию блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.
Потоком можно управлять и изменять привычное поведение элементов в потоке. Например, можно заставить блочные элементы двигаться не сверху вниз, а выстраиваться в несколько колонок.
А научившись управлять потоком, вы сможете строить сетки.
Свойство floatизменяет поведение блоков на странице. Оно определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Возьмем нашу страничку:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<linkrel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<divclass="text" id="firstblock">Ялюблю</div>
<divclass="text" id="secondblock">IT Center</div>
</body>
</html>
Добавим:
.text{
font-size: 80px;
float: right;
}
Теперь наши блоки с надписями прилипли к правому краю окна и поменяли последовательность расположения. Справа налево в одну строку.
Теперь попробуем второму блоку добавить float:left;
#secondblock{
float: left;
}
Как мы видим, второй блок прилип к левому краю, а первый остался справа. Они находятся на одном уровне, хотя следуют в HTMLдокументе друг за другом.
Добавим еще несколько блоков для наглядности:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<linkrel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<divclass="text" id="firstblock">Ялюблю</div>
<divclass="text" id="secondblock">IT Center</div>
<div class="numleft numbers 1</div>
<div class="numleft numbers">2</div>
<div class="numleft numbers">3</div>
<div class="numleft numbers">4</div>
<div class="numright numbers">5</div>
<div class="numright numbers">6</div>
<div class="numright numbers">7</div>
<div class="numright numbers">8</div>
<div class="numbers">9</div>
<div class="numbers">10</div>
<div class="numbers">11</div>
<div class="numbers">12</div>
</body>
</html>
.text{
font-size: 80px;
float:right;
}
#secondblock{
float: left;
}
.numbers{
font-size: 80px;
margin-right: 50px;
margin-left:50px;
}
.numleft{
float: left;
color: red;
}
.numright{
float: right;
color: blue;
}
Элементы с float:left(красные цифры) идут слева направо до тех пор пока умещаются, после чего переходят на новую строку и вновь идут слева направо. Другими словами left — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;
Элементы с float:right(синие цифры)работают аналогично, но их позиционирование идет справа налево.
float: none; (черные цифры) это значение по умолчанию.
float :inherit; наследует значение родителя.
Вы уже знаете, что по умолчанию блочные элементы растягиваются на всю доступную ширину родителя.
Если мы задаём элементу свойство float:left или float:right, то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.
Зафлоаченному элементу можно явно задавать размеры и отступы.
Есть тонкость, связанная со строчными элементами. Если зафлоатить строчный элемент, то он начинает вести себя как блочный, а именно: воспринимать размеры и отступы.
Зафлоаченные элементы выпадают из потока, но лишь частично:
• Блочные элементы, которые идут в коде после зафлоаченного блока, перестают его замечать. Они подтягиваются вверх и занимают его место, как будто его и нет.
• Строчные же элементы, расположенные в коде после зафлоаченного блока, начинают обтекать его со свободной стороны.
Ещё раз: для блочных элементов флоатные не существуют, но текст внутри блоков флоатные обтекает.
Такое поведение флоатов даёт интересные эффекты:
1. Эффект прохождения сквозь блоки. Проявляется, когда зафлоаченный элемент выше, чем несколько последующих за ним блоков.
2. Эффект выпадания из родителя или схлопывания родителя. Проявляется тогда, когда все дочерние блоки в родителе зафлоачены. В этом случае родитель схлопывается по высоте, как будто в нём нет содержимого, а блоки выпадают из него.
Еще одно важное свойство это clear, оно устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
None
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства floatили других настроек.
Both
Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
Left
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
Right
Отменяет обтекание с правой стороны элемента.
Inherit
Устанавливает значение родителя.
Позиционирование.
Подробнее рассмотрим позиционирование в CSS. За это отвечает свойство position.
По умолчанию оно равно static. В этом случае элементы отображаются на странице в том порядке, как они идут в исходном коде HTML. Чаще всего дальнейшая коррекция расположения элементов происходит с помощью внешних отступов: margin-top, margin-bottom,margin-right, margin-left.
Position:absolute; При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Это означает, что остальные элементы на странице будут вести себя так, словно элемента с position:absolute не существует. Такому элементу можно задать координаты с помощью свойств top,bottom, left, right. Эти свойства задают отступы от соответствующего края браузера. Свойства top, leftявляются более приоритетными чемbottom,right. Так что, в случае конфликта, браузер будет ориентироваться именно на них.
Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.
Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.
Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.
Position:fixed; По своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.
Position:relative; положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз , отрицательное — сдвиг вверх.
Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо. При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.
Медиазапросы
В CSSвозможно определить параметры различных технических устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции.
| Тип | Описание |
| all | Все типы. Это значение используется по умолчанию. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Смартфоны и аналогичные им аппараты. |
| Принтеры и другие печатающие устройства. | |
| projection | Проекторы. |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Самые важные для нас условия это размеры экрана: