Обзор
Одним из наиболее важных аспектов CSS является блочная модель. У разработчика, не сумевшего четко усвоить блочную модель, возникнут трудности с проектированием. Это связано с тем, что эскизы дизайна должны выполняться с учетом блочной модели, и она используется для уменьшения сложности кода.
содержимое, отступы, границы и поля составляют блочную модель в CSS.
- Содержимое. Содержимым может быть абзац, элемент div или любой другой HTML-элемент, который может содержать текст, изображения и любые входные данные в вашем проекте.
- Отступ. Отступ — это пространство вокруг вашего контента и соседнего контента. Заполнение очищает область вокруг определенного содержимого. Прокладка прозрачная.
- Граница — граница, охватывающая отступы и содержимое.
- Поля. Поля — это пространство вокруг элемента и соседних с ним элементов. Очищает территорию за границей. Это также прозрачно.
Изучите изображение выше, чтобы лучше понять его
Практическое руководство: отступы и поля
Одно дело знать концепцию вещи, но самое главное — понимать множество способов ее использования с пользой. Это даст вам лучшее понимание и повысит эффективность использования.
margin
и padding
имеют схожий синтаксис и способы их объявления в нашем коде, и существует множество способов использования правил синтаксиса. Ниже я объясню все на примере заполнения.
1. Настройка заполнения для определенной стороны:
padding-left: value ;
— устанавливает заполнение определенного значения в левой части содержимого.padding-right: value ;
— устанавливает заполнение определенного значения с правой стороны содержимого.padding-top: value ;
— устанавливает заполнение определенного значения в верхней части содержимого.padding-bottom: value ;
— устанавливает отступ определенного значения в нижней части содержимого.
2. Используя правила стенографии:
padding: value1 value2 value3;
— устанавливает отступы value1 вверху содержимого, value2 слева и справа от содержимого и value3 внизу содержимого.padding: value1 value2 value3 value4;
- устанавливает отступы для значения 1 вверху, значения 2 справа, значения 3 внизу и значения 4 слева от содержимого.
Значения, указанные в пояснении выше, являются измерениями. У нас есть два типа измерений
- Абсолютный: устанавливается на определенный размер; px, mm, cm, pt….
- Fluid: устанавливает размер относительно окружающих элементов.
— %, vw (ширина области просмотра), vh (высота области просмотра).
— em (для шрифта): 1em
— текущий размер, .75em
— 75% от текущего размера
— rem (для шрифта): 1rem
— текущий размер корня.
Приведенное выше объяснение заполнения также применимо к margin.
Установка границы
Граница имеет три основных значения:
border-width
- который можно указать с помощью любых правил измерения.border-style
- может быть
dotted
— определяет пунктирную границуdashed
— определяет пунктирную границуsolid
— определяет сплошную границуdouble
— определяет двойную границу.groove
— определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы.ridge
— определяет ребристую трехмерную границу. Эффект зависит от значения цвета границы.insect
— определяет границу 3D-врезки. Эффект зависит от значения цвета границы.outset
— определяет начальную границу 3D. Эффект зависит от значения цвета границы.none
- не определяет границы.hidden
— определяет скрытую границу.
3. border-color
- Может быть любого цвета.
Вы можете использовать приведенное выше отдельно или использовать сокращенное правило ниже:
› граница: 2px сплошная #fff;
Приведенный выше код устанавливает сплошную белую рамку толщиной 1 пиксель вокруг содержимого.
Установка границы на определенной стороне контента с помощью
border-*: width style color;
. Звездочка обозначает желаемую сторону: верхнюю, левую, правую или нижнюю.
например нижняя граница: 2px с точкой #0000ff;
В приведенном выше примере устанавливается синяя пунктирная рамка толщиной 2 пикселя внизу содержимого.
Вы также можете указать это отдельно, используя border-*-*: value;
, где первая звездочка обозначает сторону, а вторая — стиль, ширину или цвет границы.
например, ширина верхней границы: 1px;
Вышеупомянутое устанавливает границу в 1 пиксель в верхней части содержимого.
Фактическая длина и box-sizing
Когда вы устанавливаете свойства ширины и высоты элемента с помощью CSS, вы просто устанавливаете ширину и высоту области содержимого. Чтобы вычислить полный размер элемента, вы также должны добавить отступы, границы и поля.
Таким образом, фактическая ширина элемента будет:
Фактическая ширина = ширина + поле (левое или правое или оба: если указано) + отступ (левое или правое или оба: если указано) + граница (левое или правое или оба: если указано)
Фактическую высоту можно рассчитать аналогичным образом, добавив поля, отступы и границу. Но в этом случае мы добавляем верх и низ.
e.g.
div { width: 50px; height: 20px; margin: 10px; padding: 5px 3px; border: 2px solid #000; }
Фактическая ширина вышеуказанного div
будет: 50 пикселей + 10 пикселей (поле слева) + 10 пикселей (поле справа) + 3 пикселя (поле слева) + 3 пикселя (поле справа) + 2 пикселя (граница слева) + 2 пикселя (граница -right), что в сумме дает 80px.
Рассчитайте высоту для лучшего понимания.
Вот тут-то и появляется свойство box-sizing
.
`box-sizing имеет два значения:
content-box
- это добавки по умолчаниюborder-box
— учитывает содержимое, отступы, границы и поля. Когда указано для элемента, ширина равна ширине без каких-либо добавок.
Укажите
box-sizing: border-box
внутри универсального селектора*
в начале кода для лучшей практики.
Если вы найдете это полезным или у вас есть идеи, которые помогут мне стать лучше, вы можете связаться со мной, чтобы дать мне несколько советов или несколько слов поддержки, чтобы написать: Twitter, Linkedln, Email.
Спасибо за прочтение!
Первоначально опубликовано на https://muhtoyyib.hashnode.dev.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.