19. Ширина и высота блока, выравнивание.
Если блоку не задавать определенное значение по ширине (свойство width), то элемент будет стремиться занять все пространство по ширине.
Если блоку не задавать определенное значение по высоте (свойство height), то элемент будет иметь высоту, исходя из расположенного в нем контента.
Важно понимать следующее. Когда вы устанавливаете значения свойств ширины (свойство width) и высоты (свойство height), вы устанавливаете ширину и высоту именно области контента. Чтобы рассчитать полный размер необходимо к значениям ширины (width) или высоты (height) прибавить значения паддингов (padding), бордеров (borders) и марджинов (margins).
Теперь исследуем на практическом примере:
css_019_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_019_001.zip ← скачайте пример, чтобы установить на свой сайт...
Если блоку не задавать определенное значение по высоте (свойство height), то элемент будет иметь высоту, исходя из расположенного в нем контента.
Важно понимать следующее. Когда вы устанавливаете значения свойств ширины (свойство width) и высоты (свойство height), вы устанавливаете ширину и высоту именно области контента. Чтобы рассчитать полный размер необходимо к значениям ширины (width) или высоты (height) прибавить значения паддингов (padding), бордеров (borders) и марджинов (margins).
Если блоку не задавать определенное значение по ширине (свойство width), то элемент будет стремиться занять все пространство по ширине.
Если блоку не задавать определенное значение по высоте (свойство height), то элемент будет иметь высоту, исходя из расположенного в нем контента.
Если блоку не задавать определенное значение по высоте (свойство height), то элемент будет иметь высоту, исходя из расположенного в нем контента.
Для данного блока жестко зафиксировали ширину 200px путем назначения:
width: 200px;
width: 200px;
Для данного блока жестко зафиксировали ширину 300px путем назначения:
width: 300px;
Также жестко зафиксировали высоту 100px путем назначения:
height: 100px;
А чтобы контент не вываливался за пределы блока и в случае необходимости появились полоски прокрутки:
overflow:auto;
width: 300px;
Также жестко зафиксировали высоту 100px путем назначения:
height: 100px;
А чтобы контент не вываливался за пределы блока и в случае необходимости появились полоски прокрутки:
overflow:auto;
Данный блок мы выравниваем по центру путем назначения:
margin: 0px auto 0px auto;
margin: 0px auto 0px auto;
Теперь исследуем на практическом примере:
css_019_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_019_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
