Display none display block: CSS Layout — width and max-width

css — Display:none не отображается с display:block в точке останова

спросил

Изменено 1 год, 9 месяцев назад

Просмотрено 582 раза

Извините, я знаю, что об этом уже спрашивали, но я просто не могу понять, почему это не работает!
У меня есть окно просмотра метатегов в голове
У меня дисплей : нет значка (полосы) в широких окнах просмотра (я начал оттуда), и он должен отображаться в меньшем размере, когда меню исчезает. (исчезновение меню работает) Я установил display:block
My SCSS:

 .fa-bars {
  дисплей: нет;
}
Экран @media и (максимальная ширина: 600 пикселей) {
  .контейнер {
    .fa-бары {
      дисплей: блок;
    }
  }
}
 

Но не работает не знаю почему пытался выбрать его только *i*, с классом
я не знаю, пожалуйста, помогите.


  • css
  • медиа-запросы
  • точки останова
  • показать-скрыть
  • показать
3

В вашем медиа-запросе это не сработает:

 .container{
            .fa-бары{
                дисплей: блок;
            }
        }
 

Должно быть:

 .container .fa-bars {
    дисплей:блок;
}
 

… если важно, чтобы .fa-bars был в .containers.
В противном случае все будет в порядке:

 .fa-bars {
    дисплей:блок;
}
 

нужен SCSS для гнездовых блоков, попробуйте сделать это так:

 .fa-bars{
    дисплей: нет;
}
Экран @media и (max-width:600px){
    .container.fa-бары {
            дисплей: блок;
    }
 

Включите оба в медиа-запросы и исправьте синтаксис CSS. попробуйте это:

 @media screen и (min-width:601px){
 .fa-бары{
   дисплей: нет;
  }
}
Экран @media и (max-width:600px){
  .container .fa-bars{
      дисплей: блок;
  }
}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Настройки дисплея | Webflow University

Домашний урок

Все уроки

Настройте свойства отображения, чтобы определить основное поведение макета элемента.

макет-дизайн

У этого видео старый пользовательский интерфейс. Скоро будет обновленная версия!

Параметры отображения, расположенные на панели «Стиль», управляют поведением макета элемента и содержимым вокруг этого элемента. Здесь вы можете контролировать, как элементы отображаются по отношению друг к другу — расположены ли они друг над другом или расположены рядом.

В этой статье мы рассмотрим каждый параметр отображения на панели «Стиль»:

  1. Блок
  2. Flexbox
  3. Сетка
  4. Встроенный блок
  5. Встроенный
  6. Отображение: нет

Блок

Блок — это параметр отображения по умолчанию для большинства элементов. Каждый элемент блока начинается с новой строки и занимает всю ширину своего родительского элемента, если не задана пользовательская ширина.

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

Flexbox

Элементы с гибкой компоновкой располагают своих прямых дочерних элементов горизонтально или вертикально.

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

При создании гибкого контейнера все непосредственные дочерние элементы этого родительского элемента становятся гибкими дочерними элементами. Вы можете добавить и переопределить макет дочерних элементов flex в настройках дочернего элемента flex.

Узнайте больше о гибких макетах.

Сетка

Элементы с сеткой располагают своих непосредственных дочерних элементов по нескольким столбцам и строкам.

Можно настроить расположение, выравнивание и распределение непосредственных дочерних элементов в компонентах сетки: контейнере, отдельных ячейках, группе ячеек или дорожках.

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

Настройки дочерних элементов сетки отображаются в верхней части панели «Стиль», когда выбран дочерний элемент контейнера сетки. Они позволяют переопределить настройки контейнера сетки для выравнивания и выравнивания.

Узнайте больше о сетке.

Сетка против Flex

Flexbox и сетка — отличные варианты компоновки. Flexbox дает вам элементы управления макетом в одном измерении — вертикальном или горизонтальном. Сетка дает вам элементы управления макетом, которые работают в двух измерениях, что отлично подходит, например, для журнальных макетов.

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

Встроенный блок

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

Элементы встроенного блока также будут переноситься, когда содержимое достигает границы родительского элемента. На панели «Стиль» вы можете применить определенные параметры ширины, высоты, отступов и полей к элементам встроенного блока.

Распространенная проблема при использовании встроенных блочных элементов заключается в том, что пробелы в HTML становятся визуальным пространством в дизайне сайта. Узнайте, как исправить проблемы с пробелами .

Встроенный

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

Отображение: нет

Чтобы полностью скрыть элемент, установите его настройку отображения на нет.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *