Стили вопрос ответ css

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

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

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

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

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

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

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

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

some text
 
some text
 
some text

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.parent < display: flex; flex-direction: column; >.first-child < margin-bottom: 20px; >.second-child

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

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

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

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

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

P.S. У меня есть почтовая рассылка с CSS советами. Я буду рад, если вы присоединитесь. Ссылка указана в разделе «О себе» в моем профиле.

Почитать еще

Источник

Раскрывающийся текст ответа на вопрос в CSS

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

Чтоб создать этот для кого то нужный раздел по часто задаваемых вопросов, где прописан JavaScript. То по сути вам необходимо иметь базовое представление о HTML CSS и не трогать уже настроенный JavaScript, если вы его совершенно не знаете.

Простой раздел на часто задаваемые вопросы на HTML, CSS и JS

Так выглядит наш вопросник, который многим знаком по функционалу:

Нужно подключить шрифты с скриптом: