В HTML существует всего 2 типа элементов — блочные и строчные. Блочные элементы — те, которые занимают всю ширину страницы или контейнера. С помощью блоков можно создать хорошую структуру веб-страницы.
Строчные элементы — части веб-страницы, которые занимают не всю ширину контейнера, а только ширину расположенного в них контейнера. Они, как правило, используются для содержания одной небольшой части контента, в отличие от блочных.
Визуальное форматирование
Общая модель веб-страницы — своеобразный макет блоков, который позволяет увидеть их размеры. Он дает понятие о размерах блоков, их расположении, а также о размерах их содержимого.
В некоторых кодовых редакторах доступен просмотр визуальной модели, также можно обратиться к специальным разрешениям для браузеров. Просмотр такой модели позволит упростить верстку.
Блочная верстка
Блок — контейнер, в котором содержится различная информация, например, изображения, ссылки, текст и т.д. Он является их объединением и имеет свои размеры. К примеру, тег
— блок, который содержит в себе всё визуальное оформление веб-страницы.У каждого блока есть граница, за которую не выходят элементы. По умолчанию граница не отображается, но это можно исправить с помощью CSS.
border: 3px solid #fff;
Это пример создания белой рамки со сплошной линией, ширина которой равна 3 пикселям.
Для всех блоков существуют внутренние и внешние отступы, которые задаются с помощью специальных свойств.
Padding — свойство для определения внутренних отступов (расстояние между содержимым блока и его границами). Важно! Если контейнер пустой, то содержимым является и пустая часть.
Margin — внешние отступы, позволяет задавать расстояние между блоками.
Для блочных элементов можно задать ширину и высоту:
.container{
width: 80%;
height: 50vh;
}
Здесь создается контейнер с шириной в 80% от размеров экрана и половиной высоты экрана (1vh — 1% от высоты).
Существует огромное количество блочных элементов: <div>, <p>, <h1>, <h2>, <form>, <table>, <ul>, <ol> и так далее. Это далеко не все блоки, но они используются чаще всего.
Раньше для создания хорошей структуры элементов на странице пользовались тегами div, задавая им различные классы и id. Сейчас же, появились новые теги — <header>, <section>, <article>, <aside>, <footer>, <nav>. Эти теги стали новым стандартом в web.
Строчные элементы
Строчные элементы, либо же встроенные — части веб-страницы, которые содержат в себе какой-то контент, но не образуют блок шириной на весь внешний контейнер. Вот пример строчных элементов: <a>, <area>, <img>, <label>, <span>.
Строчные элементы — внутренние составляющие блочных контейнеров, в которых они расположены.
Для строчных блоков не работают свойства отступов и изменения размеров. Им нельзя задать ширину или высоту, нельзя поменять внутренние и внешние отступы. Их ширина и высота определяется по умолчанию, по величине внутреннего контента.
Если же сделать строчный элемент полублочным, то можно спокойно применять к нему свойства изменения ширины, высоты и отступов.
Блочно-строчные элементы
Полублочные элементы — элементы, которые по своим свойствам являются строчными. У них так же определяется высота и ширина.
Основное отличие полублочных элементов в том, что они поддаются изменениям ширины, высоты и отступов через CSS.
Изменение типа контейнера
По умолчанию, в html задается свойство, определяющее то, к какому разряду элементов они принадлежат. В CSS же, этот параметр можно изменить, с помощью свойства display.
.text{
display: inline;
}
Здесь мы сделали так, что элемент с классом «text» стал строчным.
Свойство display имеет и другие значения:
display: inline-block - строчно-блочные элементы; display: block - блочные элементы;
Можно создавать и табличные элементы —
display: table|table-cell
Это не единственные табличные значения, всего их около 10.
Благодаря этой информации вы узнали отличия блочных и строчных элементов, а также смогли разобраться что такое inline-block. Теперь вы не будете ошибаться при создании блоков. По личному опыту знаем, что в начале обучения, возникают проблемы с визуальным оформлением блоков, особенно строчных.