Что означает 100% в CSS?
Амелия Ваттенбергер написала интерактивную статью про использование процентов в CSS — "What does 100% mean in CSS?".
В статье есть хорошие интерактивные примеры и краткое описание поведения процентов для разных свойств:
- для
height
процент высчитывается относительно высоты родителя - для
width
— относительно ширины родителя - для
top
— относительно высоты родителя - для
left
— относительно ширины родителя - для
margin-top
— относительно ширины родителя - для
margin-left
— относительно ширины родителя - для
padding-top
— относительно ширины родителя - для
padding-left
— относительно ширины родителя - для
translate-top
— относительно высоты элемента - для
translate-left
— относительно ширины элемента
Очень прикольная статья. Советую почитать всем, кто хочет разобраться с процентами в CSS.