Основные правила CSS (Нормальный поток, BFC, IFC)

Когда пишешь HTML и CSS, разметка не всегда получается так, как задумано

У меня был опыт многократного обращения к Google за помощью.

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

- Хочу понять блочные элементы, встроенные элементы, отступы (margin) и выравнивание.

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

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

1. Нормальный поток (Normal Flow)

- Здесь особо думать не нужно. Все элементы размещаются сверху вниз и слева направо.

* Когда я вставляю HTML-теги в durumis при написании статьи, они пропадают. Не знаете ли вы, как это исправить;;

- Тег p создает два блока, а тег span отображается в одну строку.

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

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

- Способ, которым укладываются блочные элементы.

- Блочные элементы — это:

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

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

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

- Можно устанавливать ширину, высоту, отступы (margin) и внутренние отступы (padding).

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

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

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

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

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

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

- Можно применять только горизонтальные внутренние отступы (padding) и отступы (margin).

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

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

А когда это используется?

- BFC используется для обработки взаимодействия float и компенсации отступов (margin).

1. Взаимодействие float

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

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

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

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

2. Компенсация отступов (margin)

- В CSS перекрываются верхние и нижние отступы (margin) двух соседних тегов.

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

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

Примечание. Знаете ли вы, как копировать и вставлять HTML в durumis;;