Когда я рисую HTML CSS, макет не получается так, как я хочу.

Я часто искал ответы на Google.

Недавно я смотрел видео разработчика Zerocho и решил узнать основы CSS.

- Я хочу понять блочные элементы, инлайн-элементы, поля и выравнивание.

Я уже знаю это эмпирически, но мне нужно систематизировать эти знания.

■ Если нужно изменить css, а я буду делать это эмпирически, пробовать разные варианты и создавать макет так, как видно, это приведет к проблемам с адаптивным дизайном или к сложностям при последующем обслуживании.

1. Нормальный поток

- Ничего особенного. Все элементы располагаются сверху вниз, слева направо.

* В Durumis при вставке html-тегов они исчезают. Вы знаете, как это исправить?;;

 <div>
     <p>Первый абзац</p>
     <p>Второй абзац</p>
     <span>Инлайн-элемент 1</span>
     <span>Инлайн-элемент 2</span>

- С помощью тега p создается два блока, а тег span рисуется в одну строку.

 Первый абзац
 Второй абзац

2. BFC (контекст форматирования блоков)

- Используется в основном при построении макетов. (Создает блоки и размещает в них инлайн-элементы.)

- Способ укладки блочных элементов.

- К блочным элементам относятся:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Элемент занимает всю ширину родительского элемента независимо от длины содержимого. (Одна строка)

- Внутри блока можно поместить другие блоки или инлайн-элементы.

- Можно задать ширину, высоту, поля и отступы.

 <div style="padding :10px;"> 
     <h1>Заголовок</h1>
     <p>Короткий абзац. </p>

- Внутри тега div создается две строки.

- BFC создается в следующих случаях. Можно посмотреть по мере необходимости.

• Если свойство float не равно none
• Если свойство position равно absolute или fixed
• Если свойство display равно inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Если свойство overflow не равно visible и т.д.
  
  

3. IFC (контекст форматирования инлайн-элементов)

<p>
    Привет! <strong> Durumis </strong> вторая статья!
    <span style="color: pink;">좋아요</button> нажмите кнопку.

- Создается внутри блочного элемента. (Не по строкам)

- Нельзя задавать ширину и высоту напрямую. (Занимает столько места, сколько нужно содержимому.)

- Можно задать только горизонтальные отступы и поля.

- Внутри инлайн-элемента можно размещать только инлайн-элементы.

<span>, <a>, , <img>, <input> и т.д.

Так когда же его использовать?

- BFC используется для обработки взаимодействия элементов с плавающими элементами или для отмены полей.

1. Взаимодействие с плавающими элементами

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

(float, position absolute, fixed, display inline-block и т.д.)

- В этом случае для построения макета используется BFC родительского элемента.

(К родительскому тегу применяются display: inline-block, overflow: auto, float: left и т.д.)

<div class="родитель" style="display: inline-block;">
    <div class="дочерний" style="float: left;">...</div>

2. Отмена полей

- В css верхние и нижние поля соседних тегов перекрываются.

Например, расстояние между двумя тегами div ниже не 150px, а 100px.

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- В этой ситуации между двумя тегами добавляется новый элемент BFC.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- Новый BFC -->

ps. Вы знаете, как вставить HTML в Durumis?;;