Введение в веб-разработку с HTML, CSS, JavaScript. Тимур Машнин

относительная составляющая.

      Пиксели привязаны к устройству просмотра. Для устройств с низким DPI или низким количеством точек на дюйм один пиксель соответствует одной точке пикселя устройства на дисплее. Для принтеров и экранов с высоким разрешением один пиксель подразумевает несколько точек пикселей устройства.

      Дело в том, что устройства с более высоким DPI дадут вам более четкий текст, потому что для каждого пикселя, который он рисует, он фактически рисует несколько точек пикселей на устройстве.

      При всем при этом пиксели по-прежнему считаются абсолютной единицей измерения.

      Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.

      Другое полезное свойство – text-align, которое позволяет центрировать или выравнивать текст по правому и левому краю.

      Теперь давайте немного поговорим об относительном размере шрифта. И здесь есть две относительные единицы измерения, это проценты и ems.

      Здесь тег body имеет размер 120%. И это означает, что мы хотим взять размер, который браузер предоставляет по умолчанию, и увеличить его на 120%.

      В большинстве браузеров размер текста по умолчанию составляет 16 пикселей. Таким образом, 120% от 16 пикселей будет чуть больше 19 пикселей.

      Здесь размер текста составляет 2em. И это единица измерения, эквивалентная ширине буквы в этом конкретном шрифте, который мы используем.

      Поначалу это звучит немного запутанно, но суть в том, что это относительный размер.

      Так как мы установили размер шрифта 120% во всем теле документа, и когда вы комбинируете этот размер шрифта с 2.5em, это говорит о том, что вы хотите увеличить шрифт в два с половиной раза по сравнению со 120%.

      И наконец размер текста можно задать с помощью единицы vw, что означает «ширину области просмотра» viewport . Viewport – это размер окна браузера и 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.

      Теперь, в HTML каждый элемент считается блоком. Однако этот блок содержит не просто контент.

      Помимо содержимого, блок содержит отступы, границы и поля. И существуют правила, определяющие, как эти компоненты блока влияют на компоновку, а также, как вычисляются ширина и высота блока.

      В качестве примера давайте рассмотрим структуру HTML этого документа.

      Здесь есть тег h1 и тег div с идентификатором box, а внутри этого div есть еще один div с идентификатором content и текстом.

      И так как div является элементом блочного уровня, он пытается заполнить родительский элемент целиком по ширине.

      Но если приглядеться, здесь есть некоторое пространство между заголовком и текстом.

      Давайте откроем инструменты разработчика Chrome и выясним, что это за пространство.

      Давайте выберем тег body и посмотрим, что происходит.

      И мы видим, что тег body имеет отступ около восьми пикселей. Откуда же взялись эти восемь пикселей?

      И здесь написано таблица стилей пользовательского агента. Это означает, что это сам браузер. Это стили