Inline div block: CSS — об этом сайте

Гибкие элементы, однако, участвуют в контексте гибкого форматирования, потому что их родительский элемент - это элемент с display: flex , который имеет внутренний тип отображения flex , устанавливающий контекст гибкого форматирования для прямых дочерних элементов.

Следовательно, вы можете думать о каждом блоке в CSS, работающем таким образом. Сам ящик имеет внешний вид отображения, поэтому он знает, как вести себя вместе с другими полями.Затем у него есть внутренний тип отображения, который меняет поведение его дочерних элементов. Эти дочерние элементы также имеют внешний и внутренний тип отображения. Гибкие элементы в предыдущем примере становятся блоками гибкого уровня, поэтому их внешний тип отображения определяется тем, что они являются частью контекста гибкого форматирования. Однако у них есть внутренний тип отображения поток , что означает, что их дочерние элементы участвуют в обычном потоке. Элементы, вложенные в наш гибкий элемент, раскладываются как блочные и встроенные элементы, если что-то не меняет их тип отображения.

Эта концепция внешнего и внутреннего типа отображения важна, поскольку это говорит нам о том, что контейнер, использующий метод компоновки, такой как Flexbox ( display: flex ) и Grid Layout ( display: grid ), по-прежнему участвует в блочном и встроенном макет, так как типом внешнего отображения этих методов является блок .

Изменение контекста форматирования, в котором участвует элемент.

Браузеры отображают элементы как часть блочного или встроенного контекста форматирования с точки зрения того, что обычно имеет смысл для этого элемента.Например, элемент используется для выделения слова и отображается полужирным шрифтом в браузерах. Обычно не имеет смысла отображать этот элемент как элемент уровня блока, переходя на новую строку. Если вы хотите, чтобы все элементы отображались как элементы блока, вы можете сделать это, установив display: block на . Это означает, что вы всегда можете использовать большинство семантических HTML-элементов для разметки вашего контента, а затем изменить способ его отображения с помощью CSS.

В этом руководстве мы рассмотрели, как элементы отображаются в обычном потоке, как блочные и встроенные элементы. Из-за поведения этих элементов по умолчанию, документ HTML без стилей CSS будет отображаться в удобном для чтения виде. Понимая, как работает нормальный поток, вы обнаружите, что макет будет проще, поскольку вы поймете отправную точку для внесения изменений в способ отображения элементов.

Дисплей - попутный ветер CSS

Блок

Используйте блок для создания элемента уровня блока.

  

   1 
   2 
   3 
  

  

  

    
 1 
  
  

    
 2 
  
  

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

Используйте встроенный блок для создания встроенного элемента уровня блока.

  

  
 1 
  
 2 
  
 3 
  

Встроенный

Используйте встроенный для создания встроенного элемента.

  

  
 1 
  
 2 
  
 3 
  

Flex

Используйте flex для создания гибкого контейнера на уровне блоков.

  

  
 1 
  
 2 
  
 3 
  

Inline Flex

Используйте inline-flex для создания встроенного гибкого контейнера.

  

  
 1 
  
 2 
  
 3 
  

Сетка

Используйте сетку для создания контейнера сетки.

Inline Grid

Используйте inline-grid для создания контейнера встроенной сетки.

  
   1 
   1 
   1 


   2 
   2 
   2 
  

Contents

Используйте content для создания «фантомного» контейнера, дочерние элементы которого действуют как прямые дочерние элементы родителя..

  

  
 1 
  

    
 2 
    
 3 
  
  
 4 
  

Таблица

Используйте таблицу , . table-row , .table-cell , .table-caption , .table-column , .table-column- group , .table-header-group , table-row-group и .table-footer-group для создания элементов, которые ведут себя как соответствующие им элементы таблицы.

  

  

    

      
 Ячейка с дополнительным содержимым 
      
 Ячейка 2 
      
 Ячейка 3 
    
    

      
 Ячейка 4 
      
 Ячейка с дополнительным содержимым 
      
 Ячейка 6 
    
  
  

Скрытый

Используйте hidden , чтобы установить для элемента значение display: none и удалить его из макета страницы (сравните с .invisible из документации по видимости).

  

  
 1 
  
 2 
  
 3 
  

Адаптивный

Чтобы управлять свойством отображения элемента в определенной точке останова, добавьте префикс {screen}: к любому существующему классу служебной программы отображения. Например, используйте md: inline-flex , чтобы применить утилиту inline-flex только при средних размерах экрана и выше.

Дополнительную информацию о функциях адаптивного дизайна Tailwind можно найти в документации по адаптивному дизайну.

Пользовательская настройка

Варианты

По умолчанию для утилит отображения создаются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит отображения, изменив свойство display в разделе options вашего попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ отображение: ['hover', 'focus'],
      }
    }
  }  

Если вы не планируете использовать утилиты отображения в своем проекте, вы можете полностью отключить их, установив для свойства display значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль. export = {
    corePlugins: {
      
+ display: false,
    }
  }  

CSS Inline vs Inline-Block vs Block

Хорошо, давайте заменим изображения на CSS. Помимо вопросов об алгоритме JavaScript, вы, как Front End-разработчик, также можете получить вопросы, связанные с CSS. Итак, давайте убедимся, что вы готовы, и углубим свои основы работы в Интернете!

Меня действительно спросили об этом в интервью. Я проходил собеседование на роль Front-end, поэтому готовился только к вопросам алгоритма.Так что я немного наткнулся на это 😰 Это лучшая часть ошибок, у вас есть шанс извлечь из них уроки, чтобы не повторять их снова. Вот почему я всегда рекомендую людям подавать заявки в как можно большее количество мест. Собеседование похоже на любой навык: чем больше вы практикуетесь, тем лучше вы становитесь. Теперь этот вопрос меня больше не беспокоит, потому что я буду готов! И вы тоже, давайте начнем!

а.

встроенный

Отображает элемент как встроенный элемент. Никакие свойства высоты и ширины не будут иметь никакого эффекта.

Свойство display определяет поведение отображения элемента. Это необходимо знать для управления компоновкой элемента. Существует множество ценностей собственности. Но давайте начнем с основного inline .

Отображает элемент в строке или в той же строке. Другими словами, встроенные элементы НЕ начинаются с новой строки и занимают ровно столько ширины, сколько ее содержимое. Итак, если вы попытаетесь установить любую ширину и высоту, это не будет иметь никакого эффекта.

встроенных элементов

Вот несколько элементов, которые имеют свойство по умолчанию inline :

И большинство тегов форматирования также по своей сути встроенные :

b.

inline-block

Отображает элемент как контейнер блока встроенного уровня. Вы МОЖЕТЕ установить значения высоты и ширины.

Хорошо, перейдем к inline-block . По сути, это то же самое, что и inline , за исключением того, что вы можете установить значения высоты и ширины.

г.

block

Проверить длину строки

До сих пор мы говорили о inline . Теперь перейдем к противоположному, блоку . Помните, что встроенных элемента находятся в одной строке. Итак, блок начинается с НОВОЙ строки и занимает всю доступную ширину. Это означает, что элементы блока будут занимать всю ширину его родительского элемента.

block elements

Вот несколько элементов, которые имеют свойство по умолчанию block :

Объяснение не для разработчиков

Представьте, что если вы посещаете концерт, у вас есть ряды сидений, верно.Если вы назначите своему другу место inline , он сядет рядом с вами. Итак, что касается встроенных сидений , все они являются одним и тем же физическим стулом. Вы не можете манипулировать стулом, чтобы сделать его больше или меньше. Один размер подходит всем, что они называют!

Теперь ваша подруга Дженнифер хочет присоединиться к вам, но потому что она дочь владельца стадиона. Ей назначают место inline-block . Что ж, она все еще может сидеть рядом с тобой. Потому что она «в русле» с тобой (плохой каламбур, смеется and), и, конечно же, ты хочешь, чтобы она села рядом с тобой.Однако, поскольку она дочь стадиона, ее мама хочет убедиться, что ей комфортно. Поэтому она дает ей специальное сиденье, где ее стул настраивается и может быть отрегулирован, чтобы сделать его больше или меньше. Кумовство в самом лучшем виде 🤫

Твоя одноклассница Анджелина тоже присутствует на концерте. Теперь твоей подруге Дженнифер она не очень нравится. Поэтому она просит маму выделить ей место , блок . Таким образом, Анджелина не сядет рядом с вами. Вместо этого она сидит в следующем ряду.

Окончательное решение

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

встроенный блок Форматируется так же, как встроенный элемент, но не начинается с новой строки. НО вы можете установить значения ширины и высоты.

block Элемент начнется с новой строки и займет всю доступную ширину. И вы можете установить значения ширины и высоты.

Вот наглядное изображение того, как выглядят все эти элементы iplay :

Теперь, в своем техническом собеседовании, вы можете получить ответ на следующие вопросы:

• В чем разница между inline и block
• В чем разница между inline и inline-block

Но независимо от того, какой вариант, вы должны уметь их решать! Удачи вам в интервью 👍

Ресурсы

Как выровнять элементы встроенного блока по верхней части контейнера

Многие разработчики сталкиваются с проблемами при выравнивании элементов встроенного блока. Проблема в том, что когда некоторые элементы inline-block имеют разную высоту, почему более короткий из них не выравнивается по верху контейнера? Мы собираемся показать решение этой проблемы с помощью свойств CSS.

Давайте рассмотрим пример ниже.

Создать HTML¶

• Создайте элемент
  с классом «контейнер».
• Создайте два элемента с классами small-box и big-box внутри «контейнера».

Попробуйте сами »

Добавить CSS¶

• Задайте границу, высоту и ширину« контейнера ».
• Установите отображение на «встроенный блок» и укажите границу и ширину «контейнера» и .
• Установите высоту и фон для «маленького ящика» и «большого ящика».

  .container {
  граница: 1px solid # 666666;
  ширина: 350 пикселей;
  высота: 150 пикселей;
}
.container span {
  дисплей: встроенный блок;
  граница: 1px solid # 666666;
  ширина: 40%;
}
. маленькая коробка {
  высота: 30%;
  фон: # 1c87c9;
}
.большая коробка {
  высота: 50%;
  фон: # 8ebf42;
}  

Вот окончательный результат.

Пример создания двух inline-block элементов: ¶

  

  
    
    <стиль>
      .container {
        граница: 1px solid # 666666;
        ширина: 350 пикселей;
        высота: 150 пикселей;
      }
      .container span {
        дисплей: встроенный блок;
        граница: 1px solid # 666666;
        ширина: 40%;
      }
      .маленькая коробка {
        высота: 30%;
        фон: # 1c87c9;
      }
      .большая коробка {
        высота: 50%;
        фон: # 8ebf42;
      }
    
  
  
    

       
       
    
 
  

Попробуйте сами »

Наша задача состоит в том, чтобы выровнять« коробочку »по верхней части контейнера. Значение «top» свойства vertical-align может помочь нам решить эту проблему.

Свойство vertical-align определяет вертикальное выравнивание встроенного элемента. Значение «top» выравнивает верх выровненного поддерева с верхом линейного блока.

Мы должны применить свойство vertical-align к «small-box» только для того, чтобы он начинался с верхней части контейнера.

  .small-box {
  вертикальное выравнивание: сверху;
}  

Итак, теперь наша проблема решена с помощью всего одного свойства CSS.Посмотрим полный код.

Пример выравнивания элементов inline-block по верху контейнера с помощью свойства vertical-align: ¶

  

  
    
    <стиль>
      .container {
        граница: 1px solid # 666666;
        ширина: 350 пикселей;
        высота: 150 пикселей;
      }
      .container span {
        дисплей: встроенный блок;
        граница: 1px solid # 666666;
        ширина: 40%;
      }
      . маленькая коробка {
        высота: 30%;
        фон: # 1c87c9;
        вертикальное выравнивание: сверху;
      }
      .большая коробка {
        высота: 50%;
        фон: # 8ebf42;
      }
    
  
  
    

       
       
    
  
  

Попробуйте сами »

Результат¶

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