Как видит человек:
Как видит браузер:
Давайте поймем, что все 5 свойств прямоугольника
можно разделить на 3 зоны. И найдем аналогии
Зона 1: высота (height) и ширина (width) фактического элемента
Зона 2: внутренняя область вокруг элемента (padding) и граница (border)
Зона 3: пустое пространство, отделяющее элемент от соседних (margin)
Это алгоритм, который обрабатывает документ и отображает его на экране устройства.
Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, один или несколько боксов, согласно боксовой модели CSS
MDN Web DocsЭто алгоритм, используемый движком CSS для расположения блоков на макете
Viewport - это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.
Особенности
Каждый элемент блочного уровня генерирует один главный бокс блочного уровня, который
Особенности
Но некоторые элементы кроме главного бокса генерируют дополнительные, например
I will display as a list item.fake-list { display: list-item; list-style-position: inside; }
Блочные элементы по умолчанию:
p | div | pre | ol | ul | dl |
h1 | h2 | h3 | h4 | h5 | h6 |
address | blockquote | fieldset | form | hr | table |
Необходимое CSS-свойство
Говорят, что элемент является боксом блочного уровня, когда:
display: block; /* а так же list-item, table, flex, ... */
Элемент с display: flex
участвует в
блочном контексте форматирования, а для своих дочерних элементов
он сам создает
гибкий (flex) контекст форматирования,
о котором расскажут в следующих лекциях
Занимают всю доступную ширину и выстраиваются сверху вниз
Участвуют в блочном контексте форматирования
Это часть визуального CSS-рендеринга веб-страницы
В нем действуют правила, изложенные в блочной модели CSS, которая определяет, как поля, границы и отступы элемента взаимодействуют с другими блоками в том же контексте.
Могут создавать вокруг себя анонимные блочные боксы
Что это?
В случае смешанного контента
алгоритм визуального форматирования добавляет
дополнительную обёртку
для текстового содержимого — анонимный бокс.
Пример
Какой-то текст
с параграфом внутри
и текстом в конце.
с параграфом внутри
и текстом в конце.Особенности
На размеры и положение элемента часто влияет его содержащий блок
полностью зависит от значения свойства position
В этой лекции мы рассматриваем случай,
когда position не задан (используется
его дефолтное значение),
и под содержащим блоком понимаем
родительский блок элемента
div {
width: 200px;
height: 200px;
}
div {
width: 20%;
height: 10%;
}
div {
width: 5em;
height: 5em;
}
Yeah, you can be the greatest,
you can be the best.wrapper { width: 400px; height: 100px; }
You can be the King Kong bangin'
on your chest.wrapper { width: 400px; height: 100px; } .inner { margin: 0 20px; }
You can beat the world, you can win the war
You can talk to God, go bangin' on his door
You can throw your hands up, you can beat the clock.wrapper { width: 400px; height: 100px; } .inner { margin: 0 20px; }
You can move a mountain, you can break rocks
Some will call that practice, some will call that luck
But either way your going to the history books.wrapper { width: 400px; height: 100px; } .inner { height: 100px; margin: 0 20px; }
Standing in the Hall of Fame
And the world's gonna know your name
'Cause you burn with the brightest flame.wrapper { width: 500px; height: 100px; } .inner { width: 600px; height: 100px; margin: 0 20px; }
При заданных фиксированных размерах элемент не будет
менять свои размеры,
но при этом вложенные элементы могут из него выпадать
Аналогично для padding
top right bottom left
margin: 2px 30px 400px 5000px;
margin: 2px 30px 400px /* 30px */;
margin: 2px 30px /* 2px 30px */;
margin: 2px /* 2px 2px 2px */;
Аналогично для padding
Ширина, заданная в процентах, считается относительно ширины содержащего блока
.wrapper {
width: 816px;
background: #3af4d5;
}
.inner {
width: 50%;
}
Высота, заданная в процентах, считается относительно высоты содержащего блока, но только если высота содержащего блока задана явно
.wrapper {
width: 470px;
height: 400px;
}
.inner {
height: 50%;
width: 60%;
}
Высота, заданная в процентах, считается относительно высоты содержащего блока, но только если высота содержащего блока задана явно
.wrapper {
width: 457px;
}
.inner {
height: 50%;
width: 70%;
}
border: <размер> <тип> <цвет>;
border-left: <размер> <тип> <цвет>;
border-width: <размер> <размер> <размер> <размер>; border-type: <тип> <тип> <тип> <тип>; border-color: <цвет> <цвет> <цвет> <цвет>;
border-left-width: <размер>; border-left-type: <тип>; border-left-color: <цвет>;
div {
border: 20px dotted blue;
}
div {
border: 20px dashed blue;
}
div {
border: 20px solid blue;
}
div {
border-width: 20px;
border-style: solid;
border-color: blue red;
}
div {
border-width: 30px 20px;
border-style: solid dotted;
border-color: blue red;
}
.parent {
width: 500px;
height: 500px;
border: 10px solid #3af4d5;
}
.child {
width: 100%;
height: 100px;
margin: 2em auto;
background-color: #f70044;
}
Parent
Child
.parent {
width: 500px;
height: 500px;
border: 10px solid #3af4d5;
}
.child {
width: 100%;
height: 100px;
margin: 2em auto;
background-color: #f70044;
/* добавим границу */
border: 10px solid #5b6dcd;
/* и внутренний отступ: */
padding: 5px;
}
Parent
Child
По умолчанию в блочной модели CSS выставленная ширина и высота применяются только к content-box элемента
Если элементу дополнительно заданы border или padding, то их значения добавятся к ширине и высоте
Если размер содержащего элемента явно заданы,
а сумма размеров border, padding и размеров элемента превышают их,
элемент не поместится в содержащем
Правильно использовать свойство
box-sizing
Ширина и высота, которую устанавливаем элементу, применяется к его content-box
Если задаем элементу дополнительно border или padding с ненулевыми размерами, то эти значения будут добавлены к заданным выше
Поэтому размеры элемента при рендеринге станут больше, чем указанные первоначально
При рендеринге браузер будет учитывать заданные значения border или padding так, чтобы не выходить за указанные значения высоты и ширины
.parent {
width: 500px;
height: 500px;
border: 10px solid #3af4d5;
}
.child {
width: 100%;
height: 100px;
margin: 2em auto;
background-color: #f70044;
/* content-box -> border-box */
box-sizing: border-box;
border: 10px solid #5b6dcd;
padding: 5px;
}
Parent
Child
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { width: 400px; margin: 0 auto; background: #00bbf0; }
Браузер самостоятельно посчитал отступы
При этом border/padding: либо заданы, либо auto, т.е.
Значит значения в правой части формулы известны
Браузеру остается вычислить margin-left, margin-right и ширину блока
Не задано 1 значение – margin-left
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; width: 300px; margin-right: 300px; }
Не задано 1 значение – margin-right:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-left: 100px; width: 300px; }
Не задано 1 значение – width:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-left: 100px; margin-right: 200px; }
Не задано 2 значения – margin-left и margin-right:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; width: 300px; }
Не задано 2 значения – margin-left и width:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-right: 200px; }
Не задано 2 значения – margin-right и width:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-left: 100px; }
Заданы margin-left: auto и width:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-left: auto; width: 300px; }
Заданы margin-right: auto и width:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-right: auto; width: 300px; }
Заданы margin-right: auto, margin-left: auto и width:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin: 0 auto; width: 300px; }
Задан любой из margin в auto, width не задана:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-left: auto; }
Заданы все 3 значения:
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; margin-left: 100px; margin-right: 300px; width: 300px; }
Не задано ни одно из всех 3 значений
.wrapper { width: 666px; background: #3af4d5; padding: 10px 0; }
.inner { height: 50px; background: #00bbf0; }
Заданы margin-left: auto и width:
.wrapper { width: 666px; padding: 10px 0; }
.inner { width: 500px; margin-left: auto; }
margin-left + margin-right + width = width содержащего блока - border - padding
margin + width = width содержащего блока - border - padding
.first { margin-bottom: 30px; }
.second { margin-top: 60px; }
.first { margin-bottom: 60px; }
.second { margin-top: 100px; }
.first { margin-bottom: 60px; }
.second { margin-top: -60px; }
.first { margin-bottom: 60px; }
.second { margin-top: -80px; }
Строчные элементы генерируют
бокс(ы) строчного уровня
Строчные элементы по умолчанию:
b | big | i | small | textarea | abbr |
acronym | cite | code | strong | img | q |
span | button | sub | sup | input | label |
Необходимое CSS-свойство
Говорят, что элемент является боксом строчного уровня, когда:
display: inline; /* а так же inline-block, inline-table,
inline-flex, ... */
Особенности
Выглядят как строки
Особенности
Выстраиваются слева направо, сверху вниз
Особенности
Участвуют в строчном контексте форматирования
Особенности
Могут создать вокруг себя анонимные строчные боксы
Some inline
text followed
by a span
followed by
more inline text.
Инлайновые блоки не реагируют на задание ширины и высоты
То есть сколько текста положим внутрь инлайн блока,
такая ширина этого блока и будет
Не реагируют на вертикальные margin'ы
Реагируют на горизонтальные margin'ы
Инлайновые padding'и не затрагивают высоту строки
Но при этом сами padding'и можно сделать видимыми
Помощь ?.button { width: 63px; height: 63px; background: #ff0; text-align: center; cursor: pointer; }
Помощь?.button { width: 63px; height: 63px; background: #ff0; text-align: center; cursor: pointer; }
Помощь?.button { display: inline-block; width: 63px; height: 63px; background: #ff0; text-align: center; cursor: pointer; }
Особенности
Реагируют на ширину и высоту
Особенности
Реагируют на вертикальные margin'ы
Особенности
Padding'и влияют на высоту строки
Особенности
Внешнее поведение как у inline элементов, а внутри создают блочный контекст форматирования