CSS Display
Добавить в избранное
Display CSS — это наиболее важное свойство CSS, которое используется для управления макетом элемента. Он определяет, как элемент отображается.
Каждый элемент имеет значение display по умолчанию в соответствии с его природой. Каждый элемент на веб-странице представляет собой прямоугольный блок, и свойство CSSопределяет поведение этого прямоугольного блока.
Значения display
Существуют следующие значения display CSS, которые обычно используются.
display: inline;
display: inline-block;
display: block;
display: run-in;
display: none;
display inline
Встроенный элемент принимает только необходимую ширину. Это не приводит к разрыву строки, поэтому поток текста не прерывается во встроенном примере.
◦ <span>
◦ <a>
◦ <em>
◦ <b> и.т.д.
Давайте посмотрим на пример встроенного отображения CSS.
<html>
<head>
<title>Document</title>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Здравствуйте, mirjs.uz</p>
<p>Учебник по JavaScript.</p>
<p>Учебник по HTML.</p>
<p>Учебник по CSS.</p>
</body>
</html>
display inline-block
Элемент display inline-block очень похож на display inline, но разница в том, что вы можете установить ширину и высоту.
<html>
<head>
<title>Document</title>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Здравствуйте, mirjs.uz</p>
<p>Учебник по JavaScript.</p>
<p>Учебник по HTML.</p>
<p>Учебник по CSS.</p>
</body>
</html>
display block
Элемент display block занимает столько горизонтального пространства, сколько может. Означает, что блочный элемент занимает всю доступную ширину. Они делают разрыв строки до и после них.
<html>
<head>
<title>Document</title>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Здравствуйте, mirjs.uz</p>
<p>Учебник по JavaScript.</p>
<p>Учебник по HTML.</p>
<p>Учебник по CSS.</p>
</body>
</html>
display run-in
Отображает элемент как блочный или строчный в зависимости от контекста.
<html>
<head>
<title>Document</title>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Здравствуйте, mirjs.uz</p>
<p>Учебник по JavaScript.</p>
<p>Учебник по HTML.</p>
<p>Учебник по CSS.</p>
</body>
</html>
display none
Значение «none» полностью удаляет элемент со страницы. он не будет занимать никакого места.
<html>
<head>
<title>Document</title>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Этот заголовок виден.</h1>
<h1 class="hidden">Это не видно.</h1>
<p>Вы можете видеть, что скрытый заголовок не содержит пробелов.</p>
</body>
</html>
Другие значения display
flex
Он используется для отображения элемента в виде гибкого контейнера на уровне блока.
inline-flex
Он используется для отображения элемента в виде гибкого контейнера встроенного уровня.
inline-table
Он отображает элемент как таблицу встроенного уровня.
list-Item
Это заставляет элемент вести себя как элемент <li>.
table
Это заставляет элемент вести себя как элемент <table>.
table-caption
Это заставляет элемент вести себя как элемент <caption>.
table-column-group
Это заставляет элемент вести себя как элемент <colgroup>.
table-header-group
Это заставляет элемент вести себя как элемент <thead>.
table-footer-group
Это заставляет элемент вести себя как элемент <tfoot>.
table-row-group
Это заставляет элемент вести себя как элемент <tbody>.
table-cell
Это заставляет элемент вести себя как элемент <td>.
table-row
Это заставляет элемент вести себя как элемент <tr>.
table-column
Это заставляет элемент вести себя как элемент <col>.