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

    Я проходил множество интервью, и когда дело доходило до вопросов о 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. Как мне установить значение 8px для свойства 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.

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 32

      +3

      А я на интервью проверяю умение думать.

        0
        А как вы верифицируете свой метод отбора?
        +2
        > Каким способом я могу установить непрозрачность для элемента button, у которого есть атрибут disabled?

        Втупил на первом же вопросе «Зачем ее устанавливать, она и так непрозрачная».
        Заглянул под спойлер, «а ёп это про селекторы и ПРОЗРАЧНОСТЬ» )
          +1

          Ну строго говоря, прозрачность это transparency, а opacity — у нас нет прямого перевода, (хорошо, «помутнение», но так никто не говорит), хотя и «непрозрачность» звучит сбивающе с толку

            0
            «затененность»?
              0
              opacity = оптическая плотность. величина обратная прозрачности
                +1
                Полупрозрачность же. Какая в пень «непрозрачность»?
              +4
              Автор, поучитесь сперва вопросы задавать!
              Вместо:
              Каким способом я могу установить непрозрачность для элемента button, у которого есть атрибут disabled?

              вопрос должен звучать так:
              Напишите селектор для всех элементов button c установленным атрибутом disabled

                +1
                А еще называть вещи своими (или устоявшимися) именами, а не придуманными.
                «Непрозрачность» — нет такого понятия. Да и тупое оно. Особенно для того для чего вы их применяете… для ПОЛУПРОЗРАЧНЫХ элементов. НЕ в совокупности с «прозрачность» дает opacity: 1;

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

                Ответ

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

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


                > Первая часть tbody:hover нужна, чтобы установить opacity для всех строк.
                Nope. Она просто применяет стили тогда когда пользователь навел мышь на tbody. В вопросе этого не было, а значит «Первая часть tbody:hover НЕ нужна»
                  –1
                  Именно «непрозрачностью» и называется opacity в обиходе — для противопоставления прозрачности transparency. Практически все так говорят. Да, корявоенькое слово, но ничего лучшего и более устоявшегося пока никто не придумал.
                  «Полупрозрачность» некорректно (см. анекдот про большую половину класса). Бирмановскую «опасность» вообще нужно законодательно запретить, потому что с первого раза не понимает даже человек, который в курсе этого изобретения.
                    +1
                    Практически все так говорят

                    Вероятно это зависит от региона. Я первый раз слышу такое слово в этом контексте. В моём кругу общения все используют "прозрачность" или "опасити" :D
                    Слово непрозрачность я, кажется, впервые увидел, когда перевёл слово opaque.

                      –1
                      Скорее от контекста. Я переформулирую: в реальности могут говорить и «прозрачность», и «полупрозрачность», если речь идет о прозрачности вообще — а детали реализации либо не важны, либо собеседник уже знает о чём речь. Но если важно донести, что речь именно о слове opacity, а не каком-то похожем по смыслу (а это бывает сравнительно редко) — вот тогда «непрозрачность» или действительно калька «опасити».
                0

                B8 я бы написал так, без :not():


                tbody:hover tr {
                  opacity: 0.24;
                }
                
                tbody:hover tr:hover {
                  opacity: 1;
                }
                  0
                  Смысл использования not() в том, чтобы было 1 CSS-правило, а не два
                    +1
                    И tbody:hover лишний )
                      0

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

                        –1
                        < Я так понял
                        Главная проблема «решающих». Не надо ничего «додумывать». Есть задача, надо решить )
                          0
                          NO DELETE HERE
                        0

                        Я не особо привык к :not() хотя конечно уже давно пора, браузеры которые его не поддерживают давно умерли.
                        Но тут ещё вопрос в производительности, интересно какие правила менее нагружают отрисовку в браузере, у меня есть ощущение что лучше написать два правила.

                      0
                      Я о примерно таком же решении подумал когда читал вопрос.
                      Но когда увидел «сложные селекторы» и не внятное их описание, насторожился )

                      ЗЫ. Хотя о :not знаю конечно, но применять обычно не приходилось (иначе бы запомнилось)
                      –1
                      Хорошие вопросы, спасибо. Я ни разу еще не отбирал кандидатов по признаку знания CSS, но если понадобится, возьму на вооружение.
                        +1
                        Хорошие вопросы. В В18 ошибка. Margin'ы, конечно, схлопываются, но в примере он только один, поэтому child будет на 10px ниже, чем верх parent'а.
                        И opacity, конечно, устанавливает прозрачность, а не непрозрачность. Хотя бы потому что без opacity все элементы как раз не прозрачны.
                          0
                          Если вы построите границы или зададите бэкграунд колор, совсем наглядно будет, что от верха экрана child безусловно оттолкнется, вот только он все еще будет прилеплен к верху родительского контейнера. Так что в постановке вопроса автора — все верно, марджины схлопнутся и выдадут общий отступ от верхней границы родительского контейнера.
                            0
                              0
                              Меа кульпа, если бордер прописать, так и есть. Попробуйте бе без бордеров — и сразу выходит как в условии. codepen.io/anna-malickaq/pen/XWmeJyJ можно закомменченное раскомментить и сразу да, едет. но без заданных границ — нет.
                                0
                                jsfiddle.net/xcs9b4r6 Так еще веселее. Даже 1px паддинга достаточно, чтобы child отталкивался от parent, а не отталкивал его от body. Вопрос: что padding и border делают с parent такого, что меняет рассчет margin?
                                  +1
                                  Очень хотелось бы услышать объяснение автора поста, а то он пока только опечатки в личке править силён, а я ненастоящий сварщик, а сильно начинашечный.
                                  Предположу, что потому что не происходит контакта марджина родителя (даже нулевого) и чайлда, если есть хоть какой-то паддинг, а значит нет схлопывания марджинов.
                                    +2
                                    Если быть точнее, то в В18 происходит выпадание внешнего отступа.
                                    Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента
                                    Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху
                                    Что собственно и происходит в примере у Tocka, из-за паддинга у родителя дочерний элемент отступает на 50px
                                    0
                                    Они не дают марджинам схлопываться, разделяя их. Т.е. у тебя дочерний элемент уже не «касается» верха родительского элемента.
                            0
                            В16. Строчные элементы располагаются в одну строку. Правда или ложь?

                            Ложь. Строчные элементы располагаются в строке и занимают столько строк, сколько потребуется. В одну строку они располагаются только в двух случаях:
                            1. Когда строчных элементов недостаточно для более чем одной строки
                            2. Когда у родителя стоит white-space: nowrap

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое