Ответ
display - управляет отображением элемента (block, inline, flex, grid).
position - задаёт позиционирование (relative, absolute, fixed).
margin/padding - внешние/внутренние отступы.
color/background-color - цвет текста и фона.
font-size/font-family - размер и семейство шрифта.
border - рамка элемента.
width/height - ширина и высота.
flex/grid - для Flexbox и Grid Layout.
Пример:
.container {
display: flex;
justify-content: center;
padding: 20px;
background-color: #f0f0f0;
}Ответ 18+ 🔞
А, ну вот, опять про эти ваши CSS-свойства, блядь! Слушай, да это ж как алфавит для верстальщика — без них нихуя не соберёшь, а с ними можно такой пиздец наворотить, что мама не горюй.
Ну, display — это типа твой главный вышибала, решает, как элемент будет себя вести: будет ли он скромным строчным чинушей (inline) или властным блочным начальником (block), а может, модным гибким айтишником (flex) или строгим архитектором сеток (grid). Выбирай, сука, но выбирай с умом.
position — это уже про дислокацию, блядь. relative — типа «я тут, но могу съехать». absolute — «я вышел из общего строя и живу по своим координатам, похуй на всех». А fixed — это вообще отморозок, который прилип к экрану и никуда не денется, даже если скроллишь до посинения.
margin и padding... О, это святое! margin — это когда ты говоришь соседям: «Отъебитесь от меня на 20 пикселей, я воздух люблю». А padding — это внутренняя гармония: «Я и моё содержимое должны дышать, оставьте мне простор, блядь!»
color и background-color — ну тут всё ясно, это про красоту, ёпта. Один красит буквы, другой — стенку за ними. Можно сделать розовенько с перламутровыми пуговицами, а можно в стиле «ночной режим — глаза не вытекают».
font-size и font-family... Один отвечает за размер букв — сделаешь слишком мелко, пользователи ослепнут, слишком крупно — будут орать «ТЫ ЧО, МЕНЯ ЗА ДЕБИЛА ДЕРЖИШЬ?». А второй — это выбор семьи шрифтов. Поставишь Comic Sans — и всё, ты пидарас, прости господи. Arial — скучно, но безопасно. Georgia — для интеллигентов, блядь.
border — это рамка, она может быть тоньше волоса или толще, чем твоё упрямство. Можно dotted, dashed, solid — хоть пунктиром, хоть сплошняком, хоть двойной линией, как на таможне.
width и height — ширина да высота. Поставь width: 100% — и элемент расползётся как тесто. Задашь фиксированные пиксели — и он станет непоколебимым, как скала, даже если контент не влезает и вылазит, сука, за края.
Ну и flex с grid — это уже тяжёлая артиллерия, для тех, кто устал ебаться с float'ами и inline-block'ами. С ними можно творить такие раскладки, что дизайнеры будут плакать от счастья, а старые верстальщики — от зависти.
Вот, смотри, пример кода, тут всё честно:
.container {
display: flex;
justify-content: center;
padding: 20px;
background-color: #f0f0f0;
}Видишь? Сделали контейнер гибким, всё внутри по центру выровняли, отступов внутри навтыкали и фон серенький, неброский. Красота, да и только. А могло бы быть и хуже, поверь.