Те CSS, которые вам нужно знать — Резюме

1. px, em, rem, vw, vh

1.px (пиксель, пиксель):

Это виртуальная единица длины, которая является единицей длины цифрового изображения компьютерной системы.Если пиксели должны быть преобразованы в физическую длину, необходимо указать точность DPI (точек на дюйм, пикселей на дюйм), а DPI обычно необязательно при сканировании и печати. В системе Windows по умолчанию используется разрешение 96 точек на дюйм, а в системе Apple — 72 точки на дюйм.

2.em (относительная единица длины относительно размера шрифта текста в текущем объекте):

— относительная единица длины, изначально относившаяся к ширине буквы М, отсюда и название em. Теперь относится к кратному ширине символа, использование аналогично проценту, например: 0,8 em, 1,2 em, 2 em и т. д. Обычно 1em=16px.

3.rem (root em, root em):

2. Схема «Святой Грааль» — схема «Двойное летающее крыло»

<div class="container">
   <div class="main">main</div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

.container {
  width: 100%;
  min-height: 300px;
  padding: 0 60px;
  box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}

2. гибкий макет:

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}

3. Абсолютный макет:

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}

В-третьих, плавный макет и адаптивный макет.

В-четвертых, алгоритм приоритета CSS

• Селектор элементов: 1
  
• селектор класса: 10
  
• селектор идентификатора: 100
  
• Метки элементов: 1000
  

1. !importantОбъявленный стиль имеет наивысший приоритет и вычисляется в случае конфликта.
   
2. Если приоритет тот же, выбирается стиль, который отображается последним.
   
3. Унаследованные стили имеют самый низкий приоритет.
   

5. Какие новые псевдоклассы появились в CSS3?

• p:first-of-type выбирает первый элемент, принадлежащий его родителю
  
• p:last-of-type выбирает последний элемент, принадлежащий его родителю
  
• p:only-of-type выбирает элементы, которые уникальны для их родителя
  
• p:only-child выбирает единственный дочерний элемент, принадлежащий его родительскому элементу
  
• p:nth-child(2) выбирает второй дочерний элемент, принадлежащий его родителю
  
• :enabled :disabled Отключенное состояние элемента управления формы.
  
• :checked Радио или чекбокс отмечен.
  

Шесть, новые функции CSS3

1. RGBA и прозрачность

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap (Перенос длинных неделимых слов) word-wrap: break-word

4. Text-shadow: text-shadow: 5px 5px 5px #FF0000; (горизонтальная тень, вертикальная тень, расстояние размытия, цвет тени)

5. свойство font-face: определите свой собственный шрифт

6. Закругленные углы (радиус границы): свойство border-radius используется для создания закругленных углов.

7. Изображение границы: изображение границы: url(border.png) 30 30 раундов

8. Коробка теней: box-shadow: 10px 10px 5px # 888888

9. Медиа-запрос: определите два набора css, которые будут использовать разные свойства при изменении размера браузера.

7. Как можно оптимизировать CSS и повысить производительность?

1. избегать чрезмерных ограничений

2. Избегайте селекторов потомков

3. Избегайте связанных селекторов

4. Используйте компактный синтаксис

5. Избегайте ненужных пространств имен

6. избегать ненужного повторения

7. Лучше использовать имена, которые представляют семантику. Хорошее имя класса должно описывать, что это такое, а не что-то вроде

8. избегать! важно, другие селекторы могут быть выбраны

9. Минимизируйте правила, насколько это возможно, вы можете комбинировать повторяющиеся правила в разных классах

8. CSS-анимация

в CSStransform,transitionа такжеanimationделится на три части, из которыхtransfromВ основном это контроль деформации элементов, и нет понятия контроля времени, иtransitionа такжеanimationЭто часть анимации, они могут управлять эффектом переключения элементов в двух или более состояниях за определенный период времени.

1.transition

переходное свойство:

• transition-delayПосле долгого задержки начать анимацию

• transition-durationпродолжительность анимации перехода

• transition-propertyВыполните свойства, соответствующие анимации, такие какcolor,background д., вы можете использоватьall указать все свойства

• transition-timing-functionС течением времени метод расчета траектории изменения анимации, общие из них:linear,ease,ease-in,ease-out,cubic-bezier(...) Ждать.

события, связанные с переходом

transitionend событие будетtransition Запускается, когда анимация заканчивается. Обычно мы выполняем некоторые методы после окончания анимации, например, переход к следующему эффекту анимации или другие. Все методы анимации в Zepto.js обрабатываются с помощью свойств анимации CSS, а обратный вызов после запуска анимации должен обрабатываться с помощью этого события.

2.animation

несмотря на то чтоtransitionОн обеспечивает отличные анимационные эффекты, но мы можем управлять только переходом из одного состояния в другое, мы не можем контролировать непрерывное изменение нескольких состояний иanimationИ помог нам в этом. использоватьanimationПредпосылка заключается в том, что нам нужно использовать@keyframesчтобы определить эффект анимации,@keyframesОпределенные правила можно использовать для управления статусом каждого состояния в процессе анимации Синтаксис примерно такой:

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}

@keyframesЗа ключевым словом следует название анимации, а затем блок.В блоке есть различные селекторы для прогресса анимации.Блок после селектора по-прежнему является нашим общим свойством стиля CSS.

свойство анимации:

• animation-nameнужная вам анимация@keyframesимя.

• animation-delayа такжеtransition-delayТо же, что и время задержки анимации.

• animtaion-durationа такжеtransition-durationНравится продолжительность анимации.

• animation-directionНаправленный контроль для анимации.
  По умолчаниюnormal, если выше слева от 0% до 100%, то по умолчанию слева направо. если это значениеreverse, затем справа налево

из-заanimationобеспечивает управление циклом, поэтому есть еще два значения, которыеalternateа такжеalternate-reverse, эти два значения изменят направление анимации в начале каждого цикла, но начальное направление будет другим.

события, связанные с анимацией

Вы можете прослушивать события, привязавanimation нескольких состояний, эти события:

• animationstart событие запуска анимации, если естьdelay свойство, затем подождите, пока анимация действительно не начнет запускаться, если задержки нет, то при применении эффекта анимации к элементу будет запущено это событие.

• animationend событие, когда анимация заканчивается, иtransitionend аналогичный. Если есть несколько анимаций, то это событие сработает несколько раз, как в приведенном выше примере, это событие сработает три раза. еслиanimation-iteration-countУстановить какinfinite, то это событие не будет запущено.

• animationiteration Анимация зацикливает событие в конце своего жизненного цикла. В отличие от предыдущего события, это событие запускается каждый раз, когда цикл завершает анимацию, а не когда заканчивается вся анимация. при бесконечном цикле, если толькоduration0, иначе это событие будет срабатывать бесконечно

9. БФК

Полное название BFC — Block Formatting Context, то есть контекст форматирования блока. Он определяется спецификацией CSS2.1, концепцией позиционирования рендеринга CSS. Чтобы понять, что такое BFC, давайте сначала рассмотрим, что такое модель визуального форматирования.

Но самые распространенные из нихoverflow:hidden,float:left/right,position:absolute. То есть каждый раз, когда вы видите эти атрибуты, он представляет элемент и создает BFC.

BFC — это изолированный и независимый контейнер на странице, дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот. Мы можем многое сделать с помощью этой функции BFC.

Десятка, гибкая верстка

основная концепция

Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».

Контейнер по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (пересечение с границей) называетсяmain start, конечная позиция называетсяmain end; начальное положение поперечной оси называетсяcross start, конечная позиция называетсяcross end.

По умолчанию элементы располагаются вдоль главной оси. Пространство веретена, занимаемое одним изделием, называетсяmain size, Поперечное оси, называемое пространство, занятымcross size.

Свойства контейнера:

1.flex-direction: свойство определяет направление главной оси (т.е. направление расположения элементов).

3. flex-flow: сокращение для свойств flex-direction и flex-wrap.

4.justify-content: определяет выравнивание элемента по главной оси

• flex-start(По умолчанию): выравнивание левого
• flex-end: выравнивание по правому краю
• center: центр
• space-between: Оба конца выровнены с одинаковым интервалом между элементами.
• space-around: равные интервалы с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей.

5.align-items: определяет, как элементы выравниваются по поперечной оси.

• flex-start: Начальная точка поперечной оси выровнена.
• flex-end: Выровняйте конечную точку поперечной оси.
• center: Выровняйте среднюю точку поперечной оси.
• baseline: Базовое выравнивание первой строки текста элемента.
• stretch(по умолчанию): если элемент не имеет высоты или установлен автоматически, он будет заполнять всю высоту контейнера.

6.align-content: определяет выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

• flex-start: Выровнять по начальной точке поперечной оси.
• flex-end: Выровнять по конечной точке поперечной оси.
• center: Выровняйте по средней точке поперечной оси.
• space-between: Выровняйте по обоим концам поперечной оси, и расстояние между осями будет равномерно распределено.
• space-around: Расстояние с обеих сторон каждой оси одинаковое. Следовательно, расстояние между осями в два раза больше, чем расстояние между осями и рамой.
• stretch(по умолчанию): ось заполняет всю поперечную ось.

свойства проекта

1. orderСвойство определяет порядок сортировки элементов. Чем меньше значение, тем выше рейтинг, по умолчанию 0.
   
2. flex-shrinkСвойство определяет соотношение восстановления элемента, по умолчанию 1, то есть, если не хватает места, элемент будет сжат.
   
3. flex-basisСвойство определяет основное пространство шахты (основной размер), занимаемое проектом, до выделения нескольких пространств.
   
4. гибкое свойствоflex-grow, flex-shrinkа такжеflex-basisсокращение для , по умолчанию0 1 авто.
   
5. align-selfАтрибут позволяет одному элементу иметь выравнивание, отличное от других элементов, может быть переопределеноalign-itemsАтрибуты.
   

Это свойство может принимать 6 значений, кроме авто, другие точно такие же, как свойство выравнивания.

Одиннадцать, Краткий обзор компоновки сетки

Макет сетки — это новый метод компоновки в css, который имеет строгий контроль над положением и размером блоков и содержимым блоков. В отличие от flex, flex фокусируется на одной оси, а grid подходит для нескольких осей, поэтому давайте сделаем краткое введение.

основная концепция

свойства контейнера

Двенадцать, размер коробки

Тринадцать, аппаратное ускорение

Иногда анимация может привести к зависанию компьютера пользователя. Чтобы избежать этой проблемы, на некоторых элементах можно использовать аппаратное ускорение:

.block {
    transform: translateZ(0);
}

Вы не заметите разницы, но браузер выполнит аппаратное 3D-ускорение для этого элемента, вwill-changeЭтот метод полезен до тех пор, пока это специальное свойство не поддерживается полностью.

(Постоянно обновляется...)

Ссылаться на

Расскажите о единицах длины CSS3 (vh, vw, rem)

Классический макет CSS — макет Святого Грааля

Глубокое понимание БФC

Ruan Yifeng Flex Layout Tutorial: Грамматика

так далее