Единица измерения проценты (%) в CSS.

Еще одна единица измерения, которая довольно часто можно встретить при использовании стилей CSS - это проценты (%).

Давайте разберемся как это работает.

Процент, по своему определению, это часть какой-то величины.

Что же это за величина, относительно которой берутся проценты?

В CSS проценты вычисляются от размера соответствующего свойства родительского элемента.

Давайте в этом сейчас убедимся.

В первом примере давайте посмотрим, как пересчитывается значение свойства width в процентах, в зависимости от размера родительского элемента:

<div style="width:500px; background:#050;">
<div style="width:50%; background:#505; color:#fff">
Вложенный блок с шириной 50% от родительского.
</div>
</div>

На следующем примере можно увидеть, как работают проценты для свойства font-size:

<div style="font-size:10px;">
Размер текста родительского элемента
<div style="font-size:200%;">
Размер текста 200% от родительского
</div>
</div>

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