Что такое поток документа
Понятие потока
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Использование position
Пример 1. Фиксированный слой
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1. Чтобы текст не накладывался на слой, добавлен отступ слева. Из-за того что слой feedback не существует в потоке документа, он может располагаться в любом месте кода, в данном случае внизу.
Рис. 1. Фиксированный слой
Значение absolute свойства position также выводит элемент из потока, но в отличие от fixed слой прокручивается вместе с содержимым. Кроме этого, существенное влияние на позицию оказывают свойства родителя. Возможны два основных варианта.
В первом случае все просто, элемент ведет себя как в примере 1, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задается относительно родителя.
Пример 2. Абсолютное позиционирование
XHTML 1.0 CSS 2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Положение слоя на странице
Обратите внимание, что абсолютно позиционированный элемент может выходить за верхний и левый край окна браузера, при этом не возникает полос прокрутки. Также при использовании свойства position ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.
Использование float
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для верстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:
float может добавляться к изображениям (тег ) и блочным элементам вроде
Пример 3. Плавающий элемент
XHTML 1.0 CSS 2.1 IE Cr Op Sa 5 Fx
Результат примера показан на рис. 3.
Рис. 3. Плавающий элемент
Поток документа
В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.
Использование position
Пример 3.10. Фиксированный слой
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.20. Чтобы текст не накладывался на слой, добавлен отступ слева. Из-за того что слой feedback не существует в потоке документа, он может располагаться в любом месте кода, в данном случае внизу.
Рис. 3.20. Фиксированный слой
Значение absolute свойства position также выводит элемент из потока, но в отличие от fixed слой прокручивается вместе с содержимым. Кроме этого, существенное влияние на позицию оказывают свойства родителя. Возможны два основных варианта.
В первом случае все просто, элемент ведет себя как в примере 3.10, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задаётся относительно родителя.
Пример 3.11. Абсолютное позиционирование
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.21. Браузер IE до версии 9.0 не поддерживает формат RGBA для цвета.
Рис. 3.21. Положение слоя на странице
Обратите внимание, что абсолютно позиционированный элемент может выходить за верхний и левый край окна браузера, при этом не возникает полос прокрутки. Также при использовании свойства position ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.
Использование float
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для вёрстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:
float может добавляться к изображениям (тег ), блочным элементам вроде
Пример 3.12. Плавающий элемент
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат примера показан на рис. 3.22.
Рис. 3.22. Плавающий элемент
Поток документа
Объяснение одной из основных концепций вёрстки и её составляющих: контекста форматирования, схлопывания отступов и выхода из потока.
Время чтения: 6 мин
Обновлено 13 ноября 2021
Поток — одно из важнейших базовых понятий в вёрстке. Это принцип организации элементов на странице при отсутствии стилей: если мы напишем HTML и не напишем CSS, то отображение в браузере будет предсказуемо благодаря тому, что мы абсолютно точно знаем, как браузер располагает элементы в потоке.
Даже если к странице не подключено никаких стилей, к каждому элементу всё равно будут применяться CSS-правила, «зашитые» в движке браузера. Благодаря этим правилам заголовок
крупнее заголовка
, а ссылки — синие и подчёркнутые. На основании этих правил условно все элементы на странице можно разделить на две категории: блочные (block) и строчные (inline). Например,
Если вообще не применять никаких стилей, браузер формирует из элементов нормальный поток. Поведение блочных элементов в нормальном потоке отличается от поведения строчных.
Контекст форматирования
Правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования. Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования. Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка. Например, тексты на европейских языках мы читаем и пишем слева направо сверху вниз. Это означает, что по умолчанию контекст форматирования располагает блочные элементы сверху вниз, а строчные — слева направо. Но, например, в случае с японским языком мы видим совершенно другую картину: блочные элементы будут располагаться слева направо, а строчные — сверху вниз.
Во всех примерах далее будет рассматриваться направление письма, характерное для европейских языков: слова — слева направо, блоки — сверху вниз. Но все те же объяснения можно применять и для другого направления письма.
Блочные элементы в нормальном потоке
Блочные элементы в нормальном потоке располагаются друг под другом, всегда занимая всю доступную ширину родителя. Высота блочного элемента по умолчанию равна высоте его содержимого. Три абзаца, идущие друг за другом в HTML, будут располагаться точно в таком же порядке и на странице.
Даже если ширина блочного элемента явно задана и позволяет разместить справа ещё один такой элемент, поток всё равно продолжит выстраивать их друг под другом.
Можно воспринимать блочный элемент как поплавок, который стремится всплыть на странице как можно выше. И всплывает до тех пор, пока не встретит на пути другой элемент или границу родителя.
Строчные элементы в нормальном потоке
Строчные элементы располагаются друг за другом, как слова в предложении. В зависимости от направления письма в конкретном языке элементы могут располагаться слева направо (например, в русском языке), справа налево (как, например, в иврите) и даже сверху вниз, как иероглифы в японском письме. Ширина и высота строчного элемента равна ширине и высоте содержимого. В отличие от блочного элемента, мы не можем управлять шириной и высотой строчного элемента через CSS. Несколько строчных элементов будут стремиться уместиться на одной строке, насколько хватает ширины родителя. Если ширины родителя не хватает, то лишний текст строчного элемента переносится на следующую строку.
Схлопывание и выпадение отступов
Если первому дочернему элементу в блоке задан верхний отступ или последнему элементу — нижний, то эти отступы «выпадают» во внешний мир из своего родителя.
Выпадение отступов из родителя можно предотвратить несколькими способами:
Выход из потока
Ранее мы выяснили, что все элементы по умолчанию находятся в нормальном потоке. Но это поведение можно поменять при помощи некоторых CSS-свойств. При изменении значений этих свойств элемент перестаёт взаимодействовать с остальными блоками в потоке. Говорят, что он «вышел из потока».
Тут нужно отметить, что элементы, вышедшие из потока, создают внутри себя своего рода мини-поток. Их дочерние элементы будут подчиняться правилам взаимодействия в потоке в пределах родителя.
Обтекание при помощи float
Когда мы делаем элемент плавающим, он перестаёт взаимодействовать с другими элементами блочного контекста. При этом со строчным контекстом наш плавающий блок продолжает взаимодействовать. Текстовые элементы обтекают такой блок с одной из сторон.
Позиционирование элемента при помощи position
Если задать элементу абсолютное или фиксированное позиционирование, это также приводит к выходу из потока. Но только в этом случае наш элемент не участвует даже в строчном контексте.
При абсолютном или фиксированном позиционировании элемент как бы поднимается над содержимым страницы, и становится «не виден» всем остальным блокам.
В статье приведены объяснения таким понятиям, как входящая и исходящая документация, документооборот и его структура, документопоток, его режим и цикличность, внутренняя и внешняя документация. Приведены способы выделения нужной информации и ее хранения в текущих делах и архивах при делопроизводстве.
Виды документопотоков
В наш век информации невозможно себе представить работу любой структуры производства, потребления, регулирования или распределения без документации. Работа с документацией при сегодняшнем информационном бумажном и электронном буме становится все более сложной. Меняются носители информации, меняются люди, которые ее обрабатывают, меняется правовое поле использования информации. Понятие и структура документопотока также подвергаются изменению.
Документ как единица документопотока
Что такое документопоток
Вам будет интересно: Значение слова «порядок». Определение, происхождение и употребление
Документопотоки в организации (имеются в виду и предприятия тоже) по направлению делятся на входящие и исходящие. Каждый вид потока необходимо отделять друг от друга во избежание ошибок и путаницы в работе с документами.
Исходящий документопоток составляют документы, созданные и оформленные или обработанные в организации. Всем исходящим документам обязательно присваивается порядковый номер, они проверяются на наличие необходимых реквизитов и их правильность, они должны фиксироваться в журналах с указанием даты (как правило, это дата подписания документа), исходящего номера и кода подразделения, подготовившего документ.
При невозможности обработки документопотока сразу же (его резком увеличении) необходимо увеличивать штат обрабатывающих документы сотрудников во избежание ошибок и промедлений, обходящихся организации зачастую очень дорого.
Виды документопотоков могут быть самые разные, все зависит от вида деятельности организации и методов ее работы.
Для больших организаций и предприятий правильно выстроенный документопоток так же важен, как и поток материалов или выпущенной продукции. Для больших потоков документов разрабатываются и применяются даже документационные технологические процессы.
Понятие о внешних и внутренних потоках документов
Кроме входящей и исходящей информации в организации можно выделить внутреннюю, т.е. информацию, создаваемую и используемую только внутри самой организации. Эта информация может иметь определенную степень секретности и не быть общедоступной даже внутри одного подразделения. Обмен письмами между подразделениями одной организации обычно не принят. Для документального общения используются так называемые служебные записки (докладные, объяснительные, справки), подписываемые руководителями подразделений. Кроме служебных записок в организации функционируют приказы, указания, справки, техническая документация и другая документация.
Параметры документопотока
Содержание, или функциональность
Структура документопотока
Понятие и структуру документооборота можно описать теми признаками, с помощью которых дается классификация документов и их индексация, формируется вся система ориентирования в справочном аппарате документов организации. Обычно такая структура соответствует виду и целевому назначению потока документов.
Режим и цикличность
Эти параметры определяют изменения в нагрузке поступления информации во времени. Это, например, резкое увеличение объема работ с личными делами абитуриентов учебного заведения во время приемной кампании или с документами студентов в период сессий и окончания дипломирования.
Такие изменения связаны с внутренними ритмами работы организации и обычно вполне предсказуемы и планируемы.
Изменения направления документопотоков
Эти изменения связаны с содержанием работы подразделения обработки информации. Это отличия в способах регистрирования документов, способах контроля за сроками исполнения документов, способах ознакомления с ними, и, особенно, утверждения и согласования различных документов. На изменение направлений документопотоков будут влиять еще и внутренние изменения в структуре и направлении деятельности организаций.
Объем документопотока
Объем документооборота организации включает общее количество документов во всех потоках.
Совершенствование работы с документопотоками в организации
Для совершенствования этой работы необходимо исследование всего процесса делопроизводства, установление четких рекомендаций, делающих процесс технологически грамотным: убирать дублирование при работе с документами, исключать согласование документа подразделениями, не имеющими к нему отношения. Чем больше документооборот, тем более загружен управленческий аппарат организации, или хотя бы его большая часть.
Одним из главных моментов улучшения работы персонала с документами является уровень его профессиональной подготовки на всех этапах движения документопотока, оптимальная загруженность персонала работой, четкая регламентация работы с документом в каждом подразделении.
Регламентация и стандартизация при больших документопотоках дают возможность применения механизации и автоматизации делопроизводства, снижают численность сотрудников, работающих с документами, до оптимальной количества.
К сожалению, сведения об объемах документопотоков обычно занижены, что связано с несовершенными методиками учета.
Поток документа — CSS: Позиционирование
Потоком документа в HTML называется порядок вывода элементов на страницу. В обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML-документа. Этот порядок можно менять, и этому будет посвящён данный курс.
Перед тем, как рассмотреть возможные потоки документа, стоит вспомнить, как выводятся блочные и строчные элементы.
При создании разметки блочные элементы выводятся друг под другом так, как это было указано в HTML-документе. Такая вёрстка:
ожидаемо выведет нам друг под другом три фразы:
Это достигается благодаря тому, что браузеры используют определённые правила, по которым они выводят элементы на экран. Главным свойством блочных элементов является то, что они занимают всю ширину, поэтому все блочные элементы выводятся друг под другом.
Представьте, что вы кладёте коробки в ящик. Ширины ящика недостаточно, чтобы расположить коробки рядом, поэтому единственный доступный вариант — класть их друг на друга. Именно так и ведут себя блочные элементы при отображении браузером.
Помимо блочных элементов в HTML существуют строчные элементы. Главное их отличие в том, что они занимают не всю доступную им ширину, а только ту ширину, которая необходима для отображения контента внутри элемента. Из-за этого несколько идущих подряд строчных элементов будут выведены друг за другом, без переноса строки. Данное поведение также является стандартным для всех браузеров.
Такое поведение можно сравнить с расположением небольших ящиков на полке. Места достаточно, чтобы расположить их в ряд.
Схема, при которой блочные и строчные HTML-элементы выводятся друг за другом в том порядке, в котором они размечены в файле, называется «Нормальный поток документа».
С помощью CSS-правил возможно вывести элемент из нормального потока. Существуют ещё несколько типов потока документа:
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.