Каждая статья в этой статье — точка кипения выложенных мной наггетсов, и многие из них перевалили за 100 лайков (улыбается).
Ввиду того, что детская обувь время от времени переворачивает мою предыдущую точку кипения, в этой статье собраны актуальные личные вопросы.всеАнимация точки знаний CSS, легко читаемая.
Следует отметить, что заказ все еще указан в порядке выпуска в то время, и пока нет систематического свода, пожалуйста, потерпите меня.
Кроме того, Лао Яо благодарит вас за вашу постоянную поддержку. 😘😘😘
01.【Отрицательная маржа】💘Эффект отрицательной маржи. Обратите внимание, что левое и правое отрицательные поля ведут себя непоследовательно. Когда левое отрицательное, это сдвиг влево, а когда правое отрицательное, это левое притяжение. вверх и вниз аналогично левому и правому
02.【форма снаружи】❤Не будь самодовольным. Ты думаешь, что ты квадратный, но в глазах других ты круглый
03. 【Приложение BFC】 💓Приложение BFC блокирует схлопывание внешнего края поля
04. 【Приложение BFC】💔Приложение BFC для устранения влияния плавающего
05. [Одна из неизвестных особенностей flex] 💕Волшебное использование margin:auto при гибком макете
06. [Вторая неизвестная особенность flex] 💖flex layout, когда сумма flex-grow меньше 1, пропорционально можно выделить только часть оставшегося пространства, а не все
07. [Ширина ввода]💗Дело не в том, что установка display:block для элемента автоматически заполнит ширину родительского элемента. Исключением является input, ширина которого по умолчанию зависит от значения атрибута size
08. [Функция позиционирования] 💙При абсолютном позиционировании и фиксированном позиционировании одновременная установка левого и правого положения эквивалентна неявной установке ширины
09. 【Контекст стекирования】💚Контекст стекирования: младший есть младший, каким бы сильным он ни был, это всего лишь младший
10. 【Позиционирование джойстика】💛Положение: липкое, чтобы липкое позиционирование работало, вам необходимо установить последнее положение фиксации. В Chrome есть ошибки, Firefox идеален
11.【Селектор соседнего брата】💜 Общие сцены селектора соседнего брата
12.【Модальное окно】🖤Чтобы сделать фон модального окна прозрачным, это простой способ использовать rgba
13. [Треугольник] 💝css Принцип рисования треугольников
14. [макет таблицы] 💞display:table реализует макет с несколькими столбцами одинаковой высоты
15.【Цветовой контраст】❣Красные буквы на синем фоне, потому что цветовой контраст относительно низкий, нечеткий, так что это не очень хорошая цветовая схема😂
16. [Фиксированное соотношение сторон] ♥ Принцип css для достижения фиксированного соотношения сторон: процент заполнения зависит от ширины содержащего его блока, а не от высоты.
17.【Направление анимации】🐹 Вы можете выбрать альтернативное направление анимации, попеременно идти вперед и назад
18. [Нанесение линейного градиента] 🐮css Принцип рисования лент
19.【Скрытый текст】🐯Два способа скрыть текстовое содержимое
20.【Центрирование】🐰 Простой способ добиться центрирования
21.【Угловой градиент】🐲Новый градиент: угловой градиент. Может использоваться для реализации круговых диаграмм
22. [Процент положения фона] 🐍 Правильный способ понять процент положения фона: процентное положение самого изображения совпадает с таким же процентным положением контейнера
23. [Фон повторить новое значение] 🐴background-Repeat Новое значение атрибута: круглое и место. Первые средства округления, последние средства оставляют разрыв
24. [Приложение фона] 🐐background-attachment указывает, как фон прикрепляется к контейнеру, обратите внимание на использование значений его атрибутов local и fixed
25. 【Задержка анимации】🐵 Добавление времени задержки к анимации может сделать темп непоследовательным.
26. [использование контура] 🐔 Вы можете использовать контур для обводки, не занимая места, он может быть даже внутри
27【Позиционирование фона】🐶 Когда фиксированный фон не прокручивается вместе с элементом, позиционирование фона определяется относительно области просмотра.
28【размер вкладки】🐷 Вкладка, отображаемая в браузере по умолчанию, составляет 8 пробелов, размер табуляции может указывать длину пробела.
29【Пауза анимации】🥝Анимацию CSS можно приостановить.
30【object-fit】🍓 После указания размера изображения вы можете установить объектное соответствие, чтобы оно содержало или закрывало, чтобы сохранить пропорции.
31【Статус мыши】🍒 Когда кнопка отключена, не забудьте установить статус мыши
32 [Боке] 🍑 Используйте фильтры CSS для создания боке
33【fill-available】🍏 Установите ширину, чтобы заполнить-доступно, вы можете заставить встроенный блок заполнить все пространство, как блок
34【fit-content】🍎 Установите ширину в соответствии с содержанием, что может сделать блок похожим на встроенный блок, чтобы добиться эффекта уменьшения ширины для переноса содержимого.
35 [настраиваемых свойств] 🍋Простое использование настраиваемых свойств CSS
36 [мин-контент / макс-контент] 🍍 Вы можете установить ширину мин-контента и макс-контента, первый максимально делает контент, второй максимально делает контент
37 [индикатор выполнения] 🍊 Используйте градиент, реализацию DIV
38【Печать】🍉Вы можете установить свойства, связанные со страницей, при печати веб-страниц. Например, свойство page-break-before указывает, нужно ли начинать новую страницу.
39【Покадровая анимация】🍌Используйте спрайты CSS для реализации покадровой анимации
40【изменить размер】🍐 Обычные элементы также могут быть изменены, например, текстовое поле.
41 [Хлебные крошки] 🍇 Используйте псевдоэлемент before для реализации хлебных крошек
42【липкий нижний колонтитул】🍈Используйте макет сетки для реализации липкого нижнего колонтитула
43【Состояние заполнения анимации】🍅CSS может установить состояние, сохраняемое до начала и окончания анимации.
44 [Отрицательная задержка анимации] 🥑 Анимация CSS может установить время задержки на отрицательное число, что означает, что анимация, кажется, работала так долго, прежде чем она начнется.
45【Переход】🍆Магия любви вращается по кругу
46【Анимационный случай】🍬 Принцип эффекта водной волны
47【Animation Case】🌸Принцип CSS эффекта анимации пинбола
48【контур】🌻атрибут контура
49【grid】💕 Детектор сетки Firefox
Надеюсь, это поможет.
Также добро пожаловать, чтобы прочитать мой собственный"Обычная мини-книга JS".
Эта статья закончилась.