Мои любимые вопросы о CSS с детальными ответами28.04.2020 08:48

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

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

button[disabled] {
  opacity: 0.24;
}

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

input + span {
  opacity: 0.24;
}

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

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

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

some text
some text
some text

случай 1

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

случай 2

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

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

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

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

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

  Some button

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

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

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

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

.link {
  color: #222;
}

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

.link {
  color: #222;
}

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

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

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

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

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

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

  
element 1
  
element 2

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

  

    
element 2
  

.parent {
  width: 1000px;
}

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

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

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

  element

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

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

  

    
element 2
  

.child {
  margin-top: 10px;
}

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

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

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

  

    
element 2
  

.parent {
  width: 1000px;
}

.child {
  position: absolute;
}

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

  

    
element 2
  

.child {
  position: absolute;
}

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

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

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

  

    
element 2
  

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

.child {
  position: absolute;
}

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

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

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

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

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

  element2

.parent {
  display: flex;
}

.child {
  display: inline-block;
}

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

  
element2

.parent {
  display: flex;
}

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

  

    
element 1
    
element 2
  

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

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

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

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

  element2

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

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

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

  element2

.parent {
  display: flex;
}

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

© Habrahabr.ru