Руководство по использованию 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