Ширина и высота блока, css

Автор: | 01.01.2021

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

Высота блока задается свойством height. Указать высоту можно в px , процентах. При задании высоты в процентах, значение высоты вычисляется от высоты родительского блока, либо от высоты экрана, если нет родительского блока.
Если содержимое блока имеет высоту, больше чем высота блока, то высота данного блока остается неизменной, а содержимое будет показано поверх блока.

Для наглядности блоков используем свойство background-color: цвет для блоков.

Пример:

<style>
 
  .myblock11 {
 width :100px;
background-color:lightgray;
};
 .myblock12{
 width :50%;
background-color:lightblue;
}
.myblock21{
height:120px;
background-color:lightcyan;
}
.myblock22{
width:200px;
height:120px;
background-color:Aqua;
}
</style>

<div class="myblock11">
Блок 11
</div>
<div class="myblock12">
Блок 12
</div>
<div class="myblock21">
Блок 21
</div>
<div class="myblock22">
Блок 22
</div>

Результат:

Блок 11
Блок 12
Блок 21
Блок 22
0 0 голос
Рейтинг статьи
Раздел: css

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии