Поток документов CSS, элементы блочного уровня (block) и встроенные элементы (inline). Раньше я читал много книг и статей, это лишь фрагментарные базовые знания о макете CSS, которые я читал. О'Рейли, я обнаружил, что упомянутая в ней концепция документооборота сделала меня очень чувствительным. К сожалению, в книге не объясняется, что такое документооборот. Возможно, автор подумал, что это слишком просто, чтобы его стоило упоминать. Это действительно важно. После того, как я это понял, многие теории CSS-разметки стали понятны, и я осознал рациональность CSS-дизайна, поэтому я основывал свои предположения и эксперименты, чтобы найти объяснение. Если есть какие-либо ошибки, это совершенно нормально. .
документооборот
Разделите форму на строки сверху вниз и расположите элементы в каждой строке слева направо, что соответствует потоку документов.
Каждый неплавающий элемент уровня блока занимает собственную строку, а плавающие элементы плавают на одном конце строки по мере необходимости. Если текущая строка не помещается, она будет перемещена на новую строку.
Встроенные элементы не занимают строку. Почти все элементы (включая элементы уровня блока, строчные элементы и элементы списка) могут создавать подстроки для размещения подэлементов.
Есть три ситуации, которые приводят к появлению элементов вне потока документов, а именно плавающее, абсолютное позиционирование и фиксированное позиционирование. Но в IE плавающие элементы также существуют в потоке документов (что заставляет меня думать, что это разумно><).
Плавающие элементы не занимают нормального пространства потока документов, а расположение плавающих элементов по-прежнему основано на обычном потоке документов, а затем извлекается из потока документов и перемещается насколько возможно влево или вправо. Текстовое содержимое будет заключено вокруг плавающего элемента. Когда элемент извлекается из обычного потока документов, другие элементы, все еще находящиеся в потоке документов, игнорируют этот элемент и заполняют его исходное пространство.
Запутанная концепция плавающего режима вызвана интерпретацией теории браузером. Можно только сказать, что многие люди используют IE в качестве стандарта, но на самом деле это не так.
Основываясь на документообороте, мы можем легко понять следующие шаблоны позиционирования:
относительное расположение,
То есть элемент смещается относительно своей позиции в потоке документов, но исходный заполнитель сохраняется.
абсолютное позиционирование,
То есть он полностью отделен от потока документов и смещен относительно ближайшего родительского элемента с нестатическим значением атрибута позиции.
фиксированное позиционирование,
То есть он полностью отделен от потока документов и смещен относительно области просмотра.
Есть еще несколько вопросов, в которых я не могу разобраться.
В чем состоит основное различие между встроенными элементами и элементами блочного уровня?
Как понять, когда свойство Clear принимает правильное значение? Кажется, что экспериментальная ситуация всегда не согласуется с теорией.