Как вычисляется padding, если он указан в процентах? Очень просто:

При указании padding в процентах, значение считается от ширины родителя элемента.

Даже внутренний отступ сверху и снизу вычисляется именно исходя из ширины родителя. Поэтому реализовать адаптивный квадрат на CSS очень просто.

.square {
display: block;
width: 50%;
}

.square:after {
content: '';
display: block;
padding-top: 100%;
}

По порядку:

  1. создаем блок, который хотим сделать квадратным

Псевдоэлемент используется, чтобы не создавать лишний html элемент.

А как поместить контент?

Все сломается, если поместить в блок .square контент, например, текст. Наш квадрат превратится в…


Знание основных концепций ООП является фундаментом, позволяющим переходить к изучению более высокоуровневых принципов проектирования. Рассмотрим некоторые основные понятия ООП: абстракция, инкапсуляция, полиморфизм и наследование.

Абстракция

Определение в логике. Абстракция (лат. abstractio — отвлечение) — теоретическое обобщение как результат абстрагирования. Абстрагирование — отвлечение в процессе познания от несущественных сторон, свойств, связей объекта (предмета или явления) с целью выделения их существенных, закономерных признаков.

Таким образом абстракцией можно считать набор существенных признаков объекта.

Википедия про абстракцию в ООП. Абстракция в ООП — это придание объекту характеристик, которые чётко определяют его концептуальные границы, отличая от всех других объектов. Фундаментальная идея состоит в разделении несущественных деталей…

Герман Волков

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store