«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > CSS от А до Я

CSS от А до Я

Опубликовано 5 августа 2024 г.
Просматривать:564

An A to Z of CSS

Это вдохновлено тем, как я вошел в комнату и обнаружил, что мои родители и племянник пытаются собрать автомобили от А до Я.

Доступность

То, что многие забывают, но я считаю, что это так же важно, как и оперативность.

Блок Б

Перпендикулярно направлению письма.

C расчет

Выполнение вычислений в CSS. Очень кстати.

D-дисплей

блок, встроенный, встроенный блок, гибкий, встроенный-гибкий, сетка, встроенная сетка, нет и т. д.

Э :пусто

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

F флексбокс

Когда я впервые начал работать с CSS, я учился, глядя на инспектора и играя с ним. А потом я скопировал кого-то, кто делал макеты с поплавками. И было так сложно позиционировать вещи. Изучение флексбокса имело решающее значение.

G-сетка

То, что мне до сих пор кажется более сложным и мощным братом flexbox.

Высота Н

Сколько места что-то занимает по горизонтали.

Я встроен

Направление письма. Действительно полезно для центрирования, где вы можете использовать поля-inline: auto.

Я оправдываю

В Flexbox Zombies вы используете выравнивающий лазер, чтобы нацеливаться на зомби в том направлении, в котором вы стреляете.

К @keyframes

Этапы анимации.

L-высота строки

Может сделать текст совершенно нечитаемым, если он слишком большой или слишком маленький.

М маржа

Пространство вокруг элемента, которое не увеличивает его.

нет нет

Полезно, чтобы остановить отображение чего-либо или удалить границы.

O объект подходит

Хотя кажется, что это было всегда, некоторое время назад я наткнулся на кое-что относительное. Он включал в себя некоторые написанные кем-то JavaScript, чтобы справиться с тем, что объектная подгонка является новой и еще не работает во всех браузерах.

P-заполнение

Интервал вокруг элемента, увеличивающий его размер. Отрицательное заполнение — это не то же самое, что отрицательное поле.

Q-запросы

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

R отзывчивость

Важно, чтобы ваш сайт отображался на всех экранах. Кажется довольно простым, но существует множество сайтов, которые не подходят под некоторые размеры.

S-специфичность

Это становится проблемой при попытке переопределить стили стороннего производителя. Хотя недавно я видел некоторые плагины CMS, использующие :where, и это очень помогает.

Т текст

Иногда используется для оформления шрифта. И иногда вы используете шрифт. За исключением случаев, когда вы хотите изменить цвет текста, в этом случае это не так.

U-единицы

Наиболее часто используемые из них — %, px, em и rem. Также fr в сетках, а также s и ms в переходах и анимации.

видимость V

Интересно, противоположность видимому скрыта. Это не то, что вы могли бы логически подумать.

Ширина Ш

Сколько места что-то занимает по горизонтали.

X переполнение-x

Небольшой обман для x, но на x ничего не начинается. Это контролирует горизонтальное переполнение. x также используется с Tailwind, где, например, mx — горизонтальный запас.

Y переполнение-y

Как и в случае с x, контролирует вертикальное переполнение. А y обычно обозначает вертикаль в попутном ветре.

Z z-индекс

Наивысший/наименьший z-индекс, который вы можете использовать, составляет (-)2 147 483 647. Или бесконечность даст вам то же самое. Но набрать кучу девяток, а затем задаться вопросом, почему это не работает, — гораздо более простой метод.

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/nicm42/an-a-to-z-of-css-5178?1. Если есть какие-либо нарушения, пожалуйста, свяжитесь с [email protected], чтобы удалить ее.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3