Как стать автором
Обновить

Мои любимые вопросы о CSS с ответами

CSS *

Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это надоело. Поэтому я хочу поделиться своими любимыми вопросами о CSS, которые я задаю на интервью.


В1. Каким способом я могу установить свойство opacity для элемента button, у которого есть атрибут disabled?


Ответ

Через псевдо-класс :disabled.


button:disabled {
  opacity: 0.24;
}

В2. Как я могу установить свойство opacity для элемента span, который следует прямо за элементом input?


Ответ

Использовать смежный (+).


input + span {
  opacity: 0.24;
}

В3. Как можно установить свойство opacity для элемента input, у которого установлен атрибут type со значением "radio"?


Ответ

Чтобы отобрать элемент с type="radio" требуется использовать селекторы атрибутов.


input[type="radio"] {
  opacity: 0.24;
}

В4. Есть фрагмент кода. Скажите сколько элементов с пурпурным фоном будет в первом и во втором случае.


<div class="some-element">some text</div>
<div class="some-element">some text</div>
<article class="some-element">some text</article>

случай 1


.some-element:first-child {
  background-color: purple;
}

случай 2


.some-element:first-of-type {
  background-color: purple;
}

Ответ

В первом случае один элемент, а во втором — 2.


В5. Что такое псевдокласс :root?


Ответ

:root — псевдокласс, которые отбирает корневой элемент в дереве документа. В случае HTML документа это элемент html. В случае SVG документа это элемент svg.


В6. Как работает псевдокласс :placeholder-shown?


Ответ

Псевдокласс :placeholder-shown срабатывает, когда у элементов input или textarea отображается placeholder. Если пользователь начинает ввод текста, то placeholder скрывается, и поэтому псевдокласс :placeholder-shown не применяется.


input:placeholder-shown {
  background-color: lightgray;
}

В7. Как я могу задать CSS для элемента, в котором есть элемент, находящийся в фокусе?


Ответ

Через псевдокласс :focus-within.


<div class="some-parent">
  <button type="button">Some button</button>
</div>

.some-parent:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

В8. Представьте, что есть таблица с данными. Назовите способ добавления свойство opacity для всех строк, кроме той, на которую навел пользователь.


Ответ

Нам требуется использовать сложный селектор, в котором установим свойство opacity для всех строк, используя tbody:hover, а через :not(:hover) отменим свойство opacity для наведенной строки.


tbody:hover tr:not(:hover) {
  opacity: 0.24;
}

В9. Как я могу переписать следующий код так, чтобы значение свойства background-color автоматически менялось при изменении значения свойства color?


.link {
  color: #222;
}

.link::before {
  background-color: #222;
}

Ответ

Нужно использовать ключевое слово currentColor, которое автоматически подставляет значение свойства color для текущего элемента. В нашем случае значение будет унаследовано от элемента .link.


.link {
  color: #222;
}

.link::before {
  background-color: currentColor;
}

В10. Единица измерения rem вычисляется в зависимости от значение свойства font-size элемента html. Правда или ложь?


Ответ

Правда.


В11. У элемента button установлено значение 16px для свойства font-size. Как мне установить значение 8px для свойства padding в единицах измерения em?


Ответ

Нужно разделить 8px на 16px.


button {
  font-size: 16px;
  padding: .5em;
}

В12. Я установил значение 10vw для свойства padding-left. Каким будет вычисленное значение в px, если размеры вьюпорта устройства — 480x320px?


Ответ

Единица измерения vw — это процент от ширина вьюпорта. В нашем случае 10vw соответствует 10% от ширины вьюпорта 480px, т.е. 48px.


В13. Как браузер расположит элементы div в следующем примере кода?


<body>
  <div>element 1</div>
  <div>element 2</div>
</body>

Ответ

Элементы div являются блочными элементами по умолчанию, поэтому они будут расположены друг под другом в колонку.


В14. Рассчитанное значение для свойства width у элемента .child это 1000px. Да или нет? Почему?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  width: 1000px;
}

Ответ

Да. Свойство width у блочных элементов по умолчанию заполняется все доступное горизонтальное пространство родительского элемента, поэтому в нашем примере свойство width элемента .child совпадает со свойством width родителя.


В15. Как рассчитывается значение свойства height у блочных элементов?


Ответ

Значение свойства height у блочных элементов рассчитывается в зависимости от высоты содержимого этого элемента.


В16. Строчные элементы располагаются в одну строку. Правда или ложь?


Ответ

Правда.


В17. Размеры элемента .child — 196x196px. Да или нет?


<body>
  <span class="child">element</span>
</body>

.child {
  width: 196px;
  height: 196px;
}

Ответ

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


В18. Будет ли отступ между элементом .child и верхней границей родительского элемента в следующем коде?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.child {
  margin-top: 10px;
}

Ответ

Нет, элемент .child будет прижат к верхней границе элемента .parent, потому что свойство margin для блочных элементов схлопывается.


В19. Какое вычисленное значение для свойства display будет в следующем коде?


span {
  display: inline-block;
  position: absolute;
}

Ответ

block. Когда мы используем position: absolute браузер делает этот элемент блочным, поэтому значение inline-block будет переопределено на значение block.


В20. Рассчитанное значение для свойства width у элемента .child это 1000px. Да или нет? Почему?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  width: 1000px;
}

.child {
  position: absolute;
}

Ответ

Нет. При использовании position: absolute свойство width рассчитывается в зависимости от количества содержимого элемента.


В21. Чему равняется высота элемента .parent в следующем примере?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.child {
  position: absolute;
}

Ответ

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


В22. Какие размеры у элемента span в следующем примере?


span {
  width: 300px;
  height: 300px;
  position: absolute;
}

Ответ

300x300px, поскольку в этом случае элемент span блочный.


В23. Элемент .child будет отодвинут на 20px от верхнего и левого края элемента .parent. Правда или ложь?


<body>
  <div class="parent">
    <div class="child">element 2</div>
  </div>
</body>

.parent {
  box-sizing: border-box;
  width: 1000px;
  padding: 20px;
}

.child {
  position: absolute;
}

Ответ

Правда. Когда мы добавляем position: absolute к элементу, он не меняет свою изначальную позицию до тех, пор пока ему явно не указать координаты с помощью свойств top, right, bottom, left. В нашем примере изначально у элемента .child был отступ в 20px от верхнего и левого края, и при добавлении position: absolute этот отступ остается.


В24. Какое вычисленное значение для свойства display будет в следующем коде?


span {
  display: inline-block;
  position: relative;
}

Ответ

inline-block, т.к. при position: relative, браузер не изменяет значение свойства display.


В25. Какие размеры у элемента span в следующем примере?


span {
  width: 300px;
  height: 300px;
  display: flex;
}

Ответ

Когда к элементу применяется display: flex, то он становится блочным элементом, поэтому свойства width и height применятся для элемента span. Размер элемента — 300x300px.


В26. В следующем примере у элемента .child вычисленное значение свойства display будет inline-block. Да или нет?


<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
}

.child {
  display: inline-block;
}

Ответ

Нет. Внутри флекс-контейнера элементы становятся блочными, поэтому вычисленное значение — block.


В27. Значение свойства width у элемента .child рассчитывается в зависимости от количества содержимого. Да или нет?


<div class="parent">
  <div class="child">element2</div>
</div>

.parent {
  display: flex;
}

Ответ

Да.


В28. Какой отступ будет между элементами в следующем примере?


<body>
  <div class="parent">
    <div class="first-child">element 1</div>
    <div class="second-child">element 2</div>
  </div>
</body>

.parent {
  display: flex;
  flex-direction: column;
}

.first-child {
  margin-bottom: 20px;
}

.second-child {
  margin-top: 10px;
}

Ответ

30px, потому что margin'ы внутри флекс-контейнера не схлопываются.


В29. Где будет располагаться элемент .child относительно краев родительского элемента в следующем примере?


<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
  width: 250px;
  height: 250px;
}

.child {
  width: 100px;
  height: 100px;
  margin-top: auto;
  margin-left: auto;
}

Ответ

В правом нижнем углу на расстоянии 150px.


В30. Какие размеры у элемента span в следующем примере?


<div class="parent">
  <span class="child">element2</span>
</div>

.parent {
  display: flex;
}

.child {
  flex-basis: 250px;
  width: 100px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

Ответ

225px. У свойства flex-basis есть приоритет перед свойством width, но также его значение должно быть в диапазоне значений свойств min-width и max-width. В нашем случае 250px (flex-basis) не укладывается в диапазон, и поэтому значение ширины ограничивается 225px.


P.S: Также я делюсь советами по CSS/HTML и отвечаю на вопросы на своем Patreon. Вы можете найти его по ссылке в моем профиле на Хабре.


P.S.S: Если вам понравилась статья, то вы можете сказать спасибо, подарив мою продукцию друзьям или лично себе. Ссылка в профиле.

Теги:
Хабы:
Всего голосов 25: ↑22 и ↓3 +19
Просмотры 23K
Комментарии Комментарии 33