Руководство по использованию CSS Display для оптимизации отображения веб-сайта
CSS свойство display определяет, как элемент должен быть отображен на странице. Элементы могут быть скрыты, показываться в виде блока, строчного элемента, таблицы, строк таблицы и т.д.
Примеры различных значений display:
1. display: block; - делает элемент блочным, в результате чего элемент занимает всю доступную ширину и делает новую строку после себя. Блочные элементы могут содержать другие блочные и строчные элементы. Ниже приведен пример кода:
Заголовок
Текст
2. display: inline; - делает элемент строчным, в результате чего элемент занимает только необходимую ширину и не производит переход на новую строку. Строчные элементы могут содержать только текст, а не другие элементы. Ниже приведен пример кода:
Текст
3. display: none; - делает элемент невидимым на странице. Элемент фактически отсутствует в структуре документа и не занимает места на странице. Ниже приведен пример кода:
4. display: flex; - делает элемент контейнером для гибкого расположения содержимого. Гибкий контейнер может натягиваться и сжиматься, чтобы соответствовать размеру экрана. Ниже приведен пример кода:
Первый элемент
Второй элемент
Третий элемент
5. display: table; и display: table-cell; - делают элементы похожими на таблицу и ячейку таблицы, соответственно. Это может быть полезно для создания макетов с помощью таблиц. Ниже приведен пример кода:
Ячейка 1
Ячейка 2
Ячейка 3