Page Title

CSS - % vs px

Может кто то и не знает в чем разница, я когда то не знал.

Смотрел код сайтов, и думал, почему же тут у него рх а там %.
Я наглядно покажу разницу.
Давайте снизу пропишем блок шириной 100%. Наш код в css:

div {
width: 100%;
height: 50px;
background-color: black;
}

Смотрим результат.

Ширина задалась 100% от родителя в котором находится блок.
Теперь давайте зададим 70% и посмотрим что будет.
Наш код в css:

div {
width: 70%;
height: 50px;
background-color: black;
}

Результат.

Тепепь зададим блоку ширину в 100px.
Наш код в css:

div {
width: 100px;
height: 50px;
background-color: black;
}

Результат.

Давайте провернем тоже самое с высотой. Мы поместим один блок в другой, и выставим одному из них высоту 100рх, а другому высоту 100%.
Наш блок для хранения будет иметь высоту 200 px и ширину 100%. Демонтстрировать код блока коттрый будет служить как контейнер я не буду.

Нам больше интересен блок который будет внутри с высотой 100рх и с высотой 100%.

Блок с высотой 100рх и шириной 50% код в css

div {
width: 50%;
height: 100px;
background-color: black;
}

Результат.

Как видим наш внутренний блок взял ширину 50% от родителя, и высоту в 100рх.

А теперь сделаем такой же блок внутри, только с высотой 100%.

Наш код в css

div {
width: 50%;
height: 100%;
background-color: black;
}

Результат.

Блок с высотой в 100% занял всю высоту от своего родителя. и 50% ширину от своего родителя. (Родитель это блок в котором он находится)

Можно например с помощью процентов легко сделать дизайн в таком стиле например.

Hello

World

Есть еще много единиц измерения, и мы обязательно о них поговорим в следующих уроках, но сегодня, вы уже знаете разницу между % и рх.

Если вам был полезен данный урок,то лучшая похвала для меня это ваши отзывы, лайки. Так будет мотивация делать уроки дальше.

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

урок (% против px)