Вопросы для собеседования по CSS

CSS

😂 Это просто личное замечание... Я не ожидал, что это кто-то увидит...

Источник темы:Вопросы на собеседовании по фронтенд-разработке

Ответ в основном самоорганизованный. Не все темы доступны.

Будет много своего многословного, и много сумбурных дополнений, прошу меня простить.

Ввести стандартную блочную модель CSS? Чем отличается блочная модель младших версий IE?

Существует два типа блочных моделей: блочная модель IE (IE5.5 и ниже), стандартная блочная модель W3C.

  • Модель коробки:

    Content (содержимое), padding (заполнение), border (граница), border (маржа).

  • разные:

    Ширина и высота стандартной блочной модели W3C — это ширина и высота содержимого;

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

  • Дополнительный:

    Контур (контур) рисуется над рамкой элемента, которая не занимает места (не влияет на размер и положение элемента) [поэтому если контур будет толстым, он закроет другое содержимоеdemo, Я не очень хорошо понимаю порядок покрытия схемы. Он действительно может покрыть содержимое следующего элемента? Является ли сам контур другим измерением? перезапишет содержимое, но последний контур перезапишет предыдущий].

    Совместимость: IE8 и выше.

Другие ссылки:Некоторые практические подробности о полях, Устранение проблем совместимости с блочными моделями

Как центрировать div?

горизонтально по центру

  • Известная ширина, блочный элемент:

    Добавить кmargin:0 autoАтрибуты.

    div{
	width:200px;
	margin:0 auto;
 }

  • При известной ширине абсолютно позиционированный div центрируется:

    div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* 这一步很关键 */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

  • Неизвестная ширина, подходящее содержимое:

    Совместимость плохая.

    div {
    width: fit-content;
    margin: auto;
    background-color: pink;	/* 方便看效果 */
}

  • Неизвестная ширина, встроенный блок:

    .parent {
    text-align: center;
}
div {
    display: inline-block;
    background-color: pink;	/* 方便看效果 */
}

  • неизвестная ширина/известная ширина, относительная:

    Ссылаться на:3. Метод плавания для достижения горизонтального центрирования

    • Преимущества: сильная совместимость, сильная масштабируемость;
    • Недостаток: более сложный принцип реализации.

    Требуются два div, внешний левый 50% и внутренний левый -50%.

    использоватьfloatилиinline-block, чтобы размер контейнера соответствовал размеру содержимого, а не 100 % по умолчанию.

    .outter {
    display: inline-block; /* or float: left; */
    position: relative;
    left: 50%;
}
.inner {
    position: relative;
    left: -50%;
}
    • Когда значение left равно проценту, это процент от ширины родительского контейнера (MDN).

Центрируется по горизонтали и вертикали

  1. Определяем ширину и высоту контейнера:

    Относительное или абсолютное позиционирование, установите отступ.

    div {
	position: relative / fixed; /* 相对定位或绝对定位均可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;  /* 外边距为自身宽高的一半 */
	background-color: pink; /* 方便看效果 */
 }

  2. Не уверен в ширине и высоте контейнера:

    Абсолютное позиционирование с использованиемtransformАтрибуты.

    div {
	position: absolute/fixed; /* relative会让width变成100%，
                                 所以不行
                               */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink; /* 方便看效果 */
}

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

    Ширина и высота могут быть определены или нет.

    Совместимость следует учитывать при фактическом использовании.

    .container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px; /* 可省 */
	height: 100px; /* 可省 */
	background-color: pink;	/* 方便看效果 */
}

  4. встроенный блок:

    Ширина и высота могут быть определены или нет.

    Центрировать по горизонтали: выравнивание по тексту.

    Выравнивание по вертикали: высота строки родительского элемента совпадает с высотой, а дочерний элемент выровнен по вертикали.

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

    .container {
    height: 200px; /* 垂直居中 */
    line-height: 200px; /* 垂直居中 */
    text-align: center; /* 水平居中 */
}
.container div {
    display: inline-block; /* 核心：宽度自适应，高度可居中 */
    line-height: 20px; /* 会自动继承，必须设置不同的值来覆盖 */
    vertical-align: middle; /* 垂直居中 */
}

Что такое селекторы CSS?

  1. селектор идентификатора ( #myid )
  2. Селектор класса (.myclassname)
  3. Селекторы тегов (div, h1, p)
  4. Немедленный селектор братьев и сестерh1 + p(выбрана буква p, следующая за h1)
  5. Общий селектор братьев и сестерh1 ~ p(выбрать все p после h1) [css3]
  6. дочерний селектор (ul > li)
  7. селектор потомков (li a)
  8. Селектор подстановочных знаков ( * )
  9. селектор атрибутов (a[rel = "external"])
  10. Селекторы псевдоклассов (a:hover, li:nth-child)
  • Псевдоэлементы и псевдоклассы:
    • всепсевдоэлемент:
      ::after
::before
::first-letter
::first-line
::selection
    • псевдокласс:
      :active, :hover, :visited
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid

Очень интересное использование селекторов с подстановочными знаками — использовать их для формированияселектор без субселектора,Например:

section * a {font-size:1.3em;}

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

Какие свойства могут передаваться по наследству?

  • Все элементы могут наследовать

    visibility

cursor

  • Строчные элементы могут наследовать:

    letter-spacing word-spacing

white-space

line-height

color

font font-family font-size font-style font-variant font-weight

text-decoration text-transform

direction

    font-variant: установить для абзаца шрифт с прописными буквами.

    text-transform: Управляет заглавными буквами в тексте.

  • Блочные элементы могут наследовать:

    //文本块中首行文本的缩进
text-indent 

text-align

  • Элементы списка могут наследовать:

    list-style
list-style-type
list-style-position
list-style-image

  • Элементы таблицы могут наследовать:

    /*
    1. separate	默认值。边框会被分开。
      不会忽略 border-spacing 和 empty-cells 属性。
    2. collapse	如果可能，边框会合并为一个单一的边框。
      会忽略 border-spacing 和 empty-cells 属性。
    3. inherit	规定应该从父元素继承 border-collapse 属性的值。
*/
border-collapse

  • Ненаследуемые стили:

    display

position left right top  bottom z-index

height min-height max-height
width min-width max-width

padding border margin

background

overflow

float clear

vertical-align

/*下面几个都没见过*/

table-layout /*表格宽度是否自适应。值：automatic，fixed，inherit*/

page-break-after page-break-before /*打印时强制分页*/

unicode-bidi /*与direction合用，控制文字方向*/

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

  • Принцип приоритетной близости,тот же весчехол стильопределить ближайшийпревалирует;
  • Загрузка стилей основана на последнем загруженном позиционировании.

Приоритет:

// 同权重下，权限由高到低: 
1.元素标签里（行内样式/内联样式）
2.写在<style>标签里（嵌入样式）
3.写在单独的 CSS 样式表中（链接样式）
4.在样式表中链接其他样式表：@import url(css/styles2.css)

// 不同权重计算
!important >  id > class > tag

// !important优先于一切
!important 比 内联优先级高

Метод расчета веса:

// 选择器的特殊性值表述为4个部分，用0,0,0,0表示。

行间样式的特殊性是1,0,0,0

ID选择器的特殊性值，加0,1,0,0。

类选择器、属性选择器或伪类，加0,0,1,0。

元素和伪元素，加0,0,0,1。

通配选择器 * 对特殊性没有贡献，即0,0,0,0。

!important，它没有特殊性值，但它的优先级是最高的。
为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

more: Подробный метод расчета приоритета

image

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

Ссылаться на:MDN — Что нового в CSS

псевдокласс инструкция
:last-child Последний дочерний элемент родительского элемента.
:nth-child(an+b) найти всех дочерних элементов текущего элемента;
Сортировать от 1 по порядку позиции, и результатом выбора является набор элементов an+b (n = 0, 1, 2, ...).
:nth-last-child(an+b) и:nth-child(an+b)аналогично, только начинается в концеобратный счет, а не с самого начала.↪ МДН
:only-child Единственный дочерний элемент, который принадлежит родительскому элементу, т. е. выбирает все элементы без братьев и сестер.


:first-of-type Под родительским элементом самый передний элемент каждого типа.
:last-of-type Под родительским элементом последний элемент каждого типа.
:nth-of-type(an+b) Под родительским элементом в каждом типе элемента n-й.

Найдите набор всех дочерних элементов того же типа элемента под текущим элементом,
Отсортируйте каждый набор в порядке расположения,
Результатом выбора является множество элементов an+b.
:nth-last-of-type(an+b) в основном и:nth-of-typeто же самое, только начинается с концаобратный счет, а не с самого начала.
:only-of-type Выберите элемент типа тега, который отличается от других одноуровневых элементов, то есть элемент этого типа элемента находится под своим родительским элементом, единственным на том же уровне. (аналог мальчиков и девочек в семье)


:enabled Каждый включенный элемент (в основном для элементов формы).
:disabled Отключенные элементы (в основном используются для управления отключенным состоянием элементов управления формы).
:checked Выбран переключатель или флажок.
:indeterminate Указывает на неопределенное состояние.
1.<input type="checkbox">элементы, чье неопределенное свойство установлено в true с помощью JavaScript;
2.<input type="radio">элемент, когда не выбраны все радиокнопки с одинаковым значением имени в форме;
3. в состоянии неопределенности<progress>элемент
:target <a>Прыжок#Якорь, который устанавливает стиль цели привязки.MDN
:root Соответствует корневому элементу дерева документов.
Для HTML,:rootвыражать<html>Элементы такие же, как селекторы html, за исключением того, что они имеют более высокий приоритет.
:empty Элемент без дочерних элементов.
Дочерними элементами могут быть только узлы элементов или текст (включая пробелы).MDN
Комментарии не учитываются, но учитываются пробелы вокруг комментариев.
:not(X) match не соответствует селектору параметраXописанный элемент.
Xне может содержатьЕще одинотрицательный селектор.
:notПриоритет псевдокласса — это приоритет его селектора параметров.
:notПсевдоклассы не похожи на другие псевдоклассы.не увеличивает приоритет селектора.
:not(p)будет соответствовать любому элементу, отличному от p, включаяhtmlиbody. (Поэтому будьте осторожны при его использовании, если вы установите какой-либо цвет, могут возникнуть ситуации, которых вы не ожидаете, например, тот же цвет.↪ демо-версия ошибки)

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

display инструкция
css1
none Элемент не отображается и удаляется из документооборота.
inherit Наследует значение свойства отображения от родительского элемента.
block тип блока. Ширина по умолчанию — это ширина родительского элемента, вы можете установить ширину и высоту и отобразить их в новой строке.
inline Тип встроенного элемента. Ширина по умолчанию — это ширина содержимого, ширину и высоту нельзя задать, и они отображаются в одной строке.
list-item Отображается как элемент блочного типа и добавляет стилизованную разметку списка.
css2
inline-block Ширина по умолчанию — это ширина содержимого, вы можете установить ширину и высоту и отобразить их в одной строке.
table Отображается в виде таблицы на уровне блоков.
flex Как flex-элемент растягивается или сжимается, чтобы соответствовать доступному пространству в flex-контейнере.
grid Макет сетки

Значение позиции относительного и абсолютного начала позиционирования равно?

position инструкция
static По умолчанию.
Без позиционирования элемент появляется в обычном потоке
(игнорируйте объявления top, bottom, left, right, z-index).
inherit Наследует значение свойства position от родительского элемента.
absolute Абсолютное позиционирование.
место для элементов не резервируется,
Позиции относительно ближайшего нестатически расположенного элемента-предка.
исправлено (не поддерживается старым IE) Абсолютное позиционирование.
место для элементов не резервируется,
Позиционируется относительно окна браузера.
Положение элемента не меняется при прокрутке экрана.
relative относительное позиционирование.
Позиционируется относительно своего нормального положения.
По этому ключевому слову элемент сначала помещается в позицию, когда позиционирование не добавляется,
Затем отрегулируйте положение элемента без изменения макета страницы.
(таким образом оставляя зазор там, где этот элемент был бы без добавления позиционирования).

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

Что нового в CSS3?

  1. Закругленные углы (радиус границы: 8 пикселей)

  2. Добавлены различные селекторы CSS, псевдоклассы (часто используется :nth-child)

  3. Текстовое оформление

    Преобразовано в сокращенное свойство, которое можно установитьtext-decoration-color, text-decoration-style, text-decoration-lineТри свойства, значение по умолчаниюcurrentcolor solid none.

  4. Прозрачный цвет и непрозрачность

  5. Повернуть (преобразовать)

    Вращать, вращать, масштабировать, наклонять, наклонять, переводить, переводить

  6. Анимация и переход

  7. Тень (тень блока, тень текста)

    box-shadow: x-offset y-offset blur-radius spread-radius color;

text-shadow: x-offset y-offset blur-radius color;

  8. Новые методы компоновки, такие как многоколоночный макет, гибкий блок и сетка.

  9. Линейный градиент (градиент)

  10. Несколько фонов (фоновое изображение может установить несколько URL-адресов или линейный градиент)

  11. Запросы СМИ (@mediaMDN) (можешь посмотреть на это)

  12. Граница может быть установлена ​​на картинку (border-image)

Пожалуйста, объясните Flexbox CSS3 (модель макета flex box) и применимые сценарии?

MDN

что такое флексбокс

Новый макет CSS3.

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

Более сложные макеты также могут быть получены путем вложения гибкого контейнера.

  • Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами».

  • Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».

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

Существует больше гибкости в макете, чем раньше.

конкретный:Уууу. Я получил 3 балла с сайта prussian.com/CSS3/flexbo…  

Сценарии применения

  1. Центрируется по горизонтали и вертикали

  2. Одна сторона фиксированная ширина, одна сторона адаптивная

  3. Многоколоночный макет с равным разделением

  4. Макет Святого Грааля

  5. sticky footer

мое приложение в проекте

  1. sticky footer (demo)

    Если содержимое страницы недостаточно длинное, нижний колонтитул фиксируется в нижней части области просмотра; если содержимое достаточно длинное, нижний колонтитул будет сдвинут содержимым вниз.

    <div class="detail-flex">
    <div class="detail-content">detail-content</div>
    <div class="detail-footer">detail-footer</div>
</div>

    .detail-flex
    display: flex
    flex-direction: column
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    
    .detail-content
        flex: 1 0 auto
        
    .detail-footer
        flex: 0 0 auto

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

border

Бордюры разной ширины и высоты:Для получения подробной информации, пожалуйста, нажмите демо

border_diff

База

Скройте верхний, левый и правый края (установлен прозрачный цвет).

div {
  width: 0;
  height: 0; /* div里没内容，可不写 */
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

/* 或者这样写 */
div {
  width: 0;
  border: 100px solid transparent;
  border-bottom-color: #343434;
}

Равносторонний треугольник

Ширина дисплейной части = ширина прозрачной части * √3

√3 ≈ 1,732

div {
  width: 0;
  border: 100px solid transparent;
  border-bottom: 173px solid #343434;
}

прямоугольный треугольник

Установите ширину обеих сторон на 0.

/* 填充右下角的三角形 */
div {
  width: 0
  border: 0 solid transparent
  border-left: 100px solid transparent
  border-bottom: 100px solid #343434
}

треугольник с краем

pen demo

Эти два перекрываются. (но недостаточно умный)

<div id="col1"></div>
<div id="col2"></div>

body, html
  margin: 0
  background-color: #333
#col1, #col2
  width: 0
  border: 100px solid transparent
  border-bottom: 173px solid #fff
#col2
  position: absolute
  left: 0
  top: 2px
  border-bottom-color: #222
  transform: scale(0.98)

Как реализовать равную высоту css с несколькими столбцами?

Ссылаться на:Восемь способов создания макетов столбцов одинаковой высоты

1. Фоновое изображение

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

    Метод реализации прост, совместимость надежна, и его можно легко реализовать без слишком большого количества стилей CSS.

  • недостаток:

    Использование этого метода не подходит для компоновки высоких столбцов, например, для плавной компоновки;

    Когда вам нужно изменить цвет фона или реализовать столбцы одинаковой высоты с другими столбцами, вам необходимо воссоздать фоновое изображение.

2. вложенность div + позиция

demo

Схема:

image

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

    Не нужно прибегать к другим вещам (javascript, фоновые изображения и т. д.), но макет столбцов одинаковой высоты реализован на чистом CSS и HTML;

    Совместим со всеми браузерами (включая IE6) и может легко создавать любое количество столбцов.

  • недостаток:

    Он не так прост и понятен, как другие методы, и внесет некоторые трудности в ваше понимание;

    Сложная вложенность div, непонятная семантика html (нужно столько контейнеров, сколько колонок).

3. Положительное заполнение и отрицательное поле компенсируются положительными и отрицательными значениями.

demo

  • принцип:

    Используйте padding-bottom|margin-bottom для смещения положительных и отрицательных значений;

    Установите родительский контейнер так, чтобы он превышал скрытый (переполнение: скрытый), чтобы высота дочернего родительского контейнера по-прежнему была высотой, когда столбец внутри него не имеет установленного padding-bottom.Когда высота любого столбца внутри него увеличивается, высота родительского контейнера изменена.Поддержите высоту самого высокого столбца внутри, а другие столбцы, более короткие, чем этот столбец, будут использовать свое нижнее отступы, чтобы компенсировать эту часть разницы в высоте.

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

    Может достичьнесколько столбцовРавновысокая компоновка;

    Может реализовать эффект линии разделения между столбцами;

    Простая структура;

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

  • недостаток:

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

  • Недостатки решения:

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

    2. Используйте div для имитации границ столбцов

      demo

      Добавьте div в каждый столбец (вместо этого вы можете напрямую использовать псевдоэлемент ::after) и установите абсолютное позиционирование;

      В оболочке на верхнем уровне столбца найдите относительный;

      Таким образом, absolute можно позиционировать в соответствии с размером и положением обертки.

4. Граница + абсолютное позиционирование/плавающее «моделирование»

Демонстрация абсолютного позиционирования,float demo

Я чувствую, что идея на самом деле похожа на «2. вложение div + положение», которое заключается в том, чтобы установить фоновый слой внизу, а затем поместить текстовый слой сверху. (Следующее я поменял сам, работает↪ демо)

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

    Простая структура, совместимая с различными браузерами, простая в освоении.

  • недостаток:

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

5. Макет таблицы

demo

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

    Это очень простой и легко реализуемый метод.

  • недостаток:

    Совместимость плохая, в ie6-7 не работает.

6. гибкий макет

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

    Простой в использовании, подходит для мобильных устройств.

  • недостаток:

    Новые функции CSS3, несовместимые со старыми браузерами.

Категории