Я проходил множество интервью, и когда дело доходило до вопросов о CSS, то они сводились к: "Перечислите все известные способы центрирования элемента". После 5 ответов, откровенно, это надоело. Поэтому я хочу поделиться своими любимыми вопросами о CSS, которые я задаю на интервью.
В1. Каким способом я могу установить непрозрачность для элемента button, у которого есть атрибут disabled?
Чтобы отобрать элемент, у которого установлен атрибут disabled, нужно использовать селекторы атрибутов.
button[disabled] { opacity: 0.24; }
В2. Как я могу установить непрозрачность для элемента span, который следует прямо за элементом input?
Нужно использовать смежный (+).
input + span { opacity: 0.24; }
В3. Как можно установить непрозрачность для элемента 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. Представьте, что есть таблица с данными. Назовите способ добавления непрозрачности для всех строк, кроме той, на которую навел пользователь.
Нужно использовать сложный селектор. Первая часть tbody:hover нужна, чтобы установить opacity для всех строк. Вторая часть чтобы opacity не применялось на наведенную строку, нужно использовать :not(:hover).
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. Как мне установить значение для свойства padding в единицах измерения em?
Нужно разделить 8px на 16px.
button { font-size: 16px; padding: .5em; }
В12. Я установил значение 10vw для свойства padding-left. Каким будет вычисленное значение в px, если размеры вьюпорта устройства — 480x320px?
Единица измерения vw — это процент от ширина вьюпорта. В нашем случае 10vw соответствует 10% от ширины вьюпорта, т.е от 480px. Поэтому 10vw это 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, потому что внешние отступы внутри флекс-контейнера не схлопываются.
В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.
ссылка на оригинал статьи https://habr.com/ru/post/499370/
Добавить комментарий