6/18 не пойму, как работает display: block и display: none.

Курсы §23. Селекторы. Часть 3
1

Добрый день!
Уважаемые специалисты!
Подскажите, пожалуйста, как изменение значения display ( с block на none) открывает картинку?

  1. есть блок - div, в нем расположены рисунок и надпись.
  2. Псевдоэлемент ::before с начало вставляет перед картинкой и надписью “display: block” - сразу вопрос: "Что он этим вставил? на кого это распространяется?
  3. Затем псевдоэлемент ::before вставляет перед картинкой и надписью “display: none” - Вопрос: “Как это приводит к появлению рисунка с надписью?”
    Спасибо.
2

Свойство display со значением НЕ none для псевдоэлемента писать обязательно, иначе он изначально не будет отображаться.
А когда вы скрываете псевдоэлемент (при наведении кажется), то видите картинку, которая находится под ним.
Укажите корректный раздел для своего вопроса, пожалуйста.

3

По умолчанию поведение у псевдоэлементов display: inline, если содержимого у псевдоэлемента не будет(свойство content: “”), то и видно его самого не будет. Поэтому для декоративных каких-то элементов, где только картинка фоном например или четко заданы размеры и задают display: block. Но не всегда это делают, если есть свойство position: absolute, то делать этого не нужно, т.к. абсолютное позиционирование меняет поведение по умолчанию у псевдоэлемента(и не только у них) на display: block; (подробнее описано тут https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo )

Надеюсь не запутал)

1 лайк
4

Селекторы, часть 3 / Поиски котов. Часть 1 [6/18]

5

display: block
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

display: none
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Почему ??? так и не понял…

6

Коробка, которую вы видите на первом скрине - это и есть псевдоэлемент. Если задано display: block; то коробка отображается, display: none - коробка больше не отображается, вы видите изображение кота.

7

:before наследует стиль от элемента, к которому он добавляется. (взято из “справочника”).
А так как псевдоэлемент добавляется к элементу div, то он наследует его стиль, в том числе и размер div, т.е. псевдоэлемент занимает весь div. Правильно ?

8

похоже на то…
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Спасибо большое за ответы и участие !!!

1 лайк