Статья, чтобы разобраться в основных моментах CSS

Эта статья в основном разбирает необходимые точки знаний CSS, и будет продолжать дополняться и обновляться! Предупреждение о длинном тексте! Это наверное самый длинный 🙈🙉🙊

Импорт CSS

Каковы методы введения? В чем разница между импортом по ссылке и @import? (*)

• Есть 4 способа импорта CSSВстроенный, встроенный, исходящая ссылка, импорт
• Внешняя ссылкаВ дополнение к загрузке css вы также можете определить такие атрибуты, как rss, rel и т. д. Нет проблем с совместимостью, и он поддерживает использование javascript для изменения стиля.
• импорт @импортОн предоставляется css и может использоваться только для загрузки css и не поддерживает изменение стилей через javascript.
• Когда страница загружена, ссылка будет загружена в то же время, и @import должен дождаться загрузки страницы перед загрузкой, и может быть нестилизованная страница.

В чем разница между тегом Style, написанным после тела и перед телом?

• Обычно страницы загружаются сверху вниз. Тег стиля помещается перед телом, чтобы сначала загрузить стиль.
• Если он написан после тега body, так как браузер разбирает html документ построчно, то при разборе таблицы стилей, написанной в конце документа, браузер остановит предыдущую отрисовку и будет ждать загрузки и разбора таблицы стилей Он будет перерендерен позже, и явление FOUC (мерцание страницы) может возникнуть в IE на Windows. ,

Что такое FOUC (Flash нестилизованного контента)? Как избежать FOUC

• При использовании @import для импорта CSS некоторые страницы будут выглядеть странно в IE: содержимое страницы без стиля отображается мгновенно мерцающим.Это явление называется «временная недействительность стиля документа», или сокращенно FOUC.
• причина:Когда таблица стилей загружается позже, чем структурный html, страница перестает отображаться при загрузке в эту таблицу стилей. Ожидание загрузки и анализа таблицы стилей перед повторным рендерингом страницы, что приводит к кратковременному размытию экрана.
• Решение:Просто добавьте элемент или между ними.

Селекторы CSS

Селекторы CSS анализируются сверху вниз, справа налево, чтобы избежать разбора всех элементов.

• Наследуемые стили: размер шрифта, семейство шрифтов, цвет, ul, li, dl, dt, dd;
• Ненаследуемые стили: граница, отступы, поля, ширина, высота

Виды селекторов CSS

• селектор идентификатора
  • Быстро получить объект тега на основе предоставленного уникального идентификационного номера
  • Значение, используемое в качестве атрибута for метки метки: Имя пользователя:, указывающее, что при нажатии на эту метку метка метка с идентификатором userid получает фокус
• Селектор класса (class )
• Селектор тегов (h1)
  
• соседний селектор
  • Селектор непосредственно смежного элемента (h1+p)
  • Селектор обычного соседнего элемента (h2 ~ h2)
• Детский селектор (ul>li)
• селектор потомков (li a)
• Селектор подстановочных знаков (*)
• селектор атрибутов (a[rel = "XXX"])
• Селектор псевдокласса ( :hover :first-child )
• Селекторы псевдоэлементов ( :before :after )
• селектор группы

Приоритет селектора CSS

• приоритет от высокого к низкому!Важно> Встроенный стиль> Выбор идентификатора> Выбор класса> Выбор тега> Выбор подстановочного знака> Унаследовано
• Алгоритм приоритета (вес)
  • вес селектора элемента
    • Теги элементов (производные селекторы): 1
    • селектор класса: 10
    • селектор идентификатора: 100
    • Максимальное количество встроенных стилей: 1000
  • Унаследованные стили имеют самый низкий приоритет
  • Сравните приоритет нескольких селекторов CSS с одинаковым весом, и позиция определения — это все. Он разделен на шесть уровней от высокого к низкому:

      1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
      2. 位于 <style/>标签中的 @import 引入样式表所定义。
      3. 由<link/>标签所引入的样式表定义。
      4. 由<link/>标签所引入的样式表内的 @import 导入样式表定义。
      5. 用户设定。
      6. 浏览器默认。

• В случае одного и того же местоположения будет превалировать наиболее близкое определение стиля (приоритет тот же, и выбирается стиль, который появляется последним)

Псевдоклассы и псевдоэлементы CSS

Псевдоэлементы CSS

• ::selectionВыберите часть элемента, выбранную пользователем
  
• :first-lineВыбрать первую строку в элементе
  
• :first-letterВыберите первый символ в элементе
  
• :afterдобавить содержимое после элемента
  
• :beforeдобавить содержимое перед элементом
  

Псевдоклассы CSS

• :rootВыберите корневой элемент документа, эквивалентный элементу html
  
• :emptyВыбрать элементы без дочерних элементов
  
• :targetВыберите текущий активный целевой элемент
• :not(selector)Выберите элементы, отличные от элементов селектора
• :enabledВыберите доступные элементы формы
  
• :disabledВыбрать отключенные элементы формы
  
• :checkedВыберите выбранный элемент формы
• :first-childВыбирает первый элемент под текущим селектором.
  
• :last-childВ отличие от first-child, выбирает последний элемент под текущим селектором.
• :only-childВыберите единственный дочерний элемент. Этот псевдокласс вступает в силу, если у родителя элемента есть только один дочерний элемент. Если у элемента есть одноуровневые элементы, этот псевдокласс не оказывает на него никакого влияния.
  
• :only-of-typeВыбирает только элементы определенного типа. Этот псевдокласс вступает в силу, если в родительском элементе есть только один элемент текущего типа. Этот псевдокласс допускает другие элементы в родительском элементе, если они не совпадают с самими собой.
  

Статический псевдокласс (только для тега)

• :link указывает, что эта «гиперссылка» (т. е. атрибут href в элементе a) не использовалась.
• :visited указывает, что эта «гиперссылка» была посещена

Динамические псевдоклассы (при использовании поощряется порядок «LVHT»)

• :focus Указывает, что этот элемент имеет ввод «фокус», т. е. может принимать ввод с клавиатуры или может быть активирован каким-либо образом.
• :hover указывает, что при наведении курсора мыши на этот элемент внешний вид может быть изменен соответствующим образом.
• :active указывает, что элемент может быть «активирован» пользовательским вводом, т. е. пользователь наводит курсор на гиперссылку, и ссылка «активируется» при щелчке мыши.

Принципиальная разница между псевдоклассами и псевдоэлементами

• создают ли они новые элементы (аннотация).
• С точки зрения имитации его значения, если вам нужно добавить новый элемент для его идентификации, это псевдоэлемент, а если вам нужно только добавить категорию к существующему элементу, это псевдокласс.
• Псевдоэлементы могут появляться в селекторе только один раз и только в конце.
• Псевдоклассы играют роль классов, как и настоящие классы, и их количество не ограничено.Пока они не являются взаимоисключающими псевдоклассами, их также можно использовать на одних и тех же элементах одновременно.
  
• Псевдоклассы используют двоеточие для представления :first-child, а псевдоэлементы используют два двоеточия для представления ::first-line (для обратной совместимости селекторы псевдоэлементов в текущих браузерах могут использовать как одинарные, так и двойные двоеточия).

Блочная модель CSS

классификация коробчатых моделей

• Блочная модель IE (странная блочная модель)
  • width = border + padding + content
  • Ширина блока = ширина + поле
• Блочная модель W3C (стандартная блочная модель)
  • width = content
  • Ширина блока = ширина + отступ + граница + поля

модель конверсионной коробки

Блочная модель по умолчанию в Css — это блочная модель W3C, и преобразование между ними можно преобразовать, установив свойство box-sizing

box-sizing: content-box; // W3C盒模型标准 
box-sizing: border-box; // IE盒模型标准

некоторая относительная ширина коробки

• clientWidth = ширина + отступы слева и справа
• offsetWidth = ширина + левое и правое заполнение + левая и правая граница
• scrollWidth: получить реальную ширину указанного слоя содержимого метки (ширина видимой области + ширина скрытой области)

Обрушение границы

В CSS есть схлопывание полей, то есть граница схлопывается или граница перекрывается.
Слияние полей происходит только для вертикальных полей блочных блоков в обычном потоке документов. Поля между встроенными блоками, поплавками или абсолютным позиционированием не объединяются.

Бок о бок Схлопывание границ DIV (брат)

Для двух расположенных рядом блоков DIV нижнее поле верхнего DIV и верхнее поле нижнего DIV свернутся и займутВ качестве отображаемого значения используется максимальное значение в верхнем и нижнем полях., установите только одно поле.

Содержащий коллапс поля элемента (родитель-потомок)

В родительском div нет границы, отступов, встроенного содержимого, и поле дочернего div будет продолжать искать до тех пор, пока не найдет один из тегов, включая границу, отступы и встроенное содержимое (текст), а затем нажмите этот div для поле.

Решение

• Установите границу для родительского блока.После добавления границы к внешнему слою, родительский-дочерний блок не соответствует действительности (можно установить прозрачность: граница: 1px сплошная прозрачная)
• Добавить переполнение: скрытое; в родительское поле
• Установите значение заполнения для родительского поля;
• Позиция добавления: фиксированная к родительскому блоку;

Отрицательный эффект

• Negative Marign реализует горизонтальное и вертикальное центрирование элементов.
• Отрицательное поле скрывает лишние границы в начале и в конце списка li.
• Отрицательный текстовый отступ, чтобы скрыть текст
• Отрицательный z-индекс участвует в сортировке контекста стека.
• слева, справа, сверху, снизу в позиционировании

позиционирование позиции

статический (нацеливание на обычный поток)

таргетинг по умолчанию

относительный (относительное позиционирование)

• относительноэтот элементизверхний левыйДля позиционирования (позиционирования относительно собственного положения) этому элементу необходимо установить относительное положение, а верхнее, левое, нижнее и правое все могут иметь значения.
• Хотя позиция может перемещаться после позиционирования, этот элемент небез отрыва от документооборота, который по-прежнему занимает исходное пространство страницы.

absolute (абсолютное позиционирование)

• Относительно предка, который имеет относительное (относительное позиционирование) и является ближайшим элементом в иерархии этого элементаверхний левыйПозиционирование, если в элементе-предке нет относительного позиционирования, позиционирование по умолчанию относительно тела.
• Элемент позиционируется для создания блока на уровне блока, независимо от типа блока, который он изначально создал в обычном потоке.
• Абсолютное позиционированиевне документооборота, который имеет тот же эффект, что и плавающее позиционирование, он будет нажат поверх непозиционированных элементов.

фиксированный (фиксированное позиционирование)

Аналогично абсолютному позиционированию, но относительно окна браузера.

inherit

Наследовать значение атрибута position родительского элемента

липкий (дополнительная добавка)

Sticky — сочетает в себе flex и относительный, см.Убей карабин, поговорим о позиции: липкая

плаватьплавать

• Есть два значения: left (плавающее влево) и right (плавающее вправо).
• Плавающий блок можно перемещать влево или вправо, пока его внешний край не коснется границы содержащего блока или другого плавающего блока.
• Поскольку поплавок отсутствует в обычном потоке документа, блок-боксы в обычном потоке документа ведут себя так, как будто плавающего элемента нет.

преимущество

Первоначальное преимущество заключается в том, что может быть очень удобно размещать текст вокруг изображения, когда изображение и текст смешиваются. Кроме того, когда элемент плавает, он имеет некоторые свойства элементов блочного уровня, такие как ширина и высота, но он все же имеет некоторые отличия от встроенного блока.Первый касается горизонтальной сортировки, плавающий может установить направление и встроенный Направление -block исправлено; также существует проблема, из-за которой встроенный блок иногда имеет пустые пробелы при использовании.

недостаток

Наиболее очевидным недостатком является то, что когда плавающий элемент выходит из потока документов, он не может поддерживать родительский элемент, что приведет к сжатию высоты родительского элемента до 0 (коробка рухнула).
▲ Примечание. После установки плавающего элемента отображаемое значение элемента станет блочным.

очистить поплавок (*)

• Коробка заглавная, для каждой коробки задайте фиксированную ширину и высоту, пока не подойдет, неадаптивная
• высота набора родительского элемента
• Родительский элемент запускает BFC (плавающий, переполнение: скрытый|видимый, отображение: гибкий|сетка)

<div class="parent" style="overflow:hidden">     
    <div class="f"></div>
</div>

• Добавьте дополнительные теги

<div class="parent">    //添加额外标签并且添加clear属性    
    <div class="f"></div>   
</div>
<div style="clear:both"></div>

• Создайте селекторы псевдокласса для очистки поплавков (рекомендуется)

//添加:after伪元素
.parent:after{    
    content: ''; /* 设置添加子元素的内容是空 */  
    display: block; /* 设置添加子元素为块级元素 */       
    height: 0; /* 设置添加的子元素的高度0 */     
    visibility: hidden; /* 设置添加子元素看不见 */     
    clear: both; /* 设置clear：both */
}
<div class="parent">    
    <div class="f"></div>
</div>

макет дисплея

стоимость	описывать
none	Элемент будет скрыт и не будет отображаться
inline	Элемент будет установлен как встроенный элемент, а внутренняя часть будет располагаться строками слева направо (без разрывов строк до и после элемента).
block	Элемент будет установлен как элемент блочного уровня, а внутренняя часть будет упорядочена столбцами сверху вниз (с разрывами строк до и после элемента).
inline-block	Элемент будет установлен как встроенный элемент уровня блока, а не элемент уровня блока в одной строке.
list-item	Элементы отображаются в виде списка
table	Элементы отображаются в виде таблиц на уровне блоков (аналогично таблицам) с разрывами строк до и после таблицы.
flex	Элемент перейдет в режим гибкой компоновки.

встроенный, блочный, встроенный-блочный три области

функции блочного уровня:

• Каждый элемент уровня блока начинается с новой строки, а элементы, следующие за ним, начинаются с новой строки. (элемент уровня блока на отдельной строке)
• Можно установить высоту элемента, ширину, высоту строки, а также верхнее и нижнее поля.
• Ширина элемента, если она не задана, составляет 100% от его собственного родительского контейнера (та же ширина, что и у родительского элемента), если не задана ширина.

встроенные встроенные функции:

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

функции встроенного блока:

• встроенные блочные элементы имеют характеристики встроенных и блочных элементов одновременно.
• и другие элементы все на одной строке;
• Можно установить высоту элемента, ширину, высоту строки, а также верхнее и нижнее поля.

В чем проблема с использованием display:inline-block ? Как это решить? (*)

Объединение двух элементов встроенного блока создаст пустое пространство.

Причина пустого места

Когда элемент размещается как встроенный, пробелы между элементами (пробел, возврат каретки, перевод строки и т. д.) будут обрабатываться браузером в соответствии с методом обработки атрибута пробела в CSS (в противном случае это нормально , а лишние пробелы объединяются), исходный HTML-код Перевод строки при возврате каретки преобразуется в пустой символ. Когда шрифт не равен 0, пустой символ длиннее и имеет определенную длину, поэтому между элементами есть пробел встроенного блока.

Решение

• Напишите конец тега вложенного элемента и начало следующего тега в одной строке или напишите все вложенные теги в одной строке.
• Установить размер шрифта: 0 в родительском элементе, сбросить правильный размер шрифта в дочернем элементе
• set float: left для дочерних элементов

гибкий макет

Этот макет обеспечивает более эффективный способ компоновки, выравнивания и выделения места для элементов в контейнере. Он не имеет ограничений по направлению и может свободно манипулироваться разработчиками (атрибуты вертикального выравнивания, плавания и очистки дочерних элементов будут недействительными). . ).

Свойства контейнера (6)

• flex-direction** Определить направление главной оси (направление расположения контейнера)**

flex-direction: row | row-reverse | column | column-reverse;

• flex-wrap** Если одну ось нельзя расположить, определите правило новой строки**

flex-wrap: nowrap | wrap | wrap-reverse;

• flex-flow** Сокращение для flex-direction и flex-wrap**

flex-flow: flex-direction||flex-wrap;

• justify-content** Определите выравнивание контейнера по главной оси **

justify-content: flex-start | flex-end | center | space-between | space-around;

• align-items** Определите выравнивание контейнера по поперечной оси **

align-items: flex-start | flex-end | center | baseline | stretch;

• align-content** Определите выравнивание нескольких осей, если контейнер имеет только одну ось, это свойство не действует**

align-content: flex-start | flex-end | center | space-between | space-around |;

Недвижимость проекта (6)

• orderОпределить порядок расположения элементов, чем меньше значение, тем выше расположение, по умолчанию 0
• flex-growПроект с увеличенным масштабом, по умолчанию 0 (т. е. если есть свободное место, не увеличивается)
• flex-shrinkОпределяет коэффициент уменьшения предмета, по умолчанию 1 (то есть если места не хватает, предмет будет уменьшен)
• flex-basisОпределяет пространство на главной оси, которое занимает элемент, до выделения лишнего пространства. По умолчанию стоит auto (исходный размер элемента).
• align-selfПозволяет одному элементу иметь выравнивание, отличное от других элементов. Это может переопределить свойство align-items. Значение по умолчанию — auto (указывает, что свойство align-items родительского элемента наследуется. Если родительского элемента нет, оно эквивалентно растяжению)

align-self: auto | flex-start | flex-end | center | baseline | stretch;

• flexявляется сокращением для flex-grow, flex-shrink и flex-basis,По умолчанию 0 1 авто

flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis']
Это свойство имеет два сокращенных значения:auto(1 1 auto)а такжеnone(0 0 auto)
Рекомендуется использовать это свойство, а не писать три отдельных свойства по отдельности, потому что браузер выведет соответствующее значение.

переполнение

• прокрутка: должна появиться полоса прокрутки
• авто: полоса прокрутки появляется, когда содержимое дочернего элемента больше, чем родительский элемент
• visible: переполненное содержимое отображается за пределами родительского элемента
• hidden: скрыть при переполнении

Как реализовать: однострочное переполнение текста плюс ...(*)

white-space: nowrap; /* 首先，强制文本不换行；*/ 
overflow: hidden; /*其次，隐藏溢出； */  
text-overflow: ellipsis; /*最后，对溢出的文本用 ellipsis 省略号代替。 */

Принцип полноэкранной прокрутки? Какие свойства css необходимы?

принцип

Как и в карусельной диаграмме, общие элементы располагаются все время. Предположим, что нужно отобразить 5 полноэкранных страниц, высота будет 500%, но мы можем отображать только 100%, а остальное содержимое может располагаться по оси Y с помощью преобразования. Также может быть достигнуто с помощью margin-top

Включает свойства css

overflow:hidden | transition:all 1000ms ease

Контекст блочного формата BFC

Что такое БФК?

• BFC буквально переводится какконтекст форматирования на уровне блока, это независимая область рендеринга, участвует только поле Block-level, это оговариваетВнутренний блок блочного уровняТо, как он выложен и не имеет ничего общего с внешним видом.
• W3C определяет BFC следующим образом: плавающие и абсолютно позиционированные элементы, контейнеры блочного уровня для блоков неблочного уровня (например, встроенные блоки, ячейки таблицы и заголовки таблиц) и блоки блочного уровня, значение переполнения которых не равно "visible", оба создают новые BFC для своего содержимого (блокируя контексты Fromatting, т. е. форматированный текст на уровне блоков).
• Уведомление: BFC можно понимать как большую коробку, внутренняя часть которой состоит из коробок блочного уровня.

Как активировать BFC? (*)

• корневой элемент → корневой элемент (html) — самый большой BFC
• позиция устанавливается фиксированной или абсолютной
• для отображения установлено значение inline-block , table-block , table-caption
• Значение переполнения не видно
• Значение float не равно none

Правила компоновки BFC:

1. Внутренние коробки будут размещены одна за другой в вертикальном направлении.
2. Вертикальное расстояние Box определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться.
3. Левая сторона поля поля каждого элемента касается левой стороны содержащего блока (в противном случае для форматирования слева направо). Это верно, даже если есть поплавки.
4. Область BFC не перекрывает внешний поплавок.
5. BFC — это изолированный и независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы. Наоборот.
6. При расчете высоты БФК в расчете также участвует плавающий элемент

Роль и принцип BFC:

• Адаптивный двухколоночный макет
• очистить внутренний поплавок
• Предотвратите перекрытие вертикальных полей (разместите вертикальные поляЯщики размещаются в разных БФУ, поля не будут перекрываться. )
• Элементы внутри BFC и элементы снаружи никогда не будут влиять друг на друга, поэтому, когда есть поплавок вне BFC, он не должен влиять на макет Box внутри BFC, и BFC будет сужаться, не перекрывая поплавок. Точно так же, когда внутри BFC есть плавающая точка, чтобы не влиять на компоновку внешних элементов, BFC будет учитывать плавающую высоту при расчете высоты. Избегание перекрытия полей также является причиной.

Контекст встроенного форматирования IFC

• Ящики внутри располагаются один за другим, начиная с вершин вмещающего блока.
• Если строка не соответствует содержимому, она будет «разделена» и открыта для следующей строки.
• В поле останутся только горизонтальные поля.
• Padding и Border не растягивают высоту строки.

контекст стека z-индекса

• z-index может решить проблему порядка наложения между элементами и установить порядок их наложения.
• Если элемент не позиционирован, установленный для него z-индекс не будет иметь никакого эффекта.

Когда элементы расположены друг над другом, руководство по приоритетным отношениям (*)

тот же родительский элемент

• При наличии отчетливого каскадного горизонтального знака, такого как идентифицированное значение z-индекса
  • Чем больше z-индекс, тем меньше охват, и чем больше значение, тем ближе к визуальной точке.
  • Когда z-индекс одинаков, отставание в потоке DOM имеет приоритет над передним.
• Когда ни один z-индекс не установлен, используется значение по умолчанию, один позиционируется, а другой не позиционируется, тогда позиционирование охватывает непозиционированные элементы.
• Когда нет позиционирования и происходит совпадение позиций, задняя часть в потоке DOM закроет переднюю часть.

Родительско-дочерняя иерархия элементов

• Разные родительские элементы, до тех пор, пока родительский элемент больше, целое ближе к визуальной точке, независимо от размера его дочерних элементов.
• Если z-индекс родительского элемента действителен, то дочерний элемент будет выше родительского элемента независимо от того, установлен z-индекс или нет;
• Если z-индекс родительского элемента недействителен (не позиционирован или использует значение по умолчанию), то вступает в силу параметр z-индекса позиционированного дочернего элемента.

Создание каскадных контекстов

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

Относится к корневому элементу страницы, который является исходным элементом полосы прокрутки по умолчанию. Вот почему, когда абсолютно позиционированный элемент позиционируется с равным значением слева/сверху, если нет других ограничений на позиционирование элемента, он будет позиционироваться относительно окна браузера.

Элементы позиционирования и традиционные контексты наложения

Для позиционированных элементов, содержащих position:relative/position:absolute/position:fixed, когда значение z-index не является автоматическим, будет создан контекст наложения.

CSS3 и новая эра каскадных контекстов

Появление CSS3 не только приносит новые свойства, но и бросает вызов многим правилам прошлого. Например,Влияние преобразования CSS3 на скрытие переполнения в позиции: фиксированное позиционированиеЖдать. Здесь влияние контекста стекирования является более обширным и значительным.
следующим образом:

1. Гибкий элемент, значение z-index которого не является автоматическим (родительский элемент display:flex|inline-flex).
2. Значение непрозрачности элемента не равно 1.
3. Значение преобразования элемента не равно none.
4. Значение режима смешивания элемента не является нормальным.
5. Значение фильтра элемента не равно none.
6. Значение изоляции элемента isolate.
7. Значение свойства, указанное с помощью will-change, может быть любым из перечисленных выше.
8. Элемент -webkit-overflow-scrolling настроен на касание

Решение для управления CSS

ITCSS

ITCSS (перевернутый треугольник CSS) учитывает растущую специфичность селекторов в проекте за счет стандартизации организации файлов стилей. См. следующий перевернутый треугольник, где каждый слой представляет стиль концептуальной структуры:

• Настройки: глобальные переменные, переключатели конфигурации
• Инструменты: Миксины, Функции
• Общий: стили нуля (Normalize.css, reset.css)
• База: неклассифицированные элементы HTML (селекторы типов)
• Объекты: Шаблоны дизайна без косметики
• Компоненты: Разработанные компоненты
• Козыри: помощники, переопределения

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

схема именования

Основная проблема состоит в том, чтобы решить две проблемы конфликта имен и повторного использования., среди множества решений нет абсолютных плюсов и минусов. Вам решать, исходя из вашей собственной ситуации.

OOCSS

• Объектно-ориентированные правила, основных принципов два: разделение структуры и внешнего вида, разделение контейнера и содержимого.
• Разделение структуры и внешнего вида: увеличьте повторяемость единиц дизайна, одновременно продвигая мышление продукта и пользовательского интерфейса в этом отношении, например, следующие правила именования и модульности CSS при использовании шаблонов объектов.
• Разделение контейнера и содержимого: это означает, что использование стилей не соответствует уникальному положению элемента. Вы можете использовать этот стиль в любой позиции. Если вы не примените этот стиль, будет сохранен стиль по умолчанию.

SMACSS

• Между sma и ooccs есть много общего, но есть и много различий, в основном классификация стилей. Это: база, макет, модуль, состояние, тема.
• По сравнению с ooccs, по сути, большинство дизайнерских идей одинаковые.Один класс используется как область действия CSS (область действия — два ограничения, 1 — запрещено, когда не соответствует сцене, 2 — нужно правильно использовать, когда не соответствует встречается со сценой), а другой Отличие заключается в разных правилах написания скинов и состояний
  • Основание: можно применять где угодно, я также называю глобальные стили
  • макет: он в основном используется для реализации различных характерных макетов и повышения скорости повторного использования макетов.
  • модуль: Модульность в дизайне, многоразовый модуль, как правило, связка dom+css.
  • условие: Описывает макет в конкретном состоянии или специализированную производительность модуля. Здесь я думаю, что рекомендуется рекомендовать "CSS Zen Garden". При условии, что структура DOM остается неизменной, стиль может быть пересмотрен через скиннинг CSS .
  • тема: По сравнению с состоянием, это более индивидуально.Мы установим тему для некоторых специальных модулей, включая серию цветов, размеров, взаимодействий и т. д. для тяжелого дизайна и параметрического дизайна.

BEM

Bem — это мысли о блоках, элементах и ​​модификаторах для написания стилей. Он не входит в конкретную структуру css, он просто предлагает, как вы должны назвать свой css.

• Уровень блока: имя компонента-владельца
• element: имя элемента в компоненте
• Модификаторы: любой класс, связанный с украшением элемента

Style-Components

Полностью отказаться от CSS и писать правила CSS на JavaScript

CSS Modules

Скомпилируйте собственные файлы CSS с помощью JS, чтобы сделать их модульными.

нагрузка по требованию

• Загружайте CSS по требованию с помощью require.js
• Загрузка CSS конфигурации веб-пакета по требованию

Совместимость с браузером CSS

Инициализация стиля CSS браузера

Поскольку стили CSS по умолчанию для каждого браузера разные, самый простой и эффективный способ — это инициализировать его.Перед запуском всех CSS установите для marin и padding значение 0, на случай, если эффект отображения в разных браузерах разный.То же самое (рекомендуется библиотека инициализации Normalize.css).

Частные свойства браузера

• Мы часто добавляем некоторые префиксы перед свойством CSS, такие как -webkit-, -moz-, -ms-, это частные свойства браузера, причиной частных свойств является действие W3C организации, которая формулирует HTML и Стандарты CSS очень медленные.
• Обычно член организации W3C предлагает новый атрибут, такой как rounded border-radius, который всем кажется хорошим, но W3C формулирует стандарт, который требует очень сложной процедуры, проверки и так далее. А у поставщиков браузеров сжатые сроки продвижения на рынке.Если атрибут достаточно развит, поддержка будет добавлена ​​в браузер.

Чтобы избежать изменений, когда W3C опубликует стандарт в будущем, будет добавлен частный префикс, такой как -webkit-border-radius, для поддержки новых свойств заранее. После того, как W3C опубликует стандарт и будет установлен стандартный метод записи border-radius, новая версия браузера будет поддерживать метод записи border-radius. Общие префиксы:

• -moz обозначает частные свойства браузера Firefox.
• -ms обозначает частные свойства браузера IE
• -webkit означает хром, частные свойства сафари
• -o обозначает частную собственность оперы

Обратите внимание на порядок приватных свойств, поместите стандартный метод записи в конец, а метод записи совместимости в начало

 -webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*为Firefox*/ 
 -ms-transform:rotate(-3deg); /*为IE*/ 
 -o-transform:rotate(-3deg); /*为Opera*/ 
 transform:rotate(-3deg);

CSS hack

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

плагин автоматизации

• Autoprefixer — это плагин, который автоматически управляет префиксами браузера. Он анализирует файлы CSS и добавляет префиксы браузера к содержимому CSS, используя данные Can I Use (caniuse веб-сайта), чтобы решить, какие префиксы необходимы.
• С Autoprefixer, добавленным к инструментам создания ресурсов (например, Grunt), вы можете полностью забыть о префиксах CSS и просто писать свой CSS в обычном режиме в соответствии с последними спецификациями W3C. Если проекту необходимо поддерживать старые браузеры, вы можете изменить настройки параметров браузеров.
• В настоящее время webpack, gulp, grunt имеют соответствующие плагины, не позволяйте совместимости с CSS тратить ваше время.

Каковы общие проблемы совместимости CSS

• Отступы/поля меток по умолчанию в разных браузерах различаются, что можно решить, инициализировав стиль css *{ margin:0;padding:0px; }
• Ошибка двойного интервала в IE6
• Установите метку меньшей высоты (обычно менее 10 пикселей) в IE6, IE7, высота превышает установленную вами высоту, установив overflow:hidden или установив высоту строки line-height меньше установленной вами высоты.
• В IE вы можете использовать метод получения общих атрибутов для получения пользовательских атрибутов или вы можете использовать getAttribute() для получения пользовательских атрибутов.
• По умолчанию китайский интерфейс Chrome заставит текст меньше 12 пикселей до 12 пикселей, добавив свойство css -webkit-text-size-adjust: none; можно решить или использовать свойство масштабирования в преобразовании
• Стиль наведения не отображается после доступа к гиперссылке, потому что стиль гиперссылки, который был нажат и посещен, больше не имеет наведения и активности.Решение состоит в том, чтобы изменить атрибут расположения атрибута css: LVHA a:link{} → a :visited{} → a:hover{} → a:active{}
• В IE объект события имеет атрибуты x, y, но не имеет атрибутов pageX, pageY, но не имеет атрибутов x, y. Решение: передайте условие — 24-битное изображение png для отображения фона в браузере IE6, решение состоит в том, чтобы сделать PNG8

Оптимизация CSS и улучшение производительности

• Поместите файл css вверху страницы, можно объединить несколько css и свести к минимуму HTTP-запросы.
• Избегайте ограничений перехода, избегайте селекторов потомков, селекторов цепочки, селекторов нескольких типов
• Избегайте ненужных пространств имен, избегайте ненужного дублирования стилей, удаляйте пустые правила css.
• Используйте семантические имена с компактным синтаксисом
• Избегайте использования !important
• Максимально сократить количество правил, максимально объединить повторяющиеся правила разных классов и исправить ошибки синтаксического анализа.
• Правильное использование свойства display
  • width, height, margin, padding и float не должны использоваться после inline
  • float не следует использовать после встроенного блока; вертикальное выравнивание не следует использовать после блока
• Не злоупотребляйте поплавками, следуйте правилам блочной модели
• Не злоупотребляйте веб-шрифтами, не заявляйте слишком большой размер шрифта, не определяйте повторно h1-h6, не определяйте слишком много стилей для h1-h6.
• Значение 0 не требует никаких единиц
• Стандартизируйте различные префиксы браузера

WEB-стандарты и W3C

Требования к структуре:

Стандартизированные теги могут повысить эффективность сканирования страниц поисковыми системами, что очень полезно для SEO.

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

Для CSS и JS:

• Попробуйте использовать внешние таблицы стилей CSS и сценарии JS. При этом структура, производительность и поведение делятся на три части, соответствующие норме. Кроме того, необходимо повысить скорость рендеринга страниц и улучшить взаимодействие с пользователем.
• Сведите к минимуму использование встроенных стилей, чтобы разделить структуру и представление. Имена атрибутов, такие как идентификатор и класс тега, должны быть названы в тексте.Чем меньше тегов, тем быстрее загрузка и выше пользовательский опыт. В то же время код будет легче поддерживать и легко модифицировать.
• Нет необходимости изменять содержимое, вы можете распечатать версию вместе, не копируя содержимое, что повышает удобство использования веб-сайта.

задать несколько вопросов

Q1: Что происходит, когда position накладывается на display, overflow и float?

• display: указывает тип блока, который должен генерировать элемент (способ сортировки дочерних элементов)
• position: указывает тип позиционирования элемента
• float: определяет, в каком направлении плавает элемент
• Среди них position:absolute/fixed имеет наивысший приоритет.Когда для position задано значение absolute или fixed, число с плавающей запятой недопустимо и необходимо настроить отображение.Элементы, расположенные с помощью float/ absolute, могут быть только блочными элементами или формами (блок/таблица)

Q2: В чем разница между display:none и visible:hidden?

• display:none скрывает соответствующий элемент и больше не выделяет место в макете документа (что приводит к перекомпоновке)
• видимость: скрытый скрывает соответствующий элемент, сохраняя исходное пространство в макете файла (что приводит к перерисовке)
• Первый скроет весь элемент и его потомков, второй наследуется, а потомки останутся скрытыми, но также могут быть индивидуально установлены для видимости: видны для отображения.

Q3: В чем разница между border:none и border:0;?

Разница в производительности:

• {border: 0;}: установить границу на 0 пикселей, хотя ее нельзя увидеть на странице, но в соответствии со значением границы по умолчанию браузер все равно отображает ширину границы/цвет границы, то есть значение памяти был занят;
• {border:none;} понимается как border-style:none. boder:0; рендерит на одну ширину border:0 больше, чем border:none, поэтому производительность border:none выше, чем у border:0;

Различия совместимости:

• {border:none;} Когда граница равна "none", кажется, что она недействительна для IE6/7. Граница все еще существует. Когда граница "0", она кажется более эффективной, чем "none", и все браузеры скрывают границу равномерно.

Q4: В чем разница между px|em|REM?

PX
пиксель px (пиксель). Относительная единица длины. Пиксели относятся к разрешению экрана монитора.
EM
Значение em не фиксировано, em наследует размер шрифта родительского элемента. (1em=16px в теле браузера)

• Font-size=62,5%, заявленный в селекторе body;
• Разделите исходное значение пикселей на 10 и замените его единицей измерения на em;
• Пересчитайте значения em для этих увеличенных шрифтов. Избегайте повторных объявлений размеров шрифта.

REM (новое в css3)
Использование rem относится только к корневому элементу HTML. Он сочетает в себе преимущества относительного размера и абсолютного размера, благодаря ему все размеры шрифтов можно настроить пропорционально, только изменив корневой элемент, и можно избежать цепной реакции послойного комбинирования размеров шрифтов.
EX (не рекомендуется)

• ex — относительная единица длины, 1ex определяется как высота строчной буквы «x» в данном шрифте. Поэтому это значение будет варьироваться от шрифта к шрифту.
• Однако многие браузеры не имеют встроенного значения высоты ex, а просто берут значение em и принимают половину его в качестве значения ex. Поэтому обычно не рекомендуется использовать единицу длины ex. Выбор используемого шрифта во многом зависит от вашего проекта.Если ваша пользовательская база использует последнюю версию браузера, рекомендуется использовать rem, если проблема совместимости, используйте px или оба варианта.

Q5: Единицы области просмотра vw, vh, vmin, vmax

• vw1/100 ширины области просмотра.
• vh1/100 высоты окна просмотра.
• vminМинимум vw и vh.
• vmaxМаксимальное значение vw и vh.

Q6: В чем разница между RGBA() и непрозрачностью с точки зрения прозрачности?

• непрозрачность действует на элемент, а прозрачность всего содержимого внутри элемента
• rgba() действует только на цвет или цвет фона элемента (дочерние элементы элемента с прозрачностью rgba не наследуют эффект прозрачности)

Q7: Пожалуйста, объясните форматы изображений, такие как png, jpg, jpeg, bmp и gif, и когда их использовать. Вы узнали о webp?

• pngPortable Network Graphics — это формат файла растрового изображения со сжатием данных без потерь. Преимущества: высокая степень сжатия и хорошая цветопередача. Доступен в большинстве мест.
• jpgЭто метод сжатия с искажением, используемый для фотографий.Это деструктивное сжатие, которое хорошо сглаживает изменения в тонах и цветах. Формат, используемый для хранения и передачи фотографий на сайте www.
• gif— это формат файла растрового изображения, который воспроизводит изображения в реальном цвете с 8-битным цветом. Эффекты анимации могут быть достигнуты.
• bmpДостоинства: Качественные картинки Недостатки: Слишком большие Применяемая сцена: Обои для рабочего стола Windows;
• webpФормат представляет собой формат изображения, запущенный Google в 2010 году. Степень сжатия составляет всего 2/3 от jpg, а размер на 45% меньше, чем у png. Недостаток в том, что время сжатия больше и совместимость не очень хорошая.В настоящее время поддержка Google и Opera.

Q8: Как скрыть или сделать прозрачными элементы?

opacity: 0; //1透明度为 0，整体都看不见了； 
visibility: hidden; //2这个和上边类似； 
display: none; //3消失，不占用位置； 
background-color: rgba(0,0,0,0.2); //4只是背景色透明

Q9: Что такое css-спрайты? как использовать?

• Основной принцип спрайтов CSS заключается в объединении некоторых изображений, используемых на вашем веб-сайте, в одно изображение, тем самым уменьшая количество HTTP-запросов к вашему веб-сайту.
• Изображение визуализируется с использованием свойств CSS background и background-position, что означает, что ваша метка становится более сложной, изображение определяется в CSS, а неЭтикетка.

Q10: Что такое прогрессивное улучшение и постепенное снижение?

прогрессивное улучшение

• Это относится к тому, чтобы начать с самого простого удобства использования и постепенно добавлять функции и улучшать взаимодействие с пользователем на основе обеспечения удобства использования и доступности страниц сайта в браузерах низкого уровня.
• По сути, некоторые из наших ежедневных привычек разработки, такие как сначала написание страницы на языке разметки, а затем управление стилем страницы с помощью таблицы стилей, относятся к концепции прогрессивного улучшения.
• Другие более очевидные способы поведения включают использование новых технологий, таких как HTML5, CSS3 и т. д., для улучшения взаимодействия с пользователем страниц для продвинутых браузеров.

изящная деградация

• Это означает сначала использовать новейшие технологии для создания самых сильных функций и взаимодействия с пользователем для продвинутых браузеров, а затем постепенно ослаблять те функции и возможности, которые не могут поддерживаться ограничениями браузеров низкого уровня.
• В нашей повседневной разработке типичный пример плавной деградации — сначала написать код страницы для Chrome, а потом исправить исключения в IE или убрать те фичи, которые нельзя реализовать для IE.

так

• Эти два концептуальных метода уже использовались в нашей повседневной работе по разработке, но термины «прогрессивное улучшение» и «мягкая деградация» стали популярными только в последние годы.
• В нашей текущей битве HTML5 и CSS3 эти две концепции особенно важны.Как обеспечить использование постоянно меняющихся новых технологий для создания сайтов с базовым удобством использования в основных браузерах и для улучшения работы в продвинутых браузерах. иметь четкое представление о процессе разработки.

плечи гигантов

• Тщательно понимать контекст стека CSS, уровень стека, порядок стека, z-индекс
• Глубокое понимание контекста наложения и порядка наложения в CSS.
• Изучите Flex Layout за 30 минут
• Дисплей: учебник по гибкой компоновке, написанный для меня
• Что делать, если возникает ошибка точности, когда браузер конвертирует rem в px?
• CSS Basic Supplements | Организовал сотни тысяч слов информации и поделился с вами этими сухими предметами CSS
• Статьи по CSS — 100 почти 20 000 слов помогут вам закрепить знания CSS.

наконец

Добро пожаловать, чтобы исправить ошибки, см. будет исправлено вовремя! Пересматривая старое и изучая новое, я надеюсь, что мы все сможем сохранить свои первоначальные намерения и никогда не забудем, и отголоски будут.

последний из последних

Продайте Amway своей группе и пригласите младших сестер, которым нравится интерфейс, присоединиться к нам, вместе учиться и вместе добиваться прогресса [Если вы заинтересованы, оставьте сообщение или личное сообщение, социальные животные не будут двигай кирпичи вовремя, но ты сразу ответишь] 💗💗💗💗💗

В этой статье используетсяmdniceнабор текста