Home-theater-designers
Свойство CSS display — мощный инструмент для веб-дизайнеров. Он позволяет управлять макетами элементов веб-сайта с минимальным стилем и простыми значениями, которые легко запомнить.
Но что делает каждое из этих значений и как они работают? Давай выясним.
СДЕЛАТЬ ВИДЕО ДНЯ
Что такое свойство отображения CSS?
Свойство display указывает тип отображения блока, используемого для HTML-элементов на веб-странице. Это приводит к разнообразному поведению, в том числе к полному неявке. Вы можете изменить эти значения на своем веб-сайте с помощью таблицы стилей или соответствующих разделов настройки CSS в Инструменты CMS, такие как WordPress .
Держите элементы в соответствии с отображением CSS: встроенный
Значения ширины и высоты не применяются к элементу со встроенным отображением; содержимое внутри устанавливает его размеры. Встроенные элементы HTML могут располагаться рядом с другими элементами, ведя себя как <диапазон> . Встроенное отображение чаще всего используется для текста.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
Эта HTML-разметка и CSS выше служат хорошим примером отображаемого встроенного значения. При совместном использовании это будет отображать одну строку текста, состоящую из двух разных элементов HTML.
Управление макетами веб-сайтов с помощью отображения CSS: блок
В некотором смысле значение отображаемого блока противоположно встроенному значению. Можно задать размеры высоты и ширины, и элементы с этим значением не могут располагаться рядом друг с другом. В приведенном выше примере показаны два элемента со значением блока. Элементы со значением отображения блока по умолчанию имеют максимальную ширину своего родительского элемента.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>В отличие от примера встроенного стиля, в этом примере значения отображаемого блока строки текста разбиваются на две разные строки. Значение ширины fit-content задает ширину элементов в соответствии с длиной текста.
код ошибки 83 справочного центра Дисней
Параллельные элементы HTML с отображением CSS: встроенный блок
Отображаемое значение встроенного блока CSS работает так же, как обычное встроенное значение, только с возможностью добавления определенных размеров. Это позволяет создавать макеты в виде сетки без наличия родительских элементов. Возвращаясь к предыдущему примеру, добавление значения встроенного блока позволяет элементам располагаться рядом друг с другом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
Значение встроенного блока не сильно отличается от встроенного значения. Важно отметить, что вы можете установить размеры элементов с этим значением, что упрощает работу в определенных случаях.
Скрыть элементы веб-сайта с помощью отображения CSS: нет
Самое простое отображаемое значение — «none». Это значение скрывает элемент и любые дочерние элементы, а также поля и другие свойства интервалов. Элементы со значением CSS display none по-прежнему видны в инспекторах браузера.
Создавайте гибкие и отзывчивые элементы с помощью отображения CSS: flex
Display flex — один из новейших режимов компоновки CSS. Когда display flex находится на родительском элементе, все элементы внутри него становятся гибкими элементами CSS. Родительским элементом в этой конфигурации является flexbox.
Флексбоксы создают адаптивный дизайн с предопределенными переменными, такими как ширина и высота. Это стоит изучение флексбоксов HTML/CSS прежде чем начать.
какая кнопка wps на моем роутере4B8553AF011488B693BBC238B69A5F102CBFFFFAF
Расположение Flexbox рядом друг с другом С дисплеем: inline-flex
Inline-flex ведет себя так же, как обычный flexbox, с дополнительным преимуществом, заключающимся в том, что элемент может располагаться рядом с другими элементами.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Создавайте сложные таблицы с отображением CSS: таблица
Значение отображаемой таблицы напоминает о старых днях дизайна веб-сайтов. Хотя сегодня большинство веб-сайтов не используют таблицы для своих макетов, они по-прежнему подходят для отображения данных и контента в удобочитаемом формате.
Добавление значения таблицы к элементу HTML заставит его действовать как элемент таблицы, но вам нужны дополнительные значения, чтобы ваша таблица работала правильно.
Отображение CSS: таблица-ячейка
Элементы со значением table-cell действуют как отдельные ячейки в основной таблице. А значения table-column и table-row группируют эти отдельные ячейки вместе.
Отображение CSS: таблица-строка
Значение table-row работает так же, как HTML-элемент
Отображение CSS: таблица-столбец
Значение table-column работает аналогично значению table-row, только оно не разделяет вашу таблицу. Вместо этого вы можете использовать это значение для добавления определенных правил CSS в различные уже существующие столбцы.
ФФД8А9Д092CF08F7439A11F12B2E453C8C4DDD66Создавайте параллельные таблицы с отображением CSS: встроенная таблица
Как и другие встроенные варианты, которые мы уже рассматривали, встроенная таблица позволяет размещать элементы таблицы рядом с другими элементами.
Создавайте адаптивные макеты веб-сайтов с отображением CSS: сетка
Значение отображаемой сетки CSS похоже на значение таблицы, только столбцы и строки сетки могут иметь гибкий размер. Это делает сетки идеальными для создания основного макета веб-страниц. Они оставляют место для полноразмерных верхних и нижних колонтитулов, а также позволяют иметь области содержимого разных размеров.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
Сетки похожи на флексбоксы, только они могут размещать элементы ниже и рядом друг с другом. Для этого жизненно важно свойство grid-template-areas. Как видно из кода, наши верхний и нижний колонтитулы занимают четыре пробела в массиве, так как они имеют полную ширину. Каждая боковая панель занимает по одному слоту, а контент — два, эффективно разделяя среднюю строку сетки на три столбца.
ты можешь просматривать интернет на roku?
Отображение CSS: встроенная сетка
Использование значения встроенной сетки позволит вашей сетке располагаться рядом с другими элементами, как и другие встроенные значения в этом руководстве.
Использование отображения CSS для веб-дизайна
Свойство отображения CSS предлагает удобный способ настройки структуры элементов веб-сайта без изменения разметки HTML. Это идеально подходит для тех, кто использует платформы доставки контента, такие как Shopify или WordPress, но также может быть удобен для общего веб-дизайна.