Свойство display

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение none свойства display</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <div id="divElement">
      Блок
     </div>
     <button id="hideShowDivElementButton">Скрыть блок</button>
    </body>
   
   </html>

Файл styles.css:

   #divElement			{ border: 1px solid #ff0000; padding: 20px; margin-bottom: 10px; }
   #hideShowDivElement		{ width: 150px; height: 30px; }

Файл scripts.js:

   window.onload = function()
   {
    document.getElementById('hideShowDivElementButton').onclick = function()
    {
     document.getElementById('divElement').style.display == 'none' ? document.getElementById('divElement').style.display = 'block' : document.getElementById('divElement').style.display = 'none';
     document.getElementById('divElement').style.display == 'none' ? document.getElementById('hideShowDivElementButton').innerHTML = 'Показать блок' : document.getElementById('hideShowDivElementButton').innerHTML = 'Скрыть блок';
    };
   };

Результат:

Значение block:

Элементы, имеющие значение block свойства display:

располагаются один над другим, вертикально (если не указано позиционирование, например, float);
стремятся расшириться на всю доступную ширину, можно явно задавать их ширину и высоту.

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение block свойства display</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <div id="wrapper">
      <div id="firstBlock"></div>
      <div id="secondBlock"></div>
     </div>
     <button id="changeDivWidthButton">Расширить розовый блок</button>
    </body>
   
   </html>

Файл styles.css:

   #divElement			{ border: 1px solid #ff0000; padding: 20px; margin-bottom: 10px; }
   #hideShowDivElement		{ width: 150px; height: 30px; }
   
   #wrapper			{ width: 100%; border: 1px solid #000000; margin-bottom: 10px; }
   #firstBlock			{ width: 50%; height: 20px; background-color: #ffe0e0; border: 1px solid #ff0000; box-sizing: border-box; }
   #secondBlock			{ width: 100%; height: 20px; background-color: #e0ffe0; border: 1px solid #00ff00; box-sizing: border-box; }

Файл scripts.js:

   window.onload = function()
   {
    document.getElementById('firstBlock').style.width = '50%';
    document.getElementById('changeDivWidthButton').onclick = function()
    {
     document.getElementById('firstBlock').style.width == '50%' ? document.getElementById('changeDivWidthButton').innerHTML = 'Сузить розовый блок' : document.getElementById('changeDivWidthButton').innerHTML = 'Расширить розовый блок';
     document.getElementById('firstBlock').style.width == '50%' ? document.getElementById('firstBlock').style.width = '100%' : document.getElementById('firstBlock').style.width = '50%';
    };
   };

Результат:

Значение inline:

Если элементы имеют значение inline свойства display, то:

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

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение inline свойства display</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="wrapper">
      <span id="firstInlineElement">Инлайн-элемент #1</span>
      <span id="secondInlineElement">Инлайн-элемент #2</span><span id="thirdInlineElement">Инлайн-элемент #3</span>
      <div id="blockElement">Блочный элемент</div>
      <span id="fourthInlineElement">
       Инлайн-элемент #4, а&nbsp;внутри&nbsp;– очень длинная строка очень длинная строка очень длинная строка очень длинная строка очень длинная строка очень длинная строка очень длинная строка очень длинная строка очень длинная строка очень длинная строка.
      </span>
     </div>
    </body>
   
   </html>

Файл styles.css:

   body					{ font-size: 14px; line-height: 20px; }
   
   #wrapper				{ width: 400px; border: 1px solid #000000; }
   #firstInlineElement			{ border: 1px solid #00ff00; }
   #secondInlineElement			{ border: 1px solid #00ffff; }
   #thirdInlineElement			{ border: 1px solid #000088; }
   #blockElement			{ border: 1px solid #0000ff; width: 50%; height: 20px; }
   #fourthInlineElement			{ border: 1px solid #ff0000; }

Результат:

Значение inline-block:

Элемент, имеющий значение inline-block свойства display:

располагается в строке;
его размер определяется содержимым;
всегда прямоугольный;
с устанавливаемой шириной и высотой.

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение inline-block свойства display</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="wrapper">
      <span id="firstInlineBlockElement">Инлайн-элемент #1</span>
      <span id="secondInlineBlockElement">Инлайн-элемент #2</span>
      <span id="thirdInlineBlockElement">Инлайн-элемент #3</span>
      <span id="fourthInlineBlockElement">Инлайн-элемент #4<br>с&nbsp;переносом строки</span>
     </div>
    </body>
   
   </html>

Файл styles.css:

   body					{ font-size: 14px; line-height: 20px; }
   
   #wrapper				{ border: 1px solid #000000; height: 100px; }
   #firstInlineBlockElement		{ display: inline-block; border: 1px solid #00ff00; vertical-align: middle; }
   #secondInlineBlockElement		{ display: inline-block; border: 1px solid #00ffff; vertical-align: middle; }
   #thirdInlineBlockElement		{ display: inline-block; border: 1px solid #000088; vertical-align: middle; }
   #fourthInlineBlockElement		{ display: inline-block; border: 1px solid #ff0000; vertical-align: middle; }

Результат:

Значения table, table-row, table-cell:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значения table, table-row, table-cell свойства display</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="wrapper">
      <div id="firstBlockElement">Блочный элемент #1</div>
      <div id="secondBlockElement">Блочный элемент #2</div>
      <div id="thirdBlockElement">Блочный элемент #3</div>
     </div>
   
     <form>
      <div>
       <label>Имя:</label>
       <input>
      </div>
      <div>
       <label>Фамилия:</label>
       <input>
      </div>
     </form>
   
    </body>
   
   </html>

Файл styles.css:

   body									{ font-size: 14px; line-height: 20px; }
   
   #wrapper								{ display: table-cell; width: 600px; border: 1px solid #000000; height: 100px; vertical-align: middle; }
   #firstBlockElement							{ display: block; float: left; border: 1px solid #00ff00; }
   #secondBlockElement							{ display: block; float: left; border: 1px solid #00ffff; }
   #thirdBlockElement							{ display: block; float: left; border: 1px solid #000088; }
   
   form									{ display: table; margin-top: 20px; }
   form			div						{ display: table-row; }
   form			label						{ display: table-cell; }
   form			input						{ display: table-cell; }
   form			div:nth-of-type(2)		label		{ padding: 10px 6px 0px 0px; }

Результат:

Значение flex:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение flex свойства display</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div>
      <div>Первый блок</div>
      <div>Второй блок</div>
     </div>
    </body>
   
   </html>

Файл styles.css:

   body					{ margin: 0; }
   
   body > div				{ display: flex; flex-flow: row wrap; align-items: center; align-content: center; border: 1px solid #ff0000; height: 200px; }
   
   div > div:nth-of-type(1)		{ width: 400px; padding: 20px; background-color: #00ff00; }
   div > div:nth-of-type(2)		{ width: 400px; padding: 20px; background-color: #0000ff; color: #ffffff; }

Свойство display

Задание:

Значение none:

Файл index.html:

Файл styles.css:

Файл scripts.js:

Результат:

Значение block:

Файл index.html:

Файл styles.css:

Файл scripts.js:

Результат:

Значение inline:

Файл index.html:

Файл styles.css:

Результат:

Значение inline-block:

Файл index.html:

Файл styles.css:

Результат:

Значения table, table-row, table-cell:

Файл index.html:

Файл styles.css:

Результат:

Значение flex:

Файл index.html:

Файл styles.css:

Результат: