GoToWeb - Видеокурс Html и Css, урок 10, Блочные и строчные элементы (теги), 1 часть

В видеоуроке рассматривается блочное и строчное представление элементов (тегов) html, свойства блочных и строчных элементов, их предназначение и отличия между собой. Также демонстрируется процесс преобразования блочных элементов в строчные и строчных – в блочные. Отдельно рассмотрены возможности и преимущества использования инлайн-блочных (inline-block) элементов.

Содержание видеоурока:
03:43 – ширина блочных элементов (тегов).
04:35 – ширина строчных (инлайновых) элементов (тегов).
06:25 – высота блочных элементов.
07:50 – высота строчных (инлайновых) элементов.
09:00 – свойства width и height для блочных элементов.
11:05 – свойства width и height для строчных (инлайновых) элементов.
12:40 – расположение блочных и строчных элементов в потоке.
14:10 – назначение блочных и строчных элементов.
15:30 – пример блочных и строчных элементов на реальном сайте.
23:00 – возможность вложения строчных элементов в блочные и наоборот.
23:48 – изображения как инлайновые (замещаемые) элементы.
26:08 – преобразование блочных в строчные элементы и наоборот. Свойство display со значениями inline, block, inline-block.

[veldr]

Уважуха автору, за то что заостряете внимание на труднопонимаемых ключевых вопросах и за очень доходчивые объяснения отдельное спасибо!!!

[raiymzhanraiymbek]

Забываю на каждый урок поставить лайки, но в этом не

[euovvur]

ОЧЕНЬ понятно. Огромное спасибо, что разжевали и переварили за нас. За полчаса разобрался с материалом не пересматривая

[devlog]

В данный момент для строчных элементов без содержимого не отображаются вертикальные рамки outline (проверено в последних версиях Firefox, Chrome и Opera). Они даже места не занимают в таком случае, но безусловно по-прежнему присутствуют в html-коде.

Однако при добавлении свойства border, например border: 1px solid red; вертикальная сдвоенная рамка появляется и элемент имеет высоту равную установленному для него font-size и ширину соответствующую удвоенному значению ширины рамки.

[devlog]

Тег img не обязательно закрывать с помощью "/>", можно и так <img src="<адрес>" alt="<текст>">