Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.

2 <h3>display</h3>

3 У элементов есть свойство display. Оно задаёт то, как элемент выводится на экран.

4 Здесь к слову display можно относиться как к глаголу: to display - показывать, выводить на экран.

5 <a>https://codepen.io/hexlet/pen/aLXVKB</a>

6 <ul><li>display: block начинается с новой строки и занимает всю ширину</li>

7 <li>display: inline начинается в любом месте и занимает столько ширины, сколько нужно для помещения содержания</li>

8 </ul>Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.

9 Браузер обычно применяет базовые стили по умолчанию ко многим элементам. Например, элемент p по умолчанию имеет display: block.

10 Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset - наборы CSS-стилей, которые "сбрасывают" браузерные стили.

11 Вот<a>пример таких reset-стилей</a>.

12 <h3>div & span</h3>

13 Элемент p имеетсемантическое значение. Он определяет абзац текста.

14 Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.

15 Два самых используемых элемента - div и span - не имеют семантического значения. Они нужны исключительно для структуры и стилей.

16 <ul><li>div - это блочный (block-level) элемент, у него свойство display: block.</li>

17 <li>span - это строчный (inline-level) элемент, у него свойство display: inline.</li>

18 </ul>Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом,лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.

19 div обычно используется для определения какого-то крупного блока на странице. А span - для небольшого элемента на строке.

20 <h3>Блочная модель</h3>

21 Каждый элемент на странице - прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф - это прямоугольник.

22 У каждого прямоугольника есть несколько свойств, влияющих на размер:

23 <ul><li>width, height - ширина и высота элемента</li>

24 <li>padding - отступ внутри элемента (расстояние от содержания до границы прямоугольника)</li>

25 <li>border - толщина границы (обводки)</li>

26 <li>margin - отступ снаружи элемента (расстояние от границы прямоугольника до соседних элементов)</li>

27 </ul>Давайте сделаем элемент, в котором явно видно все эти части:

28 <a>https://codepen.io/hexlet/pen/qPgpwL</a>

29 Мы использовали значение inline-block у свойства display. Это в какой-то степени комбинация inline и block. Элемент не занимает всю ширину и может находится на одной строке с другими элементами. При этом у него можно задать параметры, свойственные block: конкретную ширину и высоту.

30 Сколько же места требуется всему элементу? Нужно сложить показатели:

31 <ul><li>Высота: высота элемента + внутренний отступ + толщина границы + внешний отступ (height + padding + border + margin) - 70 + 10 + 8 + 15 =103px.</li>

32 <li>Ширина: ширина элемента + внутренний отступ + толщина границы + внешний отступ (width + padding + border + margin) - 100 + 10 + 0 + 15 =125.</li>

33 </ul>Границы и отступы можно задать свои для каждой из сторон: