Макет CSS — свойство display

Свойство отображения

Свойство display определяет, будет ли и как отображаться элемент.

Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа. элемента это так. Значением отображения по умолчанию для большинства элементов является block или встроенный.

Click to show panel

This panel contains a <div> element, which is hidden by default (display: none).

It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Элементы уровня блока

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину. (тянется влево и вправо, насколько это возможно).

The <div> element is a block-level element.

Примеры элементов уровня блока:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Встроенные элементы

Встроенный элемент не начинается с новой строки и занимает ровно столько ширины, сколько необходимо.

Это встроенный элемент <span> внутри абзаца.

Примеры встроенных элементов:

<span>
<a>
<img>

Оператор HTML `Отображение: нет;`

display: none; обычно используется в JavaScript для скрытия и показывать элементы, не удаляя и не создавая их заново. Взгляните на наш последний пример на этой странице, если вы хотите знать, как этого можно достичь.

Элемент <script> использует display: none; по умолчанию.

Переопределить отображаемое значение по умолчанию

Как уже упоминалось, каждый элемент имеет отображаемое значение по умолчанию. Однако вы можете переопределить это.

Изменение встроенного элемента на блочный элемент или наоборот может быть полезно для заставить страницу выглядеть особым образом и при этом соответствовать веб-стандартам.

Типичным примером является создание встроенных элементов <li> для горизонтальных меню:

Пример

li {
  display: inline;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Примечание. Установка свойства отображения элемента изменяет только способ отображения элемента, НЕ что это за элемент. Таким образом, встроенный элемент с display:block; не допускается. чтобы внутри него были другие блочные элементы.

В следующем примере элементы <span> отображаются как блочные элементы:

Пример

span {
  display: block;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break between each span elements.</span>

</body>
</html>

В следующем примере элементы <a> отображаются как блочные элементы:

Пример

a {
  display: block;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>

Скрыть элемент — отображение: нет или видимость: скрыто?

display:none

visibility:hidden

Reset

Скрыть элемент можно, задав для свойства display значение нет. Элемент будет скрыт, а страница будет отображаться так, как будто элемента нет. там:

Пример

h1.hidden {
  display: none;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>

visibility:hidden; также скрывает элемент.

Однако элемент все равно будет занимать то же место. как прежде. Элемент будет скрыт, но все равно повлияет на макет:

Пример

h1.hidden {
  visibility: hidden;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

Больше примеров

Этот пример демонстрирует display: none; по сравнению с видимостью: скрыто;

Отличия между дисплеем: нет; и видимость: скрыта;

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  <button onclick="removeElement()">Remove</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <button onclick="changeVisibility()">Hide</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  <button onclick="resetElement()">Reset All</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>

В этом примере показано, как использовать CSS и JavaScript для отображения элемента на щелкните.

Использование CSS вместе с JavaScript для отображения контента

<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

Свойства отображения/видимости CSS

display: Указывает, как должен отображаться элемент
visibility: Указывает, должен ли элемент быть видимым

Макет CSS — свойство display

Оглавление

Свойство отображения

Элементы уровня блока

Встроенные элементы

Оператор HTML Отображение: нет;

Переопределить отображаемое значение по умолчанию

Пример

Пример

Пример

Скрыть элемент — отображение: нет или видимость: скрыто?

Пример

Пример

Больше примеров

Свойства отображения/видимости CSS

Оператор HTML `Отображение: нет;`