[1.2W] Аккуратно разложите 33 галантереи CSS, чтобы помочь вам обновиться

JavaScript
[1.2W] Аккуратно разложите 33 галантереи CSS, чтобы помочь вам обновиться

новое хранилище знанийПередняя часть от входа до входаПросите внимания, помечайте звездочками и предложениями и время от времени обновляйте~

Эпизоды, которые вы не видели:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)
Каталог длиной 10 000 символов, если вы считаете, что это хорошо, просто поставьте лайк~

предисловие

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

Наконец, сортировка непроста, т.к. . Если проституция делает вас счастливым. . . . Тогда иди проституткой. . . Однако, если он вам не понравится, вы не сможете найти его позже 🤔🤔

В чем разница между стандартной блочной моделью CSS и более низкой версией блочной модели IE?

Стандартная коробочная модель (content-box): ширина = ширина содержимого (содержимое) + граница + отступы + поля

Коробочная модель IE нижней версии (border-box): ширина = ширина содержимого (содержимое + граница + отступ) + поля

Отличие: стандартная коробочная модельheightа такжеwidthдаcontentШирина и высота окна модели коробки IE включаютcontent+padding+borderчасть.

Как рассчитывается алгоритм приоритета CSS?

！important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认

Расчет веса

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

Четыре уровня определяются следующим образом:

Предположим нулевой класс: !важный вес 10000 Первый класс: представляет встроенные стили, такие как: style="", с весом 1000. Второй класс: представляет селектор идентификатора, например: #content, с весом 0100. Третий класс: Репрезентативные классы, псевдоклассы и селекторы атрибутов, такие как .content, с весом 0010. Четвертый и т. д.: Представляет селекторы тегов и селекторы псевдоэлементов, такие как div p, с весом 0001. Пятый и т. д.: общий селектор (*), подселектор (>), селектор соседнего брата и сестры (+), вес 0000 Пример выглядит следующим образом:

**注意** 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0
#header #left ul li .first a {...}
  100.   100  1  1.  10    1
---> sum 0213
  1. Веса одинаковые, написанные сзади перезапишут предыдущие.
  2. Веса одинаковые, один написан во внешнем стилеlinkимпорт, другой во внутренних стиляхstyleВвести, более поздняя в порядке введения перезаписывает предыдущую.
  3. Вес встроенного стиля равен 1, 0, 0, 0, а вес 10 селекторов id также равен 0, 10, 0, 0, и встроенный стиль имеет высокий приоритет

Как попасть в DIV?

ps: Следующие примеры выбирайте для отладки прямо в консоли, чисто вручную, автор очень искренен

Используйте следующие стили:

1. поле: 0 авто;

Ширина целевого элемента должна быть фиксированной, и должно быть место для левого и правого полей родительского элемента.

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

<div class="container">
  this is inner text
  <div classs="ele2">
      this is another block element
  </div>
</div>

.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
  margin:0 auto;
}
this is inner text
this is another block element

Если для верхнего и нижнего полей установлено значение auto, расчетное значение равно 0.

2. абсолютное + преобразование

Параметр процента настройки преобразования зависит от его собственного размера.

<div class="container">
   this is inner text
  <div class="ele1">
    this is a block element
  </div>
</div>

.container{
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid grey;
  	text-align: center;
}
.ele1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    width: 100px; // 此处可以不设置，默认为父元素一半宽度
    border: 1px solid #888;
}
this is inner text
this is a block element

ele1 не может установить значение ширины, тогда ширина ele1 будет рассчитываться как父元素的一半 - 左右边框的宽度

3. Абсолют + маржа

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

HTML-код такой же, как и выше, заменитеele1стиль элементаtransform: translateX(-50%)дляmargin-left: -50px;

.ele1{
    position: absolute;
    left: 50%;
    margin-left: -50px; // 负值，设为元素自身宽度的一半
    width: 100px; // 此处必须设置
    border: 1px solid #888;
}
this is inner text
this is a block element

4. сгибание

这个不用叙述了吧

5. Абсолют + маржа: авто

适用于垂直居中

Для большего количества макетов, пожалуйста, переместитеСъедобная "галантерейная компоновка css" | горизонтальная, вертикальная, многоколоночная,
Горизонтальное и вертикальное центрирование четко указано, примеры ручного ввода, которые можно отладить на странице

Каковы значения отображения? Какова их роль?

стоимость эффект
none Элемент не будет отображаться после использования
block После использования элемент будет отображаться как блочный элемент с разрывами строк до и после элемента.
inline отображать значение по умолчанию. После использования основной цвет становится встроенным отображением элемента, и до и после нет разрыва строки.
list-item Используйте элемент сообщения для отображения в виде списка
run-in После использования элемент отображается как элемент уровня блока или встроенный элемент в зависимости от контекста.
table При использовании она будет отображаться в виде таблицы на уровне блоков (аналогично<table>) с новыми строками до и после
inline-table После использования элемент будет отображаться в виде встроенной таблицы (что-то вроде<table>) без новой строки до или после
table-row-group Элементы будут отображаться как группа из одной или нескольких строк (что-то вроде<tbody>)
table-header-group Элементы будут представлены в виде групп из одной или нескольких строк (что-то вроде<thead>)
table-footer-group Элементы будут отображаться сгруппированными в одну или несколько строк (что-то вроде<tfoot>)
table-row Элемент будет отображаться в виде строки таблицы (что-то вроде<tr>)
table-column-group Элементы будут отображаться как группа из одного или нескольких столбцов (что-то вроде<colgroup>)
table-column элементы будут отображаться в виде столбца ячеек (что-то вроде<col>)
table-cell Элемент будет отображаться как ячейка таблицы (что-то вроде<td>和<th>)
table-caption элемент будет отображаться как заголовок таблицы (что-то вроде<caption>)
inherit Положения должны быть интегрированы значение свойства отображения из родительского элемента

Происхождение позиционирования и его характеристики для разных значений position?

relative(Относительное позиционирование): создание элементов с относительным позиционированием, источником позиционирования является позиция самого элемента, занимающего определенное место в исходной позиции потока документа;

absolute(абсолютное позиционирование): создайте абсолютно позиционированный элемент, а исходная точка позиционирования является ближайшей позицией设置为absolute或者Верхний левый угол родительского элемента относительного`.

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

static: По умолчанию. Без позиционирования элемент появляется в обычном потоке (игнорируяtop, bottom, left, right,z-indexутверждение).

inherit: унаследовано от родительского элементаpositionСтоимость имущества.

sticky: элементы располагаются в соответствии с обычным потоком документов и могут рассматриваться как сочетание относительного и фиксированного позиционирования. Когда элемент находится в области отображения экрана или элемента прокрутки, он является относительным, а когда он вот-вот прокрутится за пределы экрана дисплея, он фиксируется. Можно использовать для потолочного эффекта, см. подробностиХарактеристики свойства css position и его значения свойства sticky

Как создать треугольник с помощью чистого CSS

ps: Следующие примеры выбирайте для отладки прямо в консоли, чисто вручную, автор очень искренен

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

<div class="container">
  <div class="triangle-top"></div>
   <div class="triangle-left"></div>
   <div class="triangle-right"></div>
   <div class="triangle-bottom"></div>
</div>

.container{
  display: flex;
  justify-content: space-between;
  width: 400px;
}
.container div{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent;
}
.container .triangle-top {
    border-bottom-color: orange; 
}
.container .triangle-left {
    border-right-color: orange; 
}
.container .triangle-right {
    border-left-color: orange; 
}
.container .triangle-bottom {
    border-top-color: orange; 
}

Не забудьте использовать относительное позиционирование для центрирования стрелок.

Плавающий принцип и когда нужно очищать поплавок? Как очистить поплавок?

что такое поплавок

После того, как элемент будет плавающим, он покинет поток документа, поднимет половину уровня и будет двигаться в указанном направлении, пока не встретит границу родительского элемента или не остановится другой плавающий элемент.

Что такое иерархия

Если рассматривать весь элемент как слой, то нижняя половина — это сам элемент (стили фона и т. д.), а верхняя — содержимое элемента.

Пример

<div class="container">
  <div class="box1">box1</div>
   <div class="box2">box2</div>
   <div class="box3">box3</div>
</div>

.container{
 width: 40px;
 border: 1px solid black;
}
.container div{
  width: 100%;
  height: 30px;
}
.box1 {
  background: yellow;
}
.box2 {
    background: orange; 
}
.box3 {
     background: pink; 
}

Когда ни один из трех ящиков не плавает

box1
box2
box3

При добавлении float:left к box2 расположение трех блоков становится

box1
box2
box3

В это время, поскольку box2 вылетает из потока документов, box3 перемещается вверх и блокируется box2. Но в это время текстовое поле3 в поле box3 не двигалось вверх! ! !

Советы

  1. Плавающие элементы плавают между ними и не образуют потока. Верх плавающего элемента всегда выравнивается с нижней частью элемента (не плавающего) в предыдущем стандартном потоке.
  2. position: absolute и float неявно изменят тип отображения.В дополнение к display: none, пока установлено position: absolute или float, элемент будет отображаться в виде display: inline-block, а длина и ширина можно установить.

Проблемы с поплавками:

1. Влиять на положение родственных элементов

2. Свернуть родительский элемент по высоте

Способ устранения дефекта, вызванного поплавком:

  • Родительский блок определяет высоту (height);
  • Добавьте пустой тег div после последнего плавающего элемента и добавьте стиль clear: Both;
  • Родительский тег, содержащий плавающий элемент, добавляет переполнение стиля как скрытое/оба;
  • Родительский div определяет масштаб;

прозрачное плавающее вещество

  1. Используйте свойство clear css и добавьте clear:both
  2. Активировать BFC родительского элемента плавающего элемента, чтобы родительский элемент мог содержать плавающий элемент

Что такое препроцессор/постпроцессор CSS? Зачем их использовать?

Что такое препроцессор CSS?
Препроцессор CSS определяет новый язык Основная идея состоит в том, чтобы использовать специальный язык программирования, чтобы добавить некоторые функции программирования в CSS, использовать CSS в качестве цели для создания файлов, а затем разработчикам нужно использовать только этот язык. .

Зачем использовать препроцессор CSS?

CSS — это просто язык разметки, вы не можете настраивать переменные, вы не можете ссылаться на него.

Такие как: less, sass, stylus, используется для прекомпиляции sass или less, что повышает возможность повторного использования кода css, а также слои, миксины, переменные, циклы, функции и т.д., крайне удобные для написания и разработки UI-компонентов .

CSS имеет следующие специфические недостатки:

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

Прекомпиляция может легко привести к злоупотреблению селекторами потомков.

Преимущества использования препроцессора

  • Предоставляет механизм повторного использования слоя стилей, отсутствующий в слое CSS.
  • уменьшить избыточный код
  • Улучшить ремонтопригодность кода стиля

Для получения подробной информации см.: [Sass.vs.Less | Введение и сравнение】

постпроцессорЭто препроцессор, который обрабатывает CSS и, наконец, генерирует CSS, который в широком смысле относится к препроцессору CSS. Мы давно пользуемся постпроцессорами CSS, и наиболее типичным примером являются инструменты минимизации CSS (такие как clean-css), но ранее об этом отдельно не упоминалось.
Существует также популярный в последнее время Autoprefixer, который автоматически обрабатывает проблемы совместимости на основе данных поддержки браузера на Can I Use.

Причина использования:

  • Четкая структура, легко расширяемая
  • Очень удобно скрывать различия в приватном синтаксисе браузера.
  • Множественное наследование может быть легко реализовано

В чем разница между двойным и одинарным двоеточием в ::before и :after?

Псевдоклассы всегда представлены одним двоеточием : в CSS, например :hover, :active и т. д.

Псевдоэлементы уже существовали в CSS1. В то время синтаксис был представлен символами :, такими как :before и :after. Позже он был пересмотрен в CSS3. Чтобы различать псевдоэлементы и псевдоклассы, псевдоэлементы вместо этого были представлены ::, такие как ::before и ::before.::after.

Поскольку более ранние версии IE несовместимы с двойным двоеточием, разработчики продолжают использовать старый синтаксис :after для представления псевдоэлементов для совместимости с различными браузерами.

Чтобы вставленное содержимое отображалось перед содержимым его элемента, используйте ::before, в противном случае используйте ::after;

В кодовом порядке содержимое, сгенерированное ::after, также позже, чем содержимое, сгенерированное ::before.

С точки зрения стека содержимое, созданное ::after, будет поверх содержимого, созданного ::before.

Разница между псевдоэлементами и псевдоклассами

CSS представляет концепцию псевдоклассов и псевдоэлементов для форматирования информации за пределами дерева документа.

  • Псевдоклассы используются для добавления соответствующих стилей к существующим элементам, когда они находятся в определенном состоянии, которое динамически изменяется в соответствии с поведением пользователя. Например, когда пользователь наводит курсор на указанный элемент, мы можем использовать :hover для описания состояния этого элемента. Хотя он похож на обычный класс CSS, он может добавлять стили к существующим элементам, но может добавлять стили только к элементам в состоянии, которое не может быть описано деревом dom, поэтому он называется псевдоклассом.

  • Псевдоэлементы используются для создания и оформления некоторых элементов, которых нет в дереве документа. Например, мы можем использовать :before, чтобы добавить текст перед элементом и добавить стили к тексту. Хотя пользователь может видеть текст, он фактически не находится в дереве документа.

css псевдокласс

Селектор Пример Пример показывает
[:link] a:link Выделить все непросмотренные ссылки
[:visited] a:visited Выбрать все посещенные ссылки
[:active] a:active Выберите активную ссылку
[:hover] a:hover Состояние мыши над ссылкой
[:focus] input:focus Выбрать элемент имеет фокус после ввода

css псевдоэлементы

Селектор Пример Пример описания
[:first-letter] p:first-letter выбрать каждый

первая буква элемента
[:first-line] p:first-line выбрать каждый

первая строка элемента
[:first-child] p:first-child Селектор соответствует первому дочернему элементу, принадлежащему любому элементу.

элемент
[:before] p:before в каждом

Вставить содержимое перед элементом
[:after] p:after в каждом

Вставить содержимое после элемента
[:lang(language)] p:lang(it) для

Атрибут элемента LANG Выберите начальное значение

В чем разница между эффектом прозрачности rgba() и непрозрачностью?

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

Что делает содержимое свойства css?

Атрибут содержимого используется исключительно в псевдоэлементах до/после для вставки сгенерированного содержимого. Наиболее распространенным применением является использование псевдокласса для очистки поплавков.

Расширение: как реализовать счетчик css через свойство содержимого css?

Счетчик css реализован путем установки двух свойств: counter-reset и counter-increment, а также метода counter()/counters() с псевдоклассом after/before.

В чем разница между PX, EM и REM?

  • pxОтносительно разрешения экрана монитора.

    Особенности PX

    • IE не может изменять размер шрифтов, в которых в качестве единицы измерения используются px;
    • Причина, по которой большинство зарубежных веб-сайтов можно настроить, заключается в том, что они используют em или rem в качестве единицы шрифта;
    • Firefox умеет настраивать px и em, rem.

  • em — относительная единица длины. Размер шрифта относительно текста внутри текущего объекта. Если текущий размер шрифта для встроенного текста не установлен вручную, он определяется относительно размера шрифта браузера по умолчанию.

    Электромагнитные характеристики

    • Значение em не фиксировано;
    • em наследует размер шрифта родительского элемента.

Примечание. Высота шрифта по умолчанию для любого браузера составляет 16 пикселей. Все ненастроенные браузеры соответствуют: 1em=16px.

  • Rem — это относительная единица измерения (root em, root em), недавно добавленная в CSS3.Разница между этой единицей и em заключается в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, но относительный размер равен только корневой элемент HTML.

В настоящее время rem поддерживается во всех браузерах, кроме IE8 и более ранних версий.

Очень адаптивный div, в нем два div, один высотой 100px, а другой, надеюсь, заполняет остальную высоту Как решить проблему?

  1. использоватьcalc 
.div1{
	height: 100px;
}
.div2 { 
	height: calc(100%-100px); 
}
  1. абсолютное позиционирование
.container{
	position: relative;
}
.div1{
	height: 100px;
}
.div2 { 
	position: absolute;
	top: 100px;
  bottom: 0;
}
  1. flexмакет
.container { 
  display:flex; 
  flex-direction:column; 
} 
.div1{
	height: 100px;
}
.div2 { 
	flex:1; 
}

Разница между переходом, трансформацией и анимацией

Transform:

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

Transition

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

Например, у вас есть следующие два стиля:

.position{
    left:100px;
    top:100px;
}
.position1{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

элементальclassкласс какposition. когда ты ставишь этоclassListУвеличиватьposition1или заменитьpositionдляposition1Когда атрибут элемента изменяется, запускается webkit-transition, и указанный атрибут является начальным значением до изменения, а измененный атрибут является конечным значением, и выполняется эффект анимации. Это простой двухточечный процесс изменения, который значительно упрощаетanimationСложность имущества.

вposition1изtransitionСмысл атрибута гласит: когда вашleftПри изменении атрибута выполняется эффект анимации (изменяется только атрибут на основе левого, другие атрибуты не будут добавлены к изменению анимации);

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

Animation:

Представленное в официальном введении, это свойство является расширением свойства перехода. Но это простое введение содержит кое-что далеко не простое: ключевые кадры.

См. простой пример ключевых кадров:

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

В приведенном выше коде показано «колебание» ключевых кадров, где 0% представляет значение свойства в разные моменты времени изменения, вы можете точно контролировать эффект свойства в любой момент времени изменения анимации. Анимация вычисляет свойства анимации элемента в соответствии с изменениями свойств, предоставленными ключевыми кадрами.

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

animation-fill-mode это свойство указывает, является ли стиль, заданный параметром (from/0%), или стиль, указанный параметром (to/100%), стилем после завершения анимации. Это очень удобно для нас, чтобы управлять конечным стилем анимации, чтобы обеспечить общую связность анимации.

Понимание высоты строки?

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

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

В другом понимании, если div с текстом не устанавливает высоту и устанавливает высоту строки на 0, div не будет растягиваться.

<div class="container">
  <div class="ele">
    this is inner text
  </div>
  <div class="ele1">
    this is inner text
  </div>
</div>

.container{
    width: 220px;
    height:100px;
    border: 1px solid grey;
}
div{
   margin-top: 20px;
   border: 1px solid grey;
}
.ele{
 line-height:0;
}
this is inner text
this is inner text

Детали можно перемещатьСъедобный "сухой товар css layout", чистый пример HTML, отлаживаемый | горизонтальный, вертикальный, многоколоночныйсерединаline-heightчасть

Поля CSS (margin) перекрываются и предотвращают методы

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

Результаты складывания следуют следующим принципам расчета:

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

При каких обстоятельствах поля будут перекрываться?

  1. Горизонтальные поля никогда не совпадают.
  2. В соседних блоках, если один из них является плавающим, вертикальные поля не будут перекрываться, и то же самое верно между плавающим блоком и его дочерними элементами.
  3. Поле между элементом с атрибутом переполнения и его дочерними элементами не перекрывается (кроме случаев, когда видно значение переполнения).
  4. Для блочных моделей с абсолютным позиционированием (position:absolute) вертикальные поля не перекрываются, и то же самое верно для их дочерних элементов.

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

Что такое БФК? Как активировать BFC? Какая польза?

BFC (контекст форматирования блока) буквально переводится как «контекст форматирования на уровне блока». Это независимая область рендеринга, в которой участвует только блок уровня блока, он определяет, как размещается внутренний блок уровня блока, и не имеет ничего общего с внешней частью этой области.

Правила ограничения макета для BFC

  • Внутренние коробки будут размещены одна за другой в вертикальном направлении.

  • Вертикальное расстояние Box определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут перекрываться.

  • Левая сторона поля поля каждого поля (блоков и строк) касается левой стороны поля границы содержащего блока (для форматирования слева направо, в противном случае наоборот). Это верно, даже если есть поплавки. То есть нейтронный элемент БТЭ не выйдет за пределы содержащего его блока.

  • Область BFC не будет перекрывать флоат-бокс.

  • BFC — это изолированный и независимый контейнер на странице, и дочерние элементы внутри контейнера не будут влиять на внешние элементы. Наоборот.

  • При расчете высоты БФК в расчете также участвуют плавающие элементы.

Метод триггера BFC

  1. Корневой элемент, тег HTML
  2. Плавающий элемент: плавающее значение слева, справа
  3. Значение переполнения не видно, оно автоматическое, прокручивается, скрыто
  4. Отображаемое значение: inline-block, table-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid.
  5. Элемент позиционирования: значение позиции абсолютное, фиксированноеУведомление: display: tableПричина, по которой также может быть сгенерирована BFC, заключается в том, что Table по умолчанию генерирует анонимную ячейку таблицы, и эта анонимная ячейка таблицы генерирует BFC.

Роль BFC

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

  1. Маржа рухнет под тем же BFC

  2. BFC может содержать плавающие элементы (очистить

  3. BFC может предотвратить закрытие элементов плавающими элементами.

Пример BFC и подробное объяснение

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

Оба сделают элемент невидимым.

разница описывать
документооборот display: none; элемент полностью исчезнет из дерева рендеринга и не будет занимать место при рендеринге; видимость: hidden; элемент не исчезнет из дерева рендеринга, элемент рендерера продолжит занимать место, но содержимое не будет видно;
наследование отображение: нет; ненаследуемый атрибут, узел-потомок исчезает, поскольку элемент исчезает из дерева рендеринга и не может быть отображен путем изменения атрибута узла-потомка; видимость: скрыта; является унаследованным атрибутом, узел-потомок исчезает потому что он наследует скрытый, и его можно установить, установив видимость: видимый, сделать узлы-потомки явными;
Рендеринг воздействия Изменение свойства отображения элемента для его исчезновения или отображения обычно вызывает перекомпоновку. Изменение свойства видимости вызовет только перерисовку
читатель экрана Невозможно прочитатьdisplay: noneСодержимое элемента будет читать видимость: скрытое содержимое элемента;

Какие есть способы скрыть элементы?

  • visibility: hidden: скрыть элемент, но пространство, занимаемое элементом, все еще существует;
  • opacity: 0: сделать элемент полностью прозрачным;
  • position: absolute + 一个很大的 left 负值定位: разместить элемент за пределами видимой области;
  • display: none: элемент невидим и больше не занимает места в документе;
  • transform: scale(0): установить для элемента бесконечно малый масштаб, элемент не будет виден, а исходное положение элемента будет сохранено;
  • <div hidden="hidden">: атрибут HTML5, действие такое же, как у display:none;, но этот атрибут используется для записи состояния элемента;
  • height: 0: Установите высоту элемента на 0 и уберите границу, иногда ее нужно установить синхронноoverflow: hidden;
  • filter: blur(0): свойство CSS3, чем больше значение в скобках, тем больше степень размытия изображения по Гауссу, и изображение может исчезнуть при достижении определенного уровня;

Что вызывает невидимое белое пространство между li и li? Каково решение?

Браузер по умолчанию отображает пробелы между встроенными элементами (вкладка переноса пробелов) в виде пробела. После новой строки будет сгенерирован символ новой строки, и он станет пробелом, разумеется, пробел занимает ширину одного символа.

Решение:

  1. Напишите код
  2. в одну строку
  3. БудуulРазмер символа напрямую устанавливается на 0, сбрасываетсяliразмер символа
  4. БудуulРасстояние между символами установлено на -5 пикселей, сброситьliразмер символа
.wrap ul{letter-spacing: -5px;}
.wrap ul li{letter-spacing: normal;}
  1. настраиватьliсвойстваfloat：left;

Хотя чисто рукописных ул у меня давно нет. . .

Как получить положение, ширину и высоту блочной модели в JS

  1. дом.стиль.ширина/высота Этот метод может получить только ширину и высоту встроенного стиля, и стиль обычно не записывается встроенным, поэтому этот метод не подходит для большинства текущих разработок;
  2. window.getComputedStyle(дом).ширина/высота getComputedStyle() — это метод, который может получить все текущие элементынаконецИспользуемый метод значений свойств CSS, совместимость хорошая.
  3. dom.getBoundingClientRect() getBoundingClientRect используется для получения набора позиций элемента относительно области просмотра. В коллекции 8 свойств: сверху, справа, снизу, слева, высота, ширина, x, y.
const rectObject = dom.getBoundingClientRect()
  • rectObject.top: расстояние от верха элемента до верха окна просмотра;
  • rectObject.right: расстояние от правой стороны элемента до левой стороны окна просмотра;
  • rectObject.bottom: расстояние от низа элемента до верха области просмотра;
  • rectObject.left: расстояние от левой стороны элемента до левой стороны окна просмотра;
  • rectObject.width: ширина элемента;
  • rectObject.height: высота элемента;
  • rectObject.x: расстояние по горизонтали между содержимым элемента и областью просмотра;
  • rectObject.y: расстояние по вертикали между содержимым элемента и областью просмотра;

Как сделать текст поддержки Chrome меньше 12px

Для ядра Google Chrome добавьте префикс webkit и используйте атрибут transform:scale() для масштабирования!

.text {
    -webkit-transform: scale(0.8);
}

Как браузеры определяют, соответствует ли элемент селектору CSS

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

Например, с селекторами:body.ready #wrapper > .lol233

Сначала возьмите все элементы с lol233 в классе, чтобы сформировать набор, а затем перейдите на следующий уровень.Для каждого элемента в наборе, если родительский идентификатор элемента не #wrapper, удалите элемент из набора . Поднимаясь вверх, начинайте искать от родительского элемента этого элемента, и если не найден элемент с телом tagName и готовым классом, удаляйте исходный элемент из коллекции.

На этом сопоставление селекторов завершено, и все элементы, оставшиеся в коллекции, удовлетворены.

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

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

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

Как реализовать 1px на мобильном

То же самое с 1px, 1px на мобильной стороне будет казаться очень толстым.

В более ранних мобильных устройствах плотность пикселей экрана была относительно низкой, например, iphone3, его разрешение было 320x480, на iphone3 один пиксель CSS действительно равен одному физическому пикселю экрана. Позже, с развитием технологий, плотность пикселей экрана мобильных устройств становилась все выше и выше.Начиная с iphone4, Apple запустила так называемый экран Retina, который удвоил разрешение до 640x960, но размер экрана не изменился. означает, что на экране того же размера количество пикселей удваивается.В настоящее время один пиксель CSS равен двум физическим пикселям.

Сценарий 1: 0,5 пикселя
Определите, может ли браузер обрабатывать границы в 0,5 пикселя через JavaScript, и если да, добавьте класс к элементу.

Вариант 2: Реализация с картинками Создайте изображение с прозрачными краями и отобразите его с перекрытиемborder-image: url(border.gif) 2 repeat;

Вариант 3: Реализация множественного фонового градиента
Установите градиентный фон 1px, 50% цветной, 50% прозрачный, но не можете получить закругленные углы

Решение 4: Псевдокласс + преобразование Удалите границу исходного элемента, затем используйте :before или :after, чтобы переделать границу и уменьшить масштаб преобразования вдвое. Относительное позиционирование исходного элемента, абсолютное позиционирование новой границы

Вариант 5 (рекомендуется): реализовано через viewport + rem

var viewport = document.querySelector("meta[name=viewport]");

//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
  viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
  viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
  viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}

// 设置对应viewport的rem基准值
var docEl = document.documentElement;
var fontsize = 16* (docEl.clientWidth / 375) + 'px';
docEl.style.fontSize = fontsize;

Подробности здесь не повторяются. Для конкретной реализации и подробного объяснения пяти схем перейдите к 【окно просмотра и 1px | инструментщик: это 1px, дизайнер: нет, это не】

Какие свойства CSS можно наследовать?

1. Свойства семейства шрифтов

  • семейство шрифтов: семейство шрифтов
  • font-weight: вес шрифта
  • размер шрифта: размер шрифта
  • стиль шрифта: стиль шрифта

2. Свойства текстовой серии

  • text-indent: отступ текста
  • text-align: горизонтальное выравнивание текста
  • высота строки: высота строки -word-spacing: расстояние между словами
  • letter-spacing: китайский или расстояние между буквами
  • text-transform: управлять регистром текста (то есть прописными, строчными, заглавными буквами этих трех)
  • цвет: цвет текста

3. Видимость элемента:

  • видимость: управляет отображением и скрытием элемента.

4. Список свойств макета:

  • стиль списка: стиль списка, включая тип стиля списка, изображение стиля списка и т. д.

5. Свойства курсора: - курсор: в какой форме отображается курсор

css в React Native?

Стили React Native в основном реализуют подмножество CSS.Имена этих стилей в основном соответствуют названиям CSS в Интернете, но используют camelCase в соответствии с требованиями синтаксиса JS.

1. Встроенные стили: В общем, встроенные стили просты и грубы, что позволяет быстро выполнять отладку,

<Text style = {{fontSize:20,fontStyle:'normal',fontWeight:'bold'}}>测试</Text>

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

 const italic = {fontSize:20, fontStyle:'italic',fontWeight:'bold'};
 <Text style = {italic}>我是对象样式</Text>

3. Используйте StyleSheet.create:
Стили, созданные с помощью StyleSheet.create, могут сократить количество выделений памяти и повысить производительность.StyleSheet неизменяем и обычно требует некоторого обхода.

StyleSheet также может помочь вам проверить правильность синтаксиса стиля. Так что это хороший выбор стиля

const styles = StyleSheet.create({font:{fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
<Text style ={styles.font}>我是StyleSheet.create创建的样式</Text>

4. Стиль сшивания: Когда компонент повторно использует несколько стилей, можно использовать объединение стилей, которое является практичным способом объединения стилей.

    const styles = StyleSheet.create({font:            {fontSize:20,fontStyle:'italic',fontWeight:'bold'},content:{backgroundColor:'#aaaaaa'}});
    <Text style = {[styles.content,styles.font]}>我是组合样式一</Text>
    <Text style = {[styles.content,styles.font,{color:'#666666'}]}>我是组合样式二</Text>
  1. Условный стиль: Компоненты стиля на основе логики рендеринга
 <Text style = {this.state.toucher && styles.font}>我是条件样式</Text>
  1. Использовать родительский стиль Используйте стили компонентов для доставки, чтобы родительский компонент более эффективно управлял стилями потока и операций.
 <Text style = {this.props.style}>我是父类的属性样式</Text>

RN использует JavaScript для написания стилей. Все основные компоненты принимают свойство с именем style. Пока конечный результат имеет правильный тип, вы можете использовать любой синтаксис js для создания объектов стилей.

Правила Flexbox по умолчанию используются в React Native для указания макета дочерних элементов компонента.

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

Элемент стиля появляется в элементе body, а конечный эффект такой же, как и элемент стиля в заголовке.

Загрузка страниц осуществляется сверху вниз. Поместите тег стиля перед телом, чтобы стили загружались первыми. Если он написан после тега body, так как браузер разбирает html-документ построчно, при разборе таблицы стилей, написанной в документе, браузер остановит предыдущий рендеринг и будет ждать, пока таблица стилей будет загружена и проанализирована, что может привести к FOUC, перерисовке или изменению макета

В соответствии с текущим стандартом в элементе body может отображаться . И может также вызвать вышеуказанную проблему. Однако ссылки относятся к ресурсам, то есть их можно использовать для преднамеренной асинхронной загрузки. Элемент стиля является встроенным, и нет разумного варианта его использования. Поэтому стандарт html позволяет отображать в теле ссылки, но не стили.

position:fixed Что делать, если на мобильнике он недействителен?

Фиксированное позиционирование на самом деле относится к области просмотра браузера. Мобильные браузеры имеют два окна просмотра: визуальное окно просмотра и окно просмотра макета.

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

Если он зафиксирован в горизонтальном направлении, вы можете пройти

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

Чтобы установить ширину веб-страницы равной ширине экрана, и не позволять пользователям масштабировать, конечно, дизайн нужно адаптировать

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

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

Что такое рефлоу (рефлоу) и перерисовка и в чем разница

Перекомпоновка и перерисовка повлияют на производительность страницы.Эти два будут упоминаться каждый раз в одно и то же время.Взаимосвязь настолько близка, что рядом с KFC должен быть MC.

Когда страница нагрузки, процесс рендеринга браузера выглядит следующим образом:

  1. Разобрать HTML, создать дерево DOM, разобрать CSS, создать дерево CSSOM
  2. Объедините дерево DOM и дерево CSSOM для создания дерева рендеринга.
  3. Макет (перекомпоновка): согласно сгенерированному дереву рендеринга выполните перекомпоновку (макет), чтобы получить геометрическую информацию (положение, размер) узла.
  4. Покраска (перерисовка): По геометрической информации, полученной из дерева рендеринга и перекомпоновки, получаются абсолютные пиксели узла
  5. Отображение: отправка пикселей на графический процессор для отображения на странице. (На самом деле на этом этапе много контента, например объединение нескольких слоев композиции в один слой на графическом процессоре и отображение его на странице. Принцип аппаратного ускорения css3 заключается в создании нового слоя композиции)

переплавка

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

перерисовать

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

Действия, вызывающие перекомпоновку:

  • первый рендер страницы
  • Изменился размер окна браузера
  • Изменения размера или положения элемента (включая поля, внутренние границы, размер границы, высоту и ширину и т. д.)
  • Содержимое элемента изменяется (количество текста или размер изображения, например, пользователь вводит текст в поле ввода и т. д.)
  • Изменение размера шрифта элемента
  • добавить или удалитьвидимыйизDOMэлемент
  • активацияCSSпсевдоклассы (например::hover）
  • запрашивать определенные свойства или вызывать определенные методы

В чем конкретная разница между встроенными элементами и элементами блочного уровня? Можно ли установить отступы и поля встроенных элементов?

Особенности блочного элемента ( block ):

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

Ширину, высоту, отступы и поля можно контролировать;

Функция встроенного элемента (inline):

на той же строке, что и соседний встроенный элемент;

Ширина (width), высота (height), верх/низ отступа и верх/низ внешнего поля не могут быть изменены (то есть можно задать левый и правый отступы и поля).

Браузер также имеет собственный встроенный блочный элемент по умолчанию (с внутренними размерами можно установить высоту и ширину, но нет автоматического переноса строк)
<input> 、<img> 、<button> 、<textarea>。

В чем причина проблемы, что изображения img имеют свои поля? Как решить?

Зазор в нижней части изображения на самом деле связан с моделью макета встроенного элемента.Выравнивание изображения по вертикали по умолчанию — это базовая линия, а расположение базовой линии — относительно шрифта. Таким образом, в какой-то момент зазор внизу изображения может составлять 2 пикселя, а в другой раз — 4 пикселя или больше. Различный размер шрифта также должен влиять на размер этого пробела.

  1. Преобразует в блочные элементы (на уровне строки)
 display : block
  1. Плавающий, плавающий элемент по умолчанию может быть преобразован в блочный элемент (вы можете установить атрибуты ширины и высоты по желанию)
float ： left；
  1. Определить вертикальное выравнивание для img (убрать нижнее поле)
img{    
    border: 0;    
    vertical-align: bottom;
}

  1. Установите размер шрифта его родительского контейнера на 0;

  2. Установите родительскую метку на ту же высоту, что и изображение

Разговор о каскадном контексте CSS

Большинство людей имеют представление о z-index после первоначального изучения CSS.z-indexиспользуется для описания и определения элемента на экранеZ轴порядок наложения". Например, если элемент A и элемент B перекрываются, будет немного скучно говорить, что, говоря другими словами,

  1. Если красивая девушка А и текст Б аннотации перекрываются
  2. Но когда страница отображается, текст находится над картинкой, блокируя вас от просмотра девушки.
  3. В этот момент вы можете
    • Установите z-индекс девушки на 999.
    • Установите z-индекс текста на -1

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

  1. z-indexсобственность только впозиционированный элемент(Определенныйpositionатрибут, а значение атрибута неstaticэлемент стоимости) имеет эффект.
  2. элемент вZ轴порядок наложения на , к какому элементу принадлежит элементконтекст стека, элементальКаскадный уровень, а элемент впорядок в документеи т.д. Соопределение, элементz-indexvalue является лишь одним из условий, определяющих уровень укладки элементов.

Что такое «каскадный контекст»

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

В спецификации CSS2.1 положение каждой блочной модели является трехмерным, то есть элемент находится в дополнение к краю страницы.X轴Y轴Плитка, а также имеет вертикальную глубину относительно экрана, что означает каскадированиеZ轴.

Как создать «каскадный контекст»Каскадные контексты в основном создаются некоторыми специфическими свойствами CSS.

  • Корневой элемент в самом HTML имеет контекст наложения, называемый «корневым контекстом наложения».
  • Обычные элементы задают для атрибута position нестатическое значение и задают для атрибута z-index определенное значение для создания контекста наложения. CSS3 добавляет некоторые условия для создания контекстов наложения, которые будут перечислены позже.

Каскадный порядок

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

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

  1. z-index > 0 (требуется, чтобы свойство z-index вступило в силу)
  2. z-index: auto или z-index: 0 (z-index: auto не создает контекст стекирования)
  3. встроенный, встроенный блок, встроенный блок
  4. поплавокплавающий ящик
  5. блочный блок уровня блока, не встроенный блок, дочерние элементы без позиционирования (кроме статического)
  6. z-index < 0
  7. укладки элементов контекстаbackground/border

Когда элементы расположены друг над другом, их отношения наложения обычно следуют двум следующим правилам:

  1. В том же домене контекста стека, когда имеется очевидная индикация уровня стека, например допустимыйz-indexзначение, тот, у которого больше уровень каскадирования, перекрывает меньший.
  2. Когда элементы располагаются на одном уровне и в одном порядке, более поздние элементы в потоке DOM перезаписывают более ранние элементы.

Для конкретных объяснений и тематических исследований, пожалуйста, перейдите к«Каскадный контекст CSS», который интерфейс должен освоить

Относительный эталон процентной единицы css

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

  1. процент ширины и высоты

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

  1. процент маржиmarginПроцентное значение рассчитывается относительно ширины содержащего его блока. Когда режим письма изменяется на книжный, его ссылка становится высотой содержащего блока.Зачем

Объяснено в Полном руководстве по CSS:

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

  1. процент заполнения То же

  2. Ширина, процент набивки В стандартной модели коробки, width: 100%; padding: 10% 10%;Это приведет к переполнению внутреннего элемента.В этом случае обычно используется модель странного блока, то есть настройкаbox-sizing: border-box,В этот моментwidthЗначение будет содержатьpaddingрасстояние.

  3. перевести процент Использование процентов в функции перевода основано на собственной ширине и высоте элемента.

  4. маржа отрицательная

    1. margin-left, margin-right — отрицательные значения
      • Сам элемент не имеет ширины, он увеличит ширину элемента
      • Сам элемент имеет ширину, которая вызовет смещение
    2. Margin-top — отрицательное значение, независимо от того, установлена ​​ли высота, оно не увеличит высоту, а произведет смещение вверх
    3. Когда margin-bottom имеет отрицательное значение, он не будет смещен, но уменьшит свою высоту для чтения css.

  5. заполнение отрицательное К сожалению, заполнение не может быть указано как отрицательное, и оно недействительно, если указано~

Для конкретных пояснений и примеров руководства, пожалуйста, перейдитеЯ не могу сказать, кто является эталоном (процент|отрицательное значение) длины CSS

Эта статья включена в:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)

Справочная документация:

  1. Приоритет CSS и как его рассчитать
  2. Статьи по CSS — 100 почти 20 000 слов помогут вам закрепить знания CSS.
  3. Принцип плавающего поплавка и клиринговый поплавок
  4. Как браузеры определяют, соответствует ли элемент селектору CSS
  5. Какие свойства CSS можно наследовать?
  6. React-Native стиль
  7. Решение фиксированной инвалидации, когда вызывается программная клавиатура фиксированного элемента макета ios на веб-стороне.
  8. Классические вопросы на собеседовании по CSS
Категории