Атрибут display — один из наиболее важных атрибутов CSS. Он в основном используется для управления расположением элементов. С помощью атрибута display вы можете указать, будет ли отображаться элемент и если да, то каким образом.
1. Роль атрибута отображения
1. Атрибут display может устанавливать внутренний и внешний тип отображения элемента.
(1) Тип внешнего дисплея:
a. К типам внешнего отображения относятся блочные, встроенные и т. д.
б. Тип внешнего дисплея будет определять производительность элемента в гибком макете.
(2) Тип внутреннего дисплея:
Внутренние типы отображения включают гибкий макет, макет сетки, гибкий макет и т. д.
Внутренний тип отображения элемента определяет расположение его дочерних элементов.
2. Гибкая структура (документооборот или регулярный поток):
«Поток документов» или «гибкий макет» — это способ отображения «блочных» и «встроенных» элементов на странице до внесения каких-либо изменений в макет (по умолчанию).
Проще говоря, это метод верстки, который определяет, как набираются и отображаются на странице блочные и строчные элементы.
(1) В потоковой компоновке — метод компоновки элементов на уровне блока:
Блоки уровня блока располагаются вертикально по порядку, начиная с верхней части содержащего блока.
Расстояние по вертикали между ящиками одного уровня будет определяться атрибутом «поля».
Вертикальное расстояние между двумя соседними блоками уровня блока будет свернуто в соответствии с принципом сгиба полей.
(2) В гибкой компоновке — метод компоновки встроенных элементов:
Ящики будут расположены горизонтально, начиная с верха содержащего блока.
Сохраняются только горизонтальные поля, границы и отступы.
Поля можно выровнять по вертикали разными способами: по низу или по верху или по тексту по низу.
2. Тип внешнего дисплея элемента
1. splay определяет тип отображения элемента посредством следующих значений атрибута
(1) блокировать уровень блока
(2) встроенный блок
(3) встроенный
2. Типы отображения элементов делятся на: блочные, строчные и т.д.
3. Инлайновые (инлайновые) элементы делятся на: инлайн-инлайновые и инлайн-блочные инлайн-блочные элементы.
(1) блочные элементы диблока
1. Общими элементами уровня блока являются:
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl> и т. д.
2. Характеристики блочных элементов:
(1) Эксклюзивная линия
(2) Вы можете установить атрибуты ширины и высоты.
(3) Если ширина не установлена, по умолчанию она равна ширине области содержимого родительского элемента.
(4) Элементы любого типа можно размещать в элементах уровня блока, но другие элементы блока нельзя размещать в тегах текстовых элементов.
(5) Теги p и div не могут быть помещены в тег p.
(6) Теги p и div не могут быть помещены в теги h1-h6.
(2) элементы линейного блока
1. Следующие элементы имеют характеристики встроенных блочных элементов:
<img>, элементы формы, <video>, <audio> и т. д. Эти элементы по существу называются заменяемыми элементами (классифицируются как встроенные элементы).
2. Характеристики строчных блочных элементов:
(1) Соседние встроенные блочные (или встроенные) элементы будут отображаться в одной строке. Если их невозможно разместить, они будут перенесены на другую строку.
(2) Между соседними элементами строчного блока будут пустые промежутки.
(3) Можно установить атрибуты ширины и высоты. Ширина элемента по умолчанию равна ширине его собственного содержимого.
(3) встроенные встроенные (встроенные) элементы
1. К распространенным встроенным элементам относятся:
<a>, <strong>, <span>, <i>, <del> и т. д.
2. Характеристики строчных элементов:
Соседние встроенные элементы будут отображаться в одной строке. Если они не помещаются, они будут отображаться в новой строке.
Установка свойств ширины и высоты недействительна. Его ширина и высота увеличиваются в зависимости от размера содержимого.
Внутри строковых элементов можно размещать только текст или другие встроенные элементы.
3. Примечание:
Тег <a> нельзя размещать внутри тега <a>, но элементы уровня блока можно размещать внутри тега <a>.
В реальной разработке тег <a> в некоторых случаях будет преобразован в элемент уровня блока.
Сравнение трех типов элементов
3. Преобразование между встроенными элементами и элементами уровня блока.
Нам нужно только добавить соответствующее значение атрибута отображения к соответствующему элементу, чтобы преобразовать элемент в соответствующий тип элемента.
(1) Используйте display:block; для преобразования элементов в элементы уровня блока.
Пример:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: нет;</style></head><body><ahref=>ссылка на программирование dotcpp</a></body></html>Результаты запуска:
(2) Используйте display: inline для преобразования элементов во встроенные. Однако существует несколько применений преобразования элементов во встроенные элементы.
(3) Используйте display: inline-block для преобразования элементов в элементы встроенного блока;
4. Метод скрытых элементов
Пополнить:
(1) Отображаемые значения, отличные от «нет», являются элементами отображения.
(2) видимость:видимый — элемент отображения;
Пример:
Значение атрибута none of display можно использовать для скрытия элементов. Оно имеет функцию, аналогичную видимости: скрытый;. Разница в том, что display: none; при скрытии элемента также скрывается положение, занимаемое элементом. display: none; обычно используется вместе с JavaScript для скрытия или отображения элемента. Вот пример:
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;</style></head><body><divid=box></div ><buttononclick=change_box(this)>Скрыть</button><script>functionchange_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style .display=;obj.innerHTML=hide;}else{box.style.display=none;obj.innerHTML=show;}}</script></body></html>Результаты запуска:
5. Разница между двумя методами сокрытия
6. Удалите пробелы по умолчанию для элементов встроенного блока.
По умолчанию между встроенными блочными элементами создаются промежутки.
Причины пробелов:
(1) Когда элементы отформатированы как строчные, пробелы (пробелы, возвраты каретки, переводы строк и т. д.) между элементами будут обрабатываться браузером.
(2) В соответствии с методом обработки пробелов (по умолчанию используется обычный, который объединяет лишние пробелы), возврат каретки и перевод строки в исходном HTML-коде преобразуются в символ пробела, поэтому между элементами появляются пробелы.
(3) Расстояние между этими элементами будет меняться в зависимости от размера шрифта.
Решение:
(1) Добавьте родительский элемент и одновременно перепишите размер шрифта дочернего элемента.
Атрибут font-size имеет наследование, поэтому родительский элемент font-size:0 будет унаследован дочерним элементом span, а дочернему элементу необходимо сбросить размер шрифта.
(2) Добавьте поплавок к элементу
После добавления плавающего элемента к элементу он вырвется из потока документа. Если высота родительского элемента не добавлена, возникнет проблема с коллапсом высоты, и проблему, вызванную плавающим элементом, необходимо устранить.
(3) В промежутке между картинками добавьте display:block;
После добавления display:block изображение становится элементом уровня блока и занимает отдельную строку.