display: contentsЭто относительно незнакомое свойство, хотя оно принадлежит display, который в основном является наиболее распространенным свойством CSS, ноcontentsЭто значение в основном не используется. Но он поддерживается Firefox с 2016 года.
В этой статье мы углубимся в это интересное значение свойства.
Основное использование
согласно сW3Cправильноdisplay: contentsОпределение.
Сам элемент не создает никаких блоков, но его дочерние элементы и псевдоэлементы по-прежнему создают блоки, а текст работает как обычно. его содержимое (включая как его дочерние элементы исходного документа, так и его псевдоэлементы, такие как псевдоэлементы ::before и ::after, которые генерируются до/после дочерних элементов элемента, как обычно).
Простым переводом является то, что элемент, для которого установлено значение этого свойства, сам не будет генерировать никакого поля, но сохранит нормальное отображение своих дочерних элементов.
Посмотрите на простой пример. Он имеет следующую простую трехслойную структуру:
<div class="container">
<div class="wrap">
<div class="inner"></div>
</div>
</div>
Простой CSS выглядит следующим образом:
.container {
width: 200px;
height: 200px;
background: #bbb;
}
.wrap {
border: 2px solid red;
padding: 20px;
box-sizing: border-box;
}
.inner {
border: 2px solid green;
padding: 20px;
box-sizing: border-box;
}
Производительность выглядит следующим образом:
Это очень легко понять, но если мы добавим в контейнер среднего слояdisplay: contents, а затем посмотрите на эффект:
<div class="container">
<div class="wrap" style="display: contents">
<div class="inner"></div>
</div>
</div>
Как видите, среднего слоя нет.border: 2px solid redкрасная кайма всего.wrapКажется, что div не существует, но его дочерние элементы отображаются нормально.
фокус,уже настроенdisplay: contentsСам элемент не будет отображаться, но его дочерние элементы будут отображаться нормально..
Я думал о том, что является очень подходящей точкой использования для этой собственности.
Таким образом, это свойство подходит для элементов, которые действуют как оболочки, которые сами по себе не действуют и могут быть проигнорированы в некоторых сценариях макета.
Действует как бессемантическая обертка
Когда я недавно писал React и Vue, я обнаружил, что этот атрибут может сыграть очень хорошую роль в написании JSX, и он также очень согласуется с позиционированием самого этого атрибута.
Когда мы пишем React и RN, нам часто нужно вывести шаблон.
return (
<div class="wrap">
<h2>Title</h2>
<div>...</div>
</div>
)
мы просто хотим вывести.wrapdiv, но из-за требований фреймворка выходной JSX-шаблон должен быть включен в родительский элемент, поэтому в крайнем случае вам нужно добавить.wrapзавернуть, но это.wrapСтиля как такового нет.
Если выходной элемент должен быть помещен в другойdisplay: flex,display: gridПод контейнером слой бессмысленного.wrapПосле этого всю компоновку нужно снова настраивать, что хлопотно.
Один из способов — использовать контейнер, предоставленный фреймворком.<React.Fragment>, он не вставляет на страницу никаких дополнительных узлов.
Аналогично в Vue есть
<template>элемент,<template>Он также не отображается в дереве DOM, и структура страницы не видна, ноdisplay: contentsприсутствует в структуре страницы, он просто не создает никаких полей.
Этот дополнительный родительский элемент на самом деле не нужен. В это время мы также можем добавитьdisplay: contents, так:
return (
<div class="wrap" style="display: contents">
<h2>Title</h2>
<div>...</div>
</div>
)
Таким образом, он играет роль обертки, но при реальном рендеринге этот div на самом деле не создает никакой коробки, убивая двух зайцев одним выстрелом. и как некоторыеflexмакет,gridмакет не пострадает.
Codepen Demo -- эффект проникновения display:contents | display: flex
Сделайте код более семантичным
Рассмотрим этот очень практичный сценарий, когда наши страницы теперь заполнены кликабельными кнопками или такими элементами, как текст, который запускает соответствующую функцию при нажатии. Однако семантически они должны быть один за другим.<button>, но на самом деле чаще мы используем<p>、<div>、<a>После того, как теги будут смоделированы, добавьте к ним соответствующие события кликов.
Что-то вроде следующего хорошо, но относительно бессемантично:
<p class="button">
Button
</p>
<p class="button">
Click Me
</p>
.button {
width: 120px;
line-height: 64px;
text-align: center;
background-color: #ddd;
border: 2px solid #666;
}
мы не используем<button>Есть много причин,<button>Относительно менее управляемый, чем div, и вводит множество стилей по умолчанию. Однако сdisplay: contents, мы можем сделать так, чтобы наш код соответствовал семантике, и при этом не нужно было решать<button>Некоторые возникающие проблемы со стилем:
<p class="button">
<button style="display: contents">
Button
</button>
</p>
<p class="button">
<button style="display: contents">
Click Me
</button>
</p>
Добавлен<button style="display: contents">Click Me</button>Пакет никак не повлияет на стиль, и кнопка фактически не будет отображаться в структуре страницы, но структура и семантика страницы станут намного лучше.
CodePen Demo -- Button with display: contents
Для некоторых студентов, одержимых структурой и семантикой страницы, гибкое использование этого атрибута может решить многие проблемы.
Некоторые интересные явления в элементах замены и элементах формы
display: contentsНе все элементы ведут себя одинаково.
Для заменяемых элементов и большинства элементов формы используйтеdisplay: contentsработает какdisplay: none.
То есть для некоторых общих заменяемых элементов и элементов формы:
<br><canvas><object><audio><iframe><img><video><frame><input><textarea><select>
работалdisplay: contentsэквивалентно использованиюdisplay: none, весь блок и содержимое элемента не отрисовываются на странице.
<button>некоторые сходства и различия
В отличие от других элементов формы, обычно добавлениеdisplay: contentsЭто эквивалентно тому, чтобы быть скрытым и не будет отображаться. Однако на практике оказалось, что<button></button>Если содержимое упаковано, некоторые из его наследуемых стилей все равно будут наследоваться дочерним содержимым. На это необходимо обращать внимание в процессе фактического использования.
Влияние на A11Y
В некоторых документах на иностранном языке есть дискуссия оdisplay: contentsиспользование влияет на доступность страницы. Например, это работаетdisplay: contentsКонтейнеры и списки, которые могут иметь неожиданные последствия для доступности страницы.
Однозначного вывода по этому поводу я пока не вижу, если у вашей страницы высокие требования к доступности, то нужно обратить внимание на этот момент, если вы используете именно этот атрибут.
Похожие свойства в CSS, влияющие на макет
Сам CSS на самом деле усердно работает, добавляя различные свойства, чтобы дать нам больше места и контроля над макетом. В общем, я считаю, что CSS должен больше походить на полноценный проект, а не просто показывать стили.
Похожие интересные свойства:
CAN I USE
посмотрисовместимость.
Не слишком мрачно, но и не повсеместно. Рассмотрите возможность его использования в некоторых сценариях прогрессивного улучшения.
Ссылаться на
наконец
Ну вот и конец этой статьи, надеюсь она вам поможет :)
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Более захватывающие и интересные эффекты CSS, добро пожаловать сюда, чтобы увидетьВдохновение для CSS. Найдите вдохновение для написания CSS здесь..
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.