Разное

Как сохранить текст в формате html: Как сохранить страницу в Яндекс браузере

Содержание

Как html перевести (конвертировать) в word

Довольно часто пользователям, которые столкнулись с необходимостью конвертирования Html-страницы в Word требуется не вся информация, хранящаяся на странице, а только ее отдельная часть.

Пользователь, столкнувшийся с подобной необходимостью, может просто открыть нужную страницу и с помощью мышки выделить нужный Html-текст страницы, скопировать его посредством нажатия горячих клавиш Ctrl + C на клавиатуре и вставить этот фрагмент страницы в Word. К сожалению, подобный способ работает далеко не всегда и уж тем более, он не поможет, если требуется скопировать не информацию, хранящуюся на странице, а ее код.

Для того чтобы конвертировать Html-страницы в Word, пользователю потребуются специальные программы-конвертеры, которых сегодня довольно много на просторах интернета. Например, можно использовать TotalHTMLConverter. Это программное обеспечение позволяет сохранять Html-страницы в самых разных форматах, в том числе и в doc, который используется в Word. Интерфейс программы довольно прост, а это значит, что ей может воспользоваться каждый желающий. Для того чтобы преобразовать файл из одного формата в другой, достаточно сохранить Html-ссылку на страницу (это можно сделать с помощью нажатия правой кнопкой мыши в окне и выбрать в меню «Сохранить как…»). После того как ссылка будет сохранена на компьютере, нужно запустить это программное обеспечение, найти сохраненную ссылку на сайт, установить напротив нее галочку и в поле Convert to: выбрать пункт doc. На этом процедура конвертирования завершается.

Существует еще один способ преобразования Html-страницы в Word, но для этого потребуется две программы, первая из которых конвертирует Html в PDF, а вторая — PDF в DOC. Для преобразования Html-страницы можно скачать и установить программу doPDF. После запуска требуется выбрать сохраненную на компьютере страницу и преобразовать ее в PDF. После этого следует установить, например, TotalPDFConverter, который преобразует PDF уже непосредственно в DOC. Нужно указать папку, в которой расположен исходный файл, выбрать исходный файл PDF и целевой формат, в данном случае, это – DOC. В итоге, воспользовавшись одним из приведенных выше способов, пользователь с легкостью может перевести Html-страницу в формат, поддерживаемый Word и использовать ее в своих нуждах.

Сохранение документа в Microsoft Word

 

Процедура записи напечатанного текста на компьютер называется «Сохранение». Благодаря ей мы вносим документ на Локальный диск, в Документы, на Рабочий стол и в другие компьютерные места.

Сохранение в программе Word – это когда при помощи некоторых действий мы из напечатанного текста (документа) делаем файл, который потом можно будет открывать на компьютере, записывать на диск, на флешку, пересылать по интернету.

Допустим, мне нужно ввести много данных. За один день я точно не управлюсь. И вот я набрал какое-то количество и решил продолжить печатание завтра. Для того чтобы это было возможно, нужно частично готовый документ записать (сохранить) на компьютер. Сделав сохранение, я завтра смогу открыть напечатанный текст и продолжить работу с того места, где остановился.

Как НЕправильно сохранять

Записать текст на ПК можно несколькими способами. Поговорим о том, как это НЕ нужно делать.

Многие люди не сохраняют данные во время работы, а делают это в конце. Дело в том, что, когда Вы пытаетесь закрыть Word, уже напечатав там что-нибудь, то выскакивает окошко, в котором система «спрашивает», сохранять ли изменения.

Если нажмете на кнопку «Да», появится новое окошко, где нужно выбрать место для файла, дать ему название и кликнуть по «Сохранить».

 

Щелкнув же «Нет», компьютер закроет Ворд вместе с текстом, и открыть Вы его уже не сможете. То есть информация безвозвратно исчезнет. А если Вы щелкнете «Отмена», то компьютер оставит открытым Word вместе с напечатанным текстом. Тем самым программа дает Вам возможность что-то подправить, изменить текст.

Но лучше все-таки сохранять другим способом. И не в самом конце работы, а время от времени. Дело в том, что есть вероятность потери документа. Например, скачок электричества или зависание Windows. Если вдруг такое произойдет, Ваш текст может не запишется. Это значит, Вы его потеряете. Кстати, это касается не только программы Word, но и любого другого приложения: Paint, Excel, Photoshop и т.д.

Как правильно сохранять

Для того, чтобы сохранить набранные данные, нужно нажать на надпись «файл» в левом верхнем углу программы.

Если Вы работаете в программе Word версии 2007, то вместо «Файл» у Вас будет круглая кнопка с картинкой (цветными квадратиками) внутри.

Кликнув по ней, откроется окошко. В нем нас интересует пункт «Сохранить как…».

Щелкните по нему. Откроется новое окошко. В нем система предлагает выбрать место, куда записать файл — оно указано в верхней строке.

В примере на картинке компьютер предлагает сохранить текст в папку «Документы». Но лучше записать его на какой-нибудь Локальный диск, например, на D. Для этого в окошке нужно выбрать «Этот компьютер» с левой стороны.

После этого внутри окошка (в белой его части) откройте нужный Локальный диск, то есть нажмите по нему два раза левой кнопкой мышки.

Если Вы хотите положить документ в какую-то папку, откройте ее в этом же окошке (нажмите по ней два раза левой кнопкой мышки).

После того как Вы выбрали место, в которое хотите сохранить данные, нужно обратить внимание на нижнюю часть окошка. А точнее на пункт «Имя файла». В этой части написано название, под которым документ будет записан в компьютере. В примере на картинке это название — «Doc1». Если оно нам не подходит, то нужно его удалить и напечатать новое, подходящее название.

А теперь последний штрих. Для того, чтобы сохранить документ, нужно щелкнуть по «Сохранить».

Окошко исчезнет — и это будет означать, что данные записались в указанное место.

 

Теперь Вы можете закрыть приложение и попробовать найти сохраненный файл на компьютере в том месте, в которое его поместили. Там должен быть значок с напечатанным Вами названием или стандартным названием «Doc1» (Документ 1).

Быстрое сохранение

Когда Вы составляете документ, лучше время от времени его записывать. Напечатали абзац-другой — сохранили. Для этого есть специальная кнопка вверху программы.

Нажав на нее, документ перезапишется. То есть тот, уже сохраненный Вами вариант, заменится новым.

Дело в том, что иногда компьютер может зависнуть. Или могут неожиданно отключить электричество. В таких ситуациях велика вероятность того, что незаписанная информация потеряется.

Автор: Илья Кривошеев
Обновлено: 31.03.2020

Создание Сайта HTML в Блокноте: (100)% Руководство

Как сделать сайт с помощью текстового редактора или создание сайта html в блокноте за пару минут!

Здравствуйте,уважаемые друзья и гости блога Pribylwm.ru! Вы хотите узнать как легко и быстро делается создание сайта html в блокноте на своем компьютере или любом мобильном устройстве? В этом уроке Вы узнаете, как создать простой веб-сайт с нуля, используя Блокнот. Если Вы на Mac, Вам нужно использовать TextEdit.

Есть другие профессиональные редакторы кода, которые Вы можете использовать для редактирования кода, такие как HTML

Если у Вас Mac и Вы хотите что-то лучше, чем TextEdit, Вы можете загрузить Adobe Brackets, который работает как на Mac, так и на Windows. Я буду работать на Windows и, следовательно, используя базовую версию Блокнота. Код в этом руководстве работает в любом редакторе, поэтому просто выберите понравившийся вам редактор и начнем.

Создание сайта HTML в блокноте — Ваша первая страница в блокноте!

Windows

Чтобы открыть Блокнот в Windows 7 или более ранней версии, нажмите Пуск -> Все программы -> Стандартные -> Блокнот. Вы также можете нажать «Пуск» и выполнить поиск «Блокнот». Я буду делать это в Windows 10, которую не так давно приобрел и установил. Кстати, и Вам советую!

Mac

Откройте TextEdit и убедитесь, что для текстового редактора задан обычный текст, для этого выберите «Настройки»> «Новый документ»> «Выбрать обычный текст». Затем убедитесь, что отметили «Отображать HTML-файл как HTML-код» и «Отображать RTF-файл как RTF-код» в разделе «Открыть и сохранить».

Затем скопируйте и вставьте следующий код в редактор:

<!DOCTYPE html>
<html>
<body>

<h2>Мой первый заголовок</h2>

<p>Мой первый абзац.</p>

</body>
</html>

Сохранение файла HTML

Сохраните файл как «index.html» с расширением HTML. Это очень важно, если Вы не добавите .html в конец имени, это не сработает.

Примечание. Несмотря на то, что .html предпочтительнее, Вы также можете использовать .htm без буквы «L».

Установите кодировку UTF-8, которая является предпочтительной для файлов HTML. Кодировка ANSI предназначена только для символов США и Западной Европы.

Открытие HTML-файла в браузере

Затем перейдите в папку, в которой Вы сохранили файл, и откройте его в браузере. В этом примере мы используем Chrome, но любой современный браузер должен работать.

ПРИМЕЧАНИЕ. Если у Вас возникли проблемы с открытием файла, убедитесь, что Вы сохранили его в формате .html.

Просмотр HTML-файла в браузере

После открытия файла в вашем браузере он будет выглядеть так:

Обратите внимание на путь к файлу в

файле панели URL : /// C: /Users/WebsitesDIY/Desktop/HTML/index.html

Это полный путь к файлу на вашем компьютере

Центрирование текста

Теперь, когда Вы понимаете основы создания HTML-файла, давайте узнаем, как центрировать текст

Перейдите в созданный html-файл и добавьте теги <center> </center> к «Моему первому заголовку», например, так: <center> <h2> Мой первый заголовок </h2> </center>

Удалите <p> Мой первый абзац. </p> на данный момент.

Сохраните файл и снова откройте его в браузере. Если окно вашего браузера все еще открыто, Вы можете просто нажать кнопку «Обновить», чтобы перезагрузить страницу.

Текст заголовка должен теперь быть сосредоточен в середине веб — страницы.

Добавление видео с YouTube на Ваш сайт

Чтобы добавить видео YouTube на свой сайт: Перейдите на Youtube и найдите видео, которое хотите добавить на свой сайт.

«Щелкните правой кнопкой мыши» на видео и «Скопируйте код для вставки».

Вставка кода для вставки видео в блокнот

Вставьте код для вставки в Блокнот

Код для встраивания будет выглядеть примерно так:

<iframe width = «854» height = «480» src = «https://www.youtube.com/embed/0tWSpXrkOp4» frameborder = «0» allowfullscreen> </iframe>

Вы можете изменить ширину и высоту по своему усмотрению. Просто измените эти цифры в коде и оставьте все остальное без изменений. В этом примере мы будем использовать width = «427» и height = «240». Вы можете установить для себя все, что Вы хотите.

Сосредоточьте видео, поместив тег <center> </center> вокруг кода вставки, скопированного с YouTube.

Кроме того, давайте изменим заголовок между тегами <h2> Мой первый заголовок </h2> на «Мой первый сайт в блокноте».

Добавление ссылки на другую страницу

Теперь мы добавим ссылку, которая идет в Google, когда люди нажимают на нее.

Добавьте следующий код на свой веб-сайт прямо под видео:

<a href=»http://www.google.com»>Перейдите в Google</a>.

Обратите внимание, как ссылка центрируется с помощью тегов center. Также обратите внимание на тег <br> непосредственно перед центральным тегом — это добавляет разрыв строки между видео и ссылкой.

Теперь Вы должны увидеть ссылку под видео, которая идет в Google, если Вы нажмете на нее.

Вы можете создавать ссылки, которые идут на любую страницу, которую Вы хотите. Просто измените то, что в атрибуте href.

Если Вы хотите открыть ссылку в новом окне, когда кто-то нажимает на нее, добавьте следующий атрибут в тег ссылки: <a href=»https://www.google.com» target=»_blank»>Перейти к Google</a>

Создание 2-й страницы для вашего сайта

Теперь мы создадим вторую страницу для вашего сайта и назовем ее page2.html. Таким образом, Вы можете создавать ссылки на другие части вашего сайта вместо ссылок на Google, как мы делали ранее.

Создайте новый HTML-файл и добавьте к нему приведенный ниже код. Сохраните это и назовите это page2.html

<!DOCTYPE html>
<html>
<body>

<center>
<h2>Страница сайта №2</h2>
</center>

<center>
<p>Это моя вторая страница.</p>
</center>

</body>
</html>

В итоге должно получиться вот так:

Ваш веб-сайт теперь будет иметь вторую страницу, на которую мы можем ссылаться с первой страницы.

Ссылки на Page2 с вашей главной страницы

Теперь, когда мы создали Page2, давайте изменим ссылку на первой странице, чтобы она ссылалась на page2.html.

Откройте «index.html» и измените URL, который ссылается на Google, чтобы вместо него перейти на страницу 2:

<a href=»page2.html»>Страница 2</a>

Вы находитесь на странице 2 вашего сайта

Если Вы успешно создали свою ссылку, Вы должны перейти на страницу page.html, нажав на ссылку под видео. Если по какой-то причине ваша ссылка не работает, вернитесь на несколько шагов назад и снова следуйте инструкциям. Знание того, как добавить ссылки / URL-адреса на Ваш сайт, очень полезно. Ведь в интернете это просто большая коллекция ссылок, проиндексированных Google.

Добавление классных стилей с помощью CSS

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

Скопируйте и вставьте следующий код в верхней части страницы index.html чуть ниже тега <body>. При вставке не перезаписывайте другой код.

<head>
<style media=»screen» type=»text/css»>
a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
padding: 10px;
background-color: #00AEEF;
color: #ffffff;
border-radius: 10px;
}
</style>
</head>

 

В основном этот фрагмент кода говорит браузеру добавить цвет фона и высоту к ссылке, которую мы сделали ранее. Мы также сделали углы немного округленными, добавив радиус границы 10px. Есть много бесплатных онлайн-учебников, где Вы можете узнать больше о CSS, чтобы Ваш сайт выглядел действительно красиво.

Добавление эффекта наведения на кнопку

Последнее, что мы собираемся сделать, это добавить эффект наведения на кнопку. Эффект при наведении заставит кнопку меняться в цвете, когда Вы наводите курсор мыши.

Добавьте следующий код чуть выше закрывающего тега </style>:

a:hover {
background-color: #005170;
}

И при наведении на кнопку ссылки ее цвет будет изменяться:

Ваш сайт должен выглядеть следующим образом

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

Создание сайта HTML в блокноте — Сделай свой сайт Живым!

Чтобы мир мог видеть Ваш сайт, его необходимо загрузить на веб-сервер, который постоянно подключен к Интернету 24/7. Теперь мы не рекомендуем настраивать собственный сервер. Гораздо проще платить 3 или 5 долларов в месяц профессиональному провайдеру веб-хостинга, который сделает это за Вас. Я рекомендую использовать McHost и подписаться на тарифный план на год или более для запуска вашего сайта и получения БЕСПЛАТНОГО доменного имени и множество дополнительных бонусов. Этот сайт размещен на McHost, и нам это нравится. Они быстрые, безопасные и имеют отличное обслуживание клиентов.

Теперь Вы знаете как быстро и легко, даже для новичка, делается создание сайта html в блокноте на простом компьютере или мобильном устройстве! Всем удачи и благополучия! До новых встреч!

Расширенное форматирование текста — Изучите веб-разработку

В HTML есть много других элементов для форматирования текста, о которых мы не узнали в статье «Основы текста HTML». Элементы, описанные в этой статье, менее известны, но все же полезно знать о них (и это еще не полный список). Здесь вы узнаете о разметке цитат, списках описаний, компьютерном коде и другом связанном тексте, нижнем и верхнем индексах, контактной информации и многом другом.

Предварительные требования: Базовое знакомство с HTML, как описано в Приступая к работе с HTML.Форматирование текста HTML в соответствии с основами работы с текстом HTML.
Цель: Чтобы узнать, как использовать менее известные элементы HTML для разметки расширенных семантических функций.

В основах текста HTML мы рассмотрели, как размечать базовые списки в HTML, но мы не упомянули третий тип списка, с которым вы иногда будете сталкиваться — списки описаний . Целью этих списков является разметка набора элементов и связанных с ними описаний, таких как термины и определения или вопросы и ответы.Давайте посмотрим на пример набора терминов и определений:

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

Списки описаний используют оболочку, отличную от других типов списков —

; кроме того, каждый термин заключен в элемент
(термин описания), а каждое описание заключено в элемент
(определение описания). Завершим разметку нашего примера:

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

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

Обратите внимание, что разрешено иметь один термин с несколькими описаниями, например:

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

Активное обучение: разметка набора определений

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

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

Игровой код
   

Прямой вывод

Редактируемый код

Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции).

  html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0,7 бэр;
  ширина: 98%;
}

body {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}  
  const textarea = document.getElementById ('код');
const reset = document.getElementById ('сбросить');
const решение = document.getElementById ('решение');
константный вывод = document.querySelector ('. output');
const code = textarea.value;
пусть userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.значение = код;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  if (solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

const htmlSolution = '
\ n
Бэкон
\ n
Клей, связывающий мир воедино.
\ n
Яйца
\ n
Клей, который скрепляет торт.
\ n
Кофе
\ n
Напиток, который получает мир бегает по утрам.
\ n
светло-коричневого цвета.
\ n
'; let solutionEntry = htmlSolution; textarea.addEventListener ('ввод', updateCode); window.addEventListener ('загрузка', updateCode); textarea.onkeydown = function (e) { if (e.keyCode === 9) { e.preventDefault (); insertAtCaret ('\ t'); } если (е.keyCode === 27) { textarea.blur (); } }; function insertAtCaret (text) { const scrollPos = textarea.scrollTop; const caretPos = textarea.selectionStart; const front = (textarea.value) .substring (0, caretPos); const back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length); textarea.value = лицевая сторона + текст + обратная сторона; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus (); textarea.scrollTop = scrollPos; } textarea.onkeyup = function () { if (solution.value === 'Показать решение') { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode (); };

HTML также имеет функции, доступные для разметки цитат; Какой элемент вы используете, зависит от того, размечаете ли вы блок или встроенную цитату.

Цитаты

Если раздел содержимого уровня блока (будь то абзац, несколько абзацев, список и т. Д.) Цитируется откуда-то еще, вы должны заключить его в элемент

, чтобы обозначить это, и включить URL-адрес, указывающий на источник цитаты, внутри атрибута cite .Например, следующая разметка взята со страницы элемента MDN
:

  

Элемент HTML & lt; blockquote & gt; (или блок HTML Элемент Quotation ) указывает, что заключенный текст является расширенной цитатой.

Чтобы превратить это в цитату, мы просто сделаем это:

  

Вот цитата ниже ...

Элемент HTML & lt; blockquote & gt; (или блок HTML Элемент Quotation ) указывает, что заключенный текст является расширенной цитатой.

Стиль по умолчанию для браузера будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это.

Встроенные цитаты

Встроенные цитаты работают точно так же, за исключением того, что они используют элемент .Например, следующий фрагмент разметки содержит цитату из страницы MDN :

  

Элемент цитаты - & lt; q & gt; - это предназначено для коротких цитат, не требующих разрывов абзаца.

Стиль браузера по умолчанию будет отображать это как обычный текст, заключенный в кавычки для обозначения цитаты, например:

Цитаты

Содержание атрибута cite кажется полезным, но, к сожалению, браузеры, программы чтения с экрана и т. Д.не особо с этим делай. Невозможно заставить браузер отображать содержимое cite без написания собственного решения с использованием JavaScript или CSS. Если вы хотите сделать источник цитаты доступным на странице, вам необходимо сделать его доступным в тексте по ссылке или другим подходящим способом.

Есть элемент , но он предназначен для содержания заголовка цитируемого ресурса, например название книги. Однако нет причин, по которым вы не могли каким-либо образом связать текст внутри с источником цитаты:

  

Согласно страница цитат MDN :

Элемент HTML & lt; blockquote & gt; (или блок HTML Элемент Quotation

Размер страницы и ориентация - Пейджинг - mPDF Manual

Руководство по mPDF - Пейджинг
  • О mPDF
    • Функции
    • Требования
    • Требования
    • Ограничения
    • Кредиты
    • История изменений
    • Лицензия
  • Установка и настройка
    • Установка v7.х +
    • Использование mPDF без Composer
    • Уменьшение использования памяти
    • Папки для временных файлов
    • Лесозаготовки
    • Установка v6.x
  • Начало работы
    • Создание первого файла
    • HTML или PHP?
  • Шрифты и языки
    • Шрифты в mPDF 7.x
    • Шрифты в mPDF 6.x
    • Шрифты в mPDF 5.х
    • О файлах PDF
    • Макет OpenType (OTL)
    • Названия шрифтов
    • Доступные шрифты v6 и v7
    • Доступные шрифты v5.x
    • Выбор конфигурации v7.x
    • Выбор конфигурации v6.x
    • Выбор конфигурации v5.x
    • Автоматический выбор шрифта
    • язык 6.x
    • lang v5.х
    • Входная кодировка
    • Двунаправленный текст (RTL) v6.x
    • Арабский (RTL) текст v5.x
    • CJK Языки
    • Шрифт по умолчанию
    • Замена шрифта 7.x
    • Замена шрифта 6.x
    • Замена шрифта 5.x
    • Замена символов
    • Обложка шрифтов и языков, версия 5.x
    • индийские шрифты v5.х
  • Конфигурация
    • Конфигурация v7.x
    • Файлы конфигурации v6.x
    • Методы конфигурации
    • Переменные конфигурации
  • Поддержка HTML
    • HTML-теги
    • Атрибуты HTML
    • Пользовательские теги HTML
  • Таблицы
    • Таблицы
    • Макет стола
    • Алгоритм автоматической компоновки
    • Пограничный обвал
  • Пейджинг
    • Разрывы страниц

Формат ввода текста для DMatrix - xgboost 1.4.0-SNAPSHOT документация

Основной формат ввода

XGBoost в настоящее время поддерживает два текстовых формата для приема данных: LibSVM и CSV. Остальная часть этого документа описывает формат LibSVM. (См. Эту статью в Википедии для описания формата CSV.). Пожалуйста, будьте осторожны, XGBoost не понимает расширения файлов и не пытается угадать формат файла, так как не существует универсального соглашения по расширению файлов LibSVM или CSV. Вместо этого он использует формат URI для указания точного типа входного файла.Например, если вы предоставите файл csv ./data.train.csv в качестве входных данных, XGBoost будет слепо использовать синтаксический анализатор libsvm по умолчанию, чтобы обработать его и сгенерировать ошибку синтаксического анализатора. Вместо этого пользователям необходимо предоставить uri в виде train.csv? Format = csv . Для ввода во внешнюю память uri должен иметь форму, аналогичную train.csv? Format = csv # dtrain.cache . См. Также раздел «Интерфейс данных» и «Использование версии внешней памяти XGBoost».

Для обучения или прогнозирования XGBoost берет файл экземпляра в следующем формате:

 1 101: 1.2 102: 0,03
0 1: 2,1 10001: 300 10002: 400
0 0: 1,3 1: 0,3
1 0: 0,01 1: 0,3
0 0: 0,2 1: 0,3
 

Каждая строка представляет один экземпляр, а в первой строке «1» - метка экземпляра, «101» и «102» - это индексы характеристик, «1,2» и «0,03» - значения характеристик. В случае двоичной классификации «1» используется для обозначения положительных образцов, а «0» используется для обозначения отрицательных образцов. Мы также поддерживаем значения вероятности в [0,1] в качестве метки, чтобы указать вероятность того, что экземпляр является положительным.

Вспомогательные файлы для дополнительной информации

Примечание: вся информация ниже применима только к одноузловой версии пакета. Если вы хотите выполнить распределенное обучение с несколькими узлами, перейдите к разделу «Встраивание дополнительной информации в файл LibSVM».

Формат группового ввода

Для задачи ранжирования XGBoost поддерживает формат ввода группы. В задаче ранжирования экземпляры классифицируются по группам запросов в реальных сценариях. Например, в сценарии обучения ранжированию веб-страниц экземпляры веб-страниц группируются по их запросам. XGBoost требует файл, который указывает информацию о группе.Например, если файл экземпляра - это train.txt , показанный выше, файл группы должен называться train.txt.group и иметь следующий формат:

Это означает, что набор данных содержит 5 экземпляров, причем первые два экземпляра находятся в группе, а остальные три - в другой группе. Цифры в файле группы фактически указывают количество экземпляров в каждой группе в файле экземпляров по порядку. Во время настройки указывать путь к файлу группы необязательно.Если имя файла экземпляра - xxx , XGBoost проверит, есть ли в том же каталоге файл с именем xxx.group .

Файл веса экземпляра

Экземплярам в обучающих данных могут быть присвоены веса t

Модель визуального форматирования

Модель визуального форматирования

В этой и следующей главах описывается модель визуального форматирования: как пользователь агенты обрабатывают дерево документов для визуальных медиа.

В модели визуального форматирования каждый элемент в дереве документа генерирует ноль или более ящиков в соответствии с ячейкой модель.Расположение этих блоков регулируется:

Свойства, определенные в этой и следующей главах, применяются к обоим непрерывные СМИ и страничные СМИ. Тем не менее значение маржи Свойства меняются при применении к страничным носителям (подробности см. в модели страницы).

Модель визуального форматирования не определяет все аспекты форматирование (например, в нем не указан алгоритм межбуквенного интервала). Соответствующие пользовательские агенты могут вести себя иначе для тех проблем форматирования, которые не рассматриваются в этом Спецификация.

9.1.1 Область просмотра

Пользовательские агенты для непрерывных носителей обычно предлагают пользователям viewport (окно или другое область просмотра на экране), через которую пользователи обращаются к документ. Пользовательские агенты могут изменять макет документа, когда размер области просмотра изменяется (см. исходный содержащий блок).

Когда область просмотра меньше, чем область холста, на котором документ отображается, пользовательский агент должен предлагать прокрутку механизм. Есть самое большее одно окно просмотра на холст, но пользователь агенты могут отображать более одного холста (т.е., предоставить разные виды того же документа).

9.1.2 Содержащие блоки

В CSS 2.1 многие положения и размеры блоков вычисляются с учетом к краям прямоугольной коробки под названием , содержащей блок . В в общем, сгенерированные блоки действуют как содержащие блоки для потомков коробки; мы говорим, что бокс «устанавливает» содержащий его блок потомки. Фраза «блок, содержащий блок» означает « содержащий блок, в котором находится "ящик", а не тот, который он генерирует.

Каждой коробке дается позиция относительно содержащего ее блока, но он не ограничен этим содержащим блоком; он может переполниться.

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

В следующих разделах описаны типы ящиков, которые могут быть генерируется в CSS 2.1. Тип коробки частично влияет на ее поведение в модель визуального форматирования. Свойство display, описанное ниже, указывает тип коробки.

9.2.1 Элементы уровня блока и блоки блоков

Элементы уровня блока - это те элементы исходного документа, которые визуально отформатированы как блоки (например, абзацы). Следующие значения свойства display делают элемент уровень блока: «блок», «элемент списка» и «таблица».

Блочно-уровневый боксы - это боксы, которые участвуют в контекст форматирования блока. Каждый элемент уровня блока генерирует основных блока уровня блок , содержащий блоки потомков и сгенерированный контент, а также ящик, участвующий в любой схеме позиционирования.Некоторые элементы уровня блока могут создавать дополнительные блоки в дополнение к основное поле: элементы 'list-item'. Эти дополнительные коробки размещены по отношению к основной коробке.

За исключением ящиков для таблиц, которые описаны в следующей главе, и замененные элементы, блок уровня блока также является блоком контейнера блока. Блок контейнерный ящик либо содержит только блоки уровня блока или устанавливает встроенное форматирование context и, следовательно, содержит только блоки встроенного уровня. Не весь блок Контейнерные боксы - это блоки уровня блока: незамещенные встроенные блоки и незамещенные ячейки таблицы являются блочными контейнерами, но не уровнями блоков коробки.Блоки уровня блока, которые также являются блок-контейнерами, называется блок ящики .

Три термина «блок уровня блока», «блок контейнера блока» и "блок-бокс" иногда сокращается до "блок", что недвусмысленно.

9.2.1.1 Анонимные блок-боксы

В таком документе:

 
Какой-то текст

Еще текст

(и предполагая, что у DIV и P есть 'display: block'), DIV, похоже, имеет как встроенный контент, так и контент блока.Сделать это проще определить форматирование, мы предполагаем, что есть блок анонимного блока вокруг «Какой-то текст».

[D]

Диаграмма, показывающая три ящика, один из которых анонимный, для примера выше.

Другими словами: если блок контейнера блока (например, созданный для DIV выше) имеет внутри блок уровня блока (например, P выше), затем мы заставляем его иметь только блоков уровня блока внутри него.

Если встроенный блок содержит блок на уровне входящего потока, встроенный блок (и его встроенные предки в том же строчном поле) разбиты вокруг блок уровня блока (и все братья и сестры уровня блока, которые являются последовательными или разделены только разборными пробелами и / или вне потока элементов), разделив встроенный блок на два блока (даже если сторона пуста), по одному с каждой стороны блока (ов) уровня блока.Линия коробки до перерыва и после break заключены в анонимные блоки блоков, а блок уровня блока становится братом этих анонимных ящиков. Когда такой встроенный блок зависит от относительного позиционирования, любой результирующий перевод также влияет на блок уровня блока, содержащийся во встроенном блоке.

Пример (ы):

Эта модель применима в следующем примере, если следующие правила:

 
p {display: inline}
span {display: block}
  

были использованы с этим HTML-документом:

 

<ГОЛОВА>
 Анонимный текст прерван блоком 

<ТЕЛО>

Это анонимный текст перед SPAN. Это содержание SPAN. Это анонимный текст после SPAN.

Элемент P содержит фрагмент (C1) анонимного текста, за которым следует элементом уровня блока, за которым следует другой фрагмент (C2) анонимного текст. Получающиеся коробки будут блоком, представляющим ТЕЛО, содержащий анонимный блок вокруг C1, блок блока SPAN и еще один анонимный блок-бокс вокруг C2.

Свойства анонимных ящиков унаследованы от включающий неанонимный блок (например, в примере чуть ниже заголовка подраздела «Анонимные блоки блоков», тот для DIV). Неунаследованные свойства имеют начальное значение. Например, шрифт анонимного блока унаследован от DIV, но поля будут равны 0.

Свойства, установленные для элементов, которые вызывают анонимные блоки блоков сгенерированные по-прежнему применяются к блокам и содержимому этого элемента. За Например, если граница была установлена ​​на элементе P в приведенном выше Например, граница будет нарисована вокруг C1 (открыта в конце line) и C2 (открываются в начале строки).

Некоторые пользовательские агенты реализовали границы встроенных строк, содержащих блоки другими способами, например, обернув такие вложенные блоки внутри "анонимные линейные блоки" и, таким образом, рисуя строчные границы вокруг таких коробки. Поскольку CSS1 и CSS2 не определяют это поведение, CSS1-only и Пользовательские агенты, поддерживающие только CSS2, могут реализовать эту альтернативную модель и по-прежнему заявить о соответствии этой части CSS 2.1. Это не относится к UA. разработан после выпуска этой спецификации.

Анонимные блоки блоков игнорируются при разрешении процентных значений который будет относиться к нему: используется ближайший неанонимный предок вместо.Например, если дочерний элемент анонимного блока внутри DIV выше должен знать высоту содержащего его блока, чтобы разрешить процентную высоту, тогда он будет использовать высоту содержащий блок, образованный DIV, а не анонимным блоком.

9.2.2 Встроенные элементы и встроенные блоки

Встроенный уровень элементы - это те элементы исходного документа, которые не формировать новые блоки контента; контент распределен по строкам (например, выделенные фрагменты текста в абзаце, встроенные изображения, и т.п.). Следующие значения свойства display делают элемент inline-level: inline, inline-table и inline-block. Элементы встроенного уровня генерируют встроенных элементов боксы , которые представляют собой боксы, участвующие во встроенном контекст форматирования.

Линейный поле является одновременно встроенным и чьи содержимое участвует в содержащем его встроенном контексте форматирования. А незамещенный элемент со значением 'display' равным 'inline' генерирует встроенный ящик. Блоки встроенного уровня, которые не являются встроенными блоками (например, замененные элементы встроенного уровня, элементы встроенного блока и встроенные таблицы элементы) называются атомарными блоками строкового уровня , потому что они участвуют в своем встроенном контексте форматирования как один непрозрачный коробка.

9.2.2.1 Анонимные встроенные блоки

Любой текст, который непосредственно содержится внутри элемента контейнера блока (не внутри встроенного элемента) должны рассматриваться как анонимные встроенные элемент.

В документе с такой разметкой HTML:

 

Некоторый выделенный текст

создает блок-бокс с несколькими встроенными блоками внутри Это. Поле для «подчеркнутого» - это встроенный блок, созданный встроенным элемент ( ), но другие поля («Некоторые» и «текст») являются встроенными блоками, генерируемыми элементом уровня блока (

).Последние называются анонимными встроенными коробки, потому что они не имеют связанного элемента встроенного уровня.

Такие анонимные встроенные блоки наследуют наследуемые свойства от их родительский блок блока. У ненаследственных свойств есть начальные значение. В этом примере цвет анонимных встроенных полей унаследован от P, но фон прозрачный.

Содержимое пустого пространства, которое впоследствии будет свернуто в соответствии со свойством 'white-space', не создает никаких анонимных встроенных блоков.

Если из контекста ясно, какой тип анонимного ящика означает, что анонимные встроенные блоки и анонимные блоки блоков в этой спецификации просто называются анонимными блоками.

Есть и другие типы анонимных ящиков, которые возникают при форматировании таблицы.

9.2.3 Боксы для обкатки

[Этот раздел существует таким образом, что номера разделов такие же, как в предыдущие черновики. 'Дисплей: run-in 'теперь определен в CSS уровня 3 (см. базовую блочную модель CSS).]

9.2.4 Свойство отображения

'дисплей'
Значение: встроенный | блок | элемент списка | встроенный блок | стол | встроенный стол | таблица-строка-группа | таблица-заголовок-группа | стол-нижний колонтитул | стол-ряд | таблица-столбец-группа | таблица-столбец | таблица-ячейка | заголовок таблицы | нет | наследовать
Начальный: встроенный
Применимо к: все элементы
Унаследовано: нет
В процентах: Н / Д
Медиа: все
Расчетное значение: см. Текст

Значения этого свойства имеют следующие значения:

блок
Это значение заставляет элемент создавать блок-бокс.
рядный блок
Это значение заставляет элемент генерировать блок встроенного уровня контейнер. Внутренняя часть встроенного блока форматируется как блок-блок, а сам элемент отформатирован как атомарный блок встроенного уровня.
рядный
Это значение заставляет элемент генерировать один или несколько встроенных блоков.
позиция списка
Это значение заставляет элемент (например, LI в HTML) создавать блок основного блока и блок маркера.Для информации о списки и примеры форматирования списков см. в разделе списки.
нет
Это value заставляет элемент не отображаться в структуре форматирования (т. е. в визуальных средствах массовой информации элемент не создает рамок и не влияет на макет). Дочерние элементы также не создают ящиков; то элемент и его содержимое удаляются из структуры форматирования целиком. Это поведение не может быть отменено установка свойства 'display' по потомкам.

Обратите внимание, что отображение «none» не создает невидимого коробка; он вообще не создает коробки. CSS включает механизмы, которые позволяют элемент для создания блоков в структуре форматирования, влияющих на форматирование но сами не видны. Пожалуйста, обратитесь к разделу о видимости для подробностей.

стол, встроенный стол, таблица-строка-группа, таблица-столбец, таблица-столбец-группа, , , стол-ряд, таблица-ячейка и заголовок таблицы
Эти значения заставляют элемент вести себя как элемент таблицы (с учетом ограничений, описанных в главе о таблицах).

Вычисленное значение совпадает с указанным значением, за исключением позиционированные и плавающие элементы (см. Взаимосвязь между 'display', 'position' и 'float') и для корневого элемента. Для корневого элемента вычисленное значение изменяется, как описано в раздел о взаимосвязях между 'display', 'position' и 'float'.

Обратите внимание, что хотя начальная значение 'display' равно 'inline', правила в таблице стилей по умолчанию пользовательского агента могут переопределить это значение.См. Образец таблицы стилей для HTML 4 в приложение.

Пример (ы):

Вот несколько примеров свойства display:

 
p {display: block}
em {display: inline}
li {display: list-item}
img {display: none} / * Не отображать изображения * /
  

В CSS 2.1 блок может быть расположен в соответствии с тремя позициями . схемы:

  1. Нормальный расход. В CSS 2.1 нормально поток включает форматирование блока блочных боксов, встроенное форматирование ящиков на уровне строки и относительное расположение блоки уровня блока и встроенного уровня.
  2. Поплавки. В поплавковой модели ящик сначала выкладывается по нормальному потоку, потом вынут из потока и сдвинут влево или вправо насколько возможно. Контент может течь вдоль поплавка.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования поле удаляется из нормальный поток полностью (это не влияет на более поздних братьев и сестер) и присвоил позицию относительно содержащего блока.

Элемент называется из поток , если он плавающий, абсолютно позиционированный или корневой элемент.Элемент называется в потоке , если он не выходящий из потока. В расход элемента A - это комплект, состоящий из A и всех впускных элементы, ближайший предок которых вне потока - A .

Примечание. Схемы позиционирования CSS 2.1 помогают авторам создавать свои документы более доступным, позволяя им избегать уловок с разметкой (например, невидимые изображения), используемые для эффектов макета.

9.3.1 Выбор схемы позиционирования: свойство 'position'

Свойства 'position' и 'float' определяют, какие CSS 2.1 алгоритм позиционирования используется для расчета положение коробки.

'позиция'
Значение: статическое | родственник | абсолютный | фиксированный | наследовать
Начальное: статическое
Применимо к: все элементы
Унаследовано: нет
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: как указано

Значения этого свойства имеют следующие значения:

статический
Коробка нормальная коробка, выложенная по нормальному потоку.В 'Топ', 'правильно', 'дно', и влево' свойства не применяются.
родственник
Положение коробки рассчитывается в соответствии с нормальным потоком (это называется положением в нормальный расход). Затем коробка смещается относительно своего нормального положения. когда блок B расположен относительно, положение следующего блока рассчитывается так, как если бы B не был компенсирован. Влияние 'position: relative' на элементы table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell и table-caption. не определено.
абсолютное
Положение коробки (и, возможно, размер) указано с "верхом", 'правильно', "дно" и 'слева' свойства. Эти свойства определяют смещения по отношению к боксу. содержащий блок. Абсолютно расположенные коробки выводятся из нормального потока. Это означает они не влияют на расположение более поздних братьев и сестер. Также, хотя абсолютно позиционируется коробки имеют поля, они не рухнуть с любыми другими полями.
фиксированный
Положение ящика рассчитывается по абсолютному модель, но кроме того, коробка закреплена относительно некоторой ссылки.Как и в случае с «абсолютной» моделью, поля блока не сжимаются с другими полями. В случае портативных, проекционных, экранных, tty и телевизионных типов носителей: бокс зафиксирован относительно области просмотра и не двигается, когда прокручивается. В случае с типом печатного носителя блок отображается на каждой странице и фиксируется по отношению к блоку страницы, даже если страница просматривается через область просмотра. (например, в случае предварительного просмотра). Для других СМИ типы, представление не определено.Авторы могут пожелать указать «исправлено» в медиа-зависимый способ. Например, автор может захотеть, чтобы коробка оставалась вверху области просмотра на экране, но не вверху каждой распечатанной страницы. Две спецификации могут быть разделены с помощью @media правило, например:

Пример (ы):

 
@media screen {
  h2 # first {position: fixed}
}
@media print {
  h2 # first {position: static}
}
  

UA не должны разбивать на страницы содержимое фиксированных ящиков. Обратите внимание, что UA могут печатать невидимый контент в других способами.См. "Контент за пределами страничный бокс »в главе 13.

Пользовательские агенты могут обрабатывать позицию корневого элемента как «статическую».

9.3.2 Смещения прямоугольника: «вверху», «вправо», «внизу», «влево»

Элемент считается позиционированным если его свойство 'position' имеет значение, отличное от static. Позиционированные элементы создают расположенные коробки, расположенные в соответствии с четырьмя свойствами:

'верх'
Значение: <длина> | <процент> | авто | наследовать
Начальное: авто
Применимо к: позиционируемым элементам
Унаследовано: нет
Проценты: относятся к высоте содержащего блока
Медиа: визуальный
Вычисленное значение: , если указанная как длина, соответствующая абсолютная длина; если указанное в процентах указанное значение; в противном случае - «авто».

Это свойство указывает, насколько далеко верхняя часть абсолютно позиционированного блока край поля смещен ниже верхнего края содержащего блока блока. Для относительно расположенные коробки, смещение относительно верхних краев сам бокс (т.е. бокс получает позицию в нормальном потоке, затем смещение от этой позиции в соответствии с этими свойствами).

'правый'
Значение: <длина> | <процент> | авто | наследовать
Начальное: авто
Применимо к: позиционируемым элементам
Унаследовано: нет
Проценты: относятся к ширине содержащего блока
Медиа: визуальный
Вычисленное значение: , если указанная как длина, соответствующая абсолютная длина; если указанное в процентах указанное значение; иначе, 'авто'.

Аналогично 'top', но указывает, насколько далеко находится правый край поля смещение слева от правого края содержащего блока блока. Для относительно расположенные боксы, смещение относительно правого края сам ящик.

нижний
Значение: <длина> | <процент> | авто | наследовать
Начальное: авто
Применимо к: позиционируемым элементам
Унаследовано: нет
Проценты: относятся к высоте содержащего блока
Медиа: визуальный
Вычисленное значение: , если указанная как длина, соответствующая абсолютная длина; если указанное в процентах указанное значение; в противном случае - «авто».

Аналогично 'top', но указывает, насколько далеко нижний край поля находится смещение над нижней частью содержащего блока блока. Для относительно расположенные боксы, смещение относительно нижнего края сам ящик.

'левый'
Значение: <длина> | <процент> | авто | наследовать
Начальное: авто
Применимо к: позиционируемым элементам
Унаследовано: нет
Проценты: относятся к ширине содержащего блока
Медиа: визуальный
Вычисленное значение: , если указанная как длина, соответствующая абсолютная длина; если указанное в процентах указанное значение; иначе, 'авто'.

Аналогично 'top', но указывает, насколько далеко левый край поля находится смещение вправо от левого края содержащего блока блока. Для относительно расположенные боксы, смещение относительно левого края сам ящик.

Значения для четырех свойств имеют следующие значения:

<длина>
Смещение является фиксированным расстоянием от опорного края. Допускаются отрицательные значения.
<процент>
Смещение - это процент от ширины содержащего блока (для «левого» или «правого») или высоты (для «верха» и «низа»).Допускаются отрицательные значения.
авто
Для незамещенных элементов влияние этого значения зависит от того, какое из связанных свойств имеет значение "авто" как хорошо. См. Разделы на ширина и высота абсолютно позиционированных, незаменимые элементы для деталей. Для замененных элементов влияние этого значения зависит только от внутренних размеров замененный контент. Смотрите разделы по ширине и высоте абсолютно позиционировал, заменял элементы на детали.

Блоки в нормальном потоке принадлежат контексту форматирования, который может быть блочный или встроенный, но не оба одновременно. Блоки уровня блока участвуют в контексте форматирования блока. Блоки встроенного уровня участвуют во встроенном контексте форматирования.

9.4.1 Контексты форматирования блоков

Плавающие элементы, элементы с абсолютным позиционированием, блочные контейнеры (например, inline-block, table-cells и table-captions), которые не являются блочными боксы и блоки с "переполнением", отличным от "видимого" (кроме случаев, когда это значение было распространено на область просмотра) установить новые контексты форматирования блоков для их содержимого.

В контексте форматирования блока блоки располагаются один после другой, вертикально, начиная с вершины содержащего блока. В расстояние по вертикали между двумя одноуровневыми полями определяется свойствами поля. Вертикальные поля между соседними блоками уровня блока в схлопывании контекста форматирования блока.

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

Информацию о разрывах страниц в страничных носителях см. раздел о разрешенных разрывы страниц.

9.4.2 Контексты встроенного форматирования

В контексте встроенного форматирования блоки располагаются горизонтально, один за другим, начиная с вершины содержащего блок. Горизонтальные поля, границы и отступы соблюдаются между эти коробки. Ящики могут быть выровнены по вертикали разными способами: нижняя или верхняя часть может быть выровнена, или базовые линии текста внутри них могут быть выровнены.Прямоугольная область, содержащая блоки, образующие Линия называется , строка .

Ширина линейного бокса определяется содержащим блоком и наличием поплавков. Высота строки box определяется правилами, приведенными в разделе о расчете высоты строки.

Строка всегда достаточно высока для всех содержащихся в ней коробок. Однако он может быть выше самого высокого содержащегося в нем ящика. (если, например, прямоугольники выровнены так, что базовые линии совпадают).Когда высота бокса B меньше, чем высота строчного бокса, содержащего его, вертикальное выравнивание B внутри линейного блока определяется свойство 'vertical-align'. Когда несколько боксов встроенного уровня не могут уместиться по горизонтали в одном линии, они распределяются между двумя или более вертикально расположенными строчные коробки. Таким образом, абзац представляет собой вертикальную стопку строк. Линия ящики штабелируются без вертикального разделения (кроме случаев, указанных в другом месте), и они никогда не пересекаются.

Как правило, левый край линейной рамки касается левого края содержащего его блока, и правый край касается правого края его содержащий блок.Однако плавающие ящики могут оказаться между содержащий край блока и край линейного блока. Таким образом, хотя строка поля в одном и том же встроенном контексте форматирования обычно имеют одинаковые ширины (содержащей блок), они могут отличаться по ширине, если доступное горизонтальное пространство уменьшается из-за поплавков. Строчные поля с одинаковым встроенным форматированием контекст обычно различается по высоте (например, одна строка может содержать высокий изображение, а остальные содержат только текст).

Когда общая ширина боксов встроенного уровня на линии меньше, чем ширина строки, содержащей их, их горизонтальное распределение внутри строчного поля определяется свойством text-align.Если это свойство имеет значение justify, пользовательский агент может растягивать пробелы и слова в строковых блоках (но не строчные таблицы и строковые блоки коробки).

Когда встроенный блок превышает ширину строчного блока, он разделяется на несколько блоков, и эти блоки распределяются по нескольким строчным блокам. Если встроенный блок не может быть разделен (например, если встроенный блок содержит один символ, или правила разбиения слов на конкретном языке запрещают разрыв внутри встроенного блока, либо если на встроенный блок влияет значение пробела nowrap или pre ), то встроенный блок переполняет строчный блок.

Когда встроенный блок разделен, поля, границы и отступы не имеют визуального эффекта там, где происходит разделение (или при любом расколе, когда их несколько).

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

Строки создаются по мере необходимости для удержания содержимое на уровне строки в контексте форматирования строки. Линейные боксы которые не содержат текста, без сохраненных пробелов, без встроенных элементы с ненулевыми полями, отступами или границами, и никакое другое текущее содержимое (например, изображения, встроенные блоки или встроенные таблицы) и не должны заканчиваться сохраненной новой строкой. рассматриваться как линейные блоки нулевой высоты для целей определения позиции любых элементов внутри них и должны рассматриваться как не существует ни для каких других целей.

Вот пример конструкции встроенного блока. Следующий абзац (создается элементом уровня блока HTML P) содержит анонимный текст с вкраплениями EM и STRONG:

 

Появляется несколько выделенных слов в этом предложении, дорогой.

Элемент P создает блок-бокс, содержащий пять встроенных ящиков, три из которых анонимные:

  • Аноним: "Несколько"
  • EM: «подчеркнутые слова»
  • Аноним: "появляются"
  • СИЛЬНЫЙ: "в этом"
  • Аноним: "приговор, дорогой.«

Чтобы отформатировать абзац, пользовательский агент помещает пять полей в строчные коробки. В этом примере поле, созданное для элемента P устанавливает содержащий блок для строковых боксов. Если содержащий блок достаточно широк, все встроенные боксы поместятся в однострочный блок:

 Несколько  подчеркнутых слов  появляются  в этом предложении , дорогая.
 

Если нет, встроенные блоки будут разделены и распределены по несколько строчных полей.Предыдущий абзац можно разбить следующим образом:

Появляется несколько  выделенных слов 
  в этом предложении , дорогой.
 
или вот так:
Несколько  подчеркнули 
  слов  появляются  в этом 
приговор, дорогой.
 

В предыдущем примере блок EM был разделен на два блока EM. (назовите их «split1» и «split2»). Поля, границы, отступы или текстовые украшения не имеют видимого эффекта после split1 или перед split2.

Рассмотрим следующий пример:

 


  <ГОЛОВА>
     Пример встроенного потока на нескольких строках 
    
  
  <ТЕЛО>
    

Здесь появляется несколько выделенных слов .

В зависимости от ширины P коробки могут быть распределены как следует:

  • Поле вставляется перед словами «подчеркнуто» и после «слов».
  • Заполнение вставлено перед, сверху и снизу «подчеркнутый» и после, над и под «словами». А Пунктирная граница отображается с трех сторон в каждом случае.

9.4.3 Относительное позиционирование

После того, как блок был выложен в соответствии с нормальным потоком или перемещен, его можно сдвинуть относительно эта позиция. Это называется относительным позиционированием . Смещение коробки (B1) таким образом не влияет на следующий блок (B2): B2 - это задано положение, как если бы B1 не был смещен, а B2 не перемещен после применения смещения B1.Это означает, что относительное позиционирование может привести к наложению ящиков. Однако, если относительное позиционирование вызывает переполнение: авто или поле "переполнение: прокрутите", чтобы переполнение, UA должен разрешить пользователю доступ к этому контенту (по его смещению position), которые, создавая полосы прокрутки, могут повлиять на макет.

Относительно расположенная коробка сохраняет нормальный размер потока, включая разрывы строк и место, изначально зарезервированное для них. Раздел о содержащий блоки объясняет, когда относительно позиционированный блок устанавливает новый содержащий блок.

Для относительно расположенных элементов, «влево» и «вправо» перемещают коробки (а) по горизонтали, не меняя их размера. «Влево» перемещает прямоугольники вправо, а «right» перемещает их влево. Поскольку коробки не расщепляются и не растягиваются в результате "левого" или "правого" всегда используются следующие значения: left = -right.

Если и 'left', и 'right' являются 'auto' (их начальные значения), используемые значения - "0" (т. е. поля остаются в исходном должность).

Если 'left' - 'auto', его используемое значение - минус значение 'right' (я.е., квадраты перемещаются влево на значение «вправо»).

Если 'right' задано как 'auto', его используемое значение минус значение «влево».

Если ни «влево», ни «вправо» не являются «авто», положение чрезмерно ограничен, и один из них следует игнорировать. Если свойство 'direction' содержащего блока - 'ltr', значение 'left' побеждает, а значение 'right' становится "левым". Если 'direction' содержащего блока 'rtl', 'right' побеждает, а 'left' игнорируется.

Пример (ы):

Пример. Следующие три правила эквивалентны:

 
div.a8 {положение: относительное; направление: ltr; слева: -1em; right: auto}
div.a8 {положение: относительное; направление: ltr; слева: авто; справа: 1em}
div.a8 {положение: относительное; направление: ltr; слева: -1em; справа: 5em}
  

Свойства 'top' и 'bottom' перемещаются относительно друг друга. элемент (ы) вверх или вниз без изменения их размера. «Вверх» перемещает коробки вниз, а «дно» перемещает их вверх. Поскольку коробки не расщепляются и не растягиваются в результате «верха» или «низа», всегда используются следующие значения: верх =-низ.Если оба являются «автоматическими», их используемые значения равны «0». Если один из них «авто» становится отрицанием другого. Если ни один из них не является «авто», 'дно' игнорируется (т. е. используемое значение 'дно' будет минус значение 'top').

Запись. Динамическое движение относительно расположенных ящиков может производить эффекты анимации в средах сценариев (см. также свойство «видимость»). Хотя относительное позиционирование может использоваться как форма надстрочного индекса и подписки, высота строки не регулируется автоматически, чтобы позиционирование во внимание.См. Описание расчета высоты строки для получения дополнительной информации. Информация.

Примеры относительного позиционирования представлены в разделе сравнения нормального потока, поплавков и абсолютного позиционирование.

Поплавок - это прямоугольник, который смещается влево или вправо на текущая строка. Самая интересная характеристика поплавка (или "плавающий" или "плавающий" блок) означает, что содержимое может течь вдоль его стороны (или иметь запрет на это свойство 'clear'). Контент течет вниз справа от плавающего влево блока и вниз по левой стороне коробка с правым верхом.Ниже приводится введение в float. позиционирование и поток контента; точные правила, регулирующие поведение поплавков, приведены в описание "поплавка" свойство.

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

Если горизонтального места недостаточно для поплавок, он смещается вниз до тех пор, пока не сядет или не останется присутствует больше поплавков.

Так как поплавок не находится в потоке, непозиционированные блоки блоков созданный до и после бокса поплавка течет вертикально, как если бы поплавок не существует. Тем не мение, текущий и последующие строчные поля, созданные рядом с поплавком, укороченный по мере необходимости чтобы освободить место для поля поля поплавка.

Линейный прямоугольник рядом с поплавком, когда существует вертикальное положение который удовлетворяет всем этим четырем условиям: (а) наверху или ниже линейного поля, (b) на или выше нижней части линейного поля, (c) ниже край верхнего поля поплавка и (г) над краем нижнего поля поплавка.

Примечание: это означает, что поплавки с нулевой внешней высотой или отрицательная внешняя высота не укорачивает строчные прямоугольники.

Если поле сокращенной строки слишком мало, чтобы содержать какое-либо содержимое, тогда прямоугольник смещается вниз (и его ширина пересчитывается) до тех пор, пока либо какой-то контент подходит, либо поплавков больше нет. Любое содержимое в текущей строке перед переформатированием плавающего блока в той же строке с другой стороны поплавка. Другими словами, если блоки встроенного уровня размещаются на строке перед обнаружением левого поплавка, который умещается в оставшемся пространстве поля строки, левый поплавок помещается в эту строку, выравнивается по верхнему краю линейного бокса, а затем блоки инлайн-уровня, уже находящиеся на линии, перемещаются соответственно вправо от поплавка (правая сторона является другой стороной левого поплавка) и наоборот для rtl и right float.

Граница таблицы, заменяемый элемент на уровне блока или элемент в нормальном потоке, который устанавливает новый контекст форматирования блока (например, элемент с «переполнением», отличным от «видимого») не должны перекрывать поле полей любых поплавков в одном блоке контекст форматирования как сам элемент. При необходимости реализации должны очистить указанный элемент, поместив его под любыми предыдущими поплавками, но может разместить он примыкает к таким поплавкам, если есть достаточно места. Они могут даже сделать рамку указанного элемента уже, чем определено разделом 10.3.3. CSS2 не определяет, когда UA может поместить указанный элемент рядом с поплавком. или насколько этот элемент может стать уже.

Пример (ы):

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

 
p {ширина: 10em; бордюр: сплошной цвет морской волны; }
span {float: left; ширина: 5em; высота: 5em; граница: сплошной синий; }
 

...

 

Суперкалифрагилистический

Этот фрагмент может выглядеть так:

Несколько поплавков могут находиться рядом, эта модель также применима к соседние поплавки в одной строке.

Пример (ы):

Следующее правило размещает все поля IMG с class = "icon" слева (и устанавливает левое поле на «0»):

 
img.icon {
  плыть налево;
  маржа слева: 0;
}
  

Рассмотрим следующий источник HTML и таблицу стилей:

 


  <ГОЛОВА>
     Пример с плавающей точкой 
    
  
  <ТЕЛО>
    

Это изображение иллюстрирует плавающие объекты Какой-то образец текста, у которого нет другого ...

Поле IMG перемещается влево. Следующее содержание форматируется справа от числа с плавающей запятой, начиная с той же строки, что и плавать.Линейные поля справа от поплавка укорачиваются из-за поплавка, но сохраняют свою "нормальную" ширину (ширину содержащий блок, установленный элементом P) после поплавка. Этот документ может быть отформатирован как:

Форматирование было бы точно таким же, если бы документ был:

 
<ТЕЛО>
  

Пример текста Это изображение иллюстрирует плавающие объекты нет другого ...

, потому что содержимое слева от поплавка смещено поплавок и оплавил его правую сторону.

Как указано в разделе 8.3.1, поля плавающих блоков никогда не сжимаются с полями соседние ящики. Таким образом, в предыдущем примере вертикальные поля не свернуть между блоком P и всплывающее окно IMG.

Содержимое поплавков складывается так, как будто они сгенерированы новыми контексты наложения, за исключением того, что любые позиционированные элементы и элементы которые на самом деле создают новые Контексты стекирования принимают участие в родительском контексте стекирования поплавка. Поплавок может перекрывать другие коробки в нормальном потоке (например,г., когда коробка нормального потока рядом с поплавком имеет отрицательные поля). Когда это случается, поплавки отображаются перед непозиционированными в потоке блоки, но позади in-flow inlines.

Пример (ы):

Вот еще одна иллюстрация, показывающая, что происходит, когда плавающий перекрывает границы элементов в нормальном потоке.

[D]

Плавающее изображение закрывает границы блок-боксов он перекрывает.

В следующем примере показано использование свойства clear для предотвращения содержимого от течения рядом с поплавком.

Пример (ы):

Предполагая такое правило, как это:

 
p {clear: left}
  
Форматирование

может выглядеть так:

[D]

В обоих параграфах установлено «clear: left», что заставляет второй абзац "сдвигаться" в позицию ниже поплавок - "зазор" добавляется над его верхним полем к выполнить это (см. свойство «очистить»).

9.5.1 Установка поплавка: 'float' свойство

'поплавок'
Значение: осталось | право | нет | наследовать
Начальное: нет
Применимо к: всем, кроме 9.7
Унаследовано: нет
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: как указано

Это свойство указывает, должен ли прямоугольник перемещаться влево, верно, или нет. Он может быть установлен для любого элемента, но применяется только к элементы, которые создают коробки, которые не абсолютно позиционируется.Значения этого свойства имеют следующие значения:

слева
Элемент создает блок-бокс, который плавал влево. Контент располагается в правой части поля, начиная сверху (с учетом свойства «clear»).
правый
Аналогично «левому», за исключением того, что блок перемещается вправо, а содержимое перемещается в левую часть блока, начиная сверху.
нет
Ящик не плавает.

Пользовательские агенты могут обрабатывать float как «none» в корневом элементе.

Вот точные правила, которые управлять поведением поплавков:

  1. Левый внешний край Плавающий влево блок не может быть слева от левого края содержащего его блока. An аналогичное правило справедливо для элементов, плавающих вправо.
  2. Если текущий блок плавающий влево, и есть какие-либо плавающие влево блоки, созданные элементами ранее в исходном документе, то для каждого такого более раннего блока должен быть либо левый внешний край текущего блока справа от правого внешнего края более ранней коробки, или ее верх должен быть ниже низа ранее коробка.Аналогичные правила справедливы для боксов, плавающих вправо.
  3. Правый внешний край плавающий влево прямоугольник не может быть справа от левого внешнего края любого плавающего вправо коробка, которая находится рядом с ней. Аналогичные правила верны для плавающие вправо элементы.
  4. Внешний верх плавающей коробки не может быть выше вершины содержащего его блока. Когда поплавок находится между двумя сворачивающимися полями, float позиционируется, как если бы у него был пустой родительский анонимный блок, принимающий участие в течение.Положение такого родителя определяется правилами в разделе о марже. рушится.
  5. Внешний верх плавающего ящика не может быть выше внешней вершины любого блока или плавающего бокса, созданного элементом ранее в исходном документе.
  6. Внешний верх элемента плавающий блок не может быть выше вершины любого строчного блока, содержащего блок генерируется элементом ранее в исходном документе.
  7. Плавающий влево блок, слева от которого находится еще один плавающий влево блок. не может иметь правый внешний край справа от содержащего правый край блока.(Неплотно: левый поплавок может не торчать на правый край, если он уже не находится как можно дальше влево.) аналогичное правило справедливо для элементов, плавающих вправо.
  8. Плавающий ящик должен быть размещен как можно выше.
  9. Плавающий влево прямоугольник необходимо поставить как можно левее. возможно, плавающий вправо прямоугольник как можно дальше вправо. А более высокая позиция предпочтительнее той, которая находится дальше лево право.

Но в CSS 2.1, если в контексте форматирования блока представляет собой отрицательный вертикальный запас в потоке, так что положение поплавка выше позиции, которая была бы при всех таких отрицательных маржах установлен в ноль, положение поплавка не определено.

Ссылки на другие элементы в этих правилах относятся только к другим элементам в том же контексте форматирования блока, что и float.

Пример (ы):

Этот фрагмент HTML приводит к перемещению символа b вправо.

 

ab

Если ширина элемента P достаточна, a и b будут рядом. боковая сторона. Это могло бы выглядеть так:

9.5.2 Контроль потока рядом с поплавками: "чистое" свойство

'прозрачный'
Значение: нет | слева | право | оба | наследовать
Начальное: нет
Применимо к: блочным элементам
Унаследовано: нет
В процентах: Н / Д
Медиа: визуальный
Расчетное значение: как указано

Это свойство указывает, какие стороны блока (ов) элемента могут , а не , примыкают к более раннему плавающему блоку."Ясный" свойство не считает поплавки внутри самого элемента или в другое форматирование блока контексты.

Значения имеют следующие значения применительно к неплавающим блочные ящики:

слева
Требует, чтобы верхняя граница рамки была ниже нижней внешний край любых плавающих влево блоков, которые возникли из элементов ранее в исходном документе.
правый
Требует, чтобы верхняя граница рамки была ниже нижней внешний край любых плавающих вправо прямоугольников, образованных элементами ранее в исходном документе.
оба
Требует, чтобы верхняя граница рамки была ниже нижней внешний край любых плавающих вправо и влево блоков, которые привели к из элементов ранее в исходном документе.
нет
Нет ограничений на положение коробки относительно поплавков.

Значения, отличные от «нет», потенциально вводят зазор . Зазор препятствует обрушению маржи и действует как интервал над верхним краем элемента.Он используется для протолкните элемент вертикально мимо поплавка.

Вычисление зазора элемента, на котором установлено значение «clear», выполняется путем определения гипотетического положения элемента верхний край границы. Эта позиция где был бы фактический верхний край границы, если бы элемент «чистое» свойство было «нет».

Если это гипотетическое положение верхнего края границы элемента не выше соответствующих поплавков, тогда вводится зазор, и поля схлопываются согласно правилам в 8.3.1.

Затем устанавливается больший зазор из:

  1. Величина, необходимая для четного размещения граничного края блока с нижним внешним краем самого нижнего поплавка, который должен быть очищено.
  2. Величина, необходимая для размещения верхней границы блока в его гипотетическом положении.

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

Примечание: Оба поведения разрешены ожидает оценки их совместимости с существующим веб-контентом. А будущая спецификация CSS потребует либо того, либо другого.

Примечание: зазор может быть отрицательным или нулевым.

Пример (ы):

Пример 1. Предположим (для простоты), что у нас есть только три блока в следующем порядке: блок B1 с нижним полем M1 (B1 не имеет дочерних элементов, отступов или границ), плавающий блок F с высота H и блок B2 с верхним полем M2 (без отступов или границ, нет детей).B2 имеет "clear" установлен на "both". Мы также предполагаем, что B2 не пусто.

Без учета свойства «чистота» на B2, мы имеем ситуацию в диаграмму ниже. Поля B1 и B2 рушатся. Скажем, нижний край границы B1 находится в точке y = 0, тогда верх F находится в точке y = M1, верхняя граница B2 находится на y = max (M1, M2), а нижняя граница F - при y = M1 + H.

Мы также предполагаем, что B2 не ниже F, т. Е. Мы находимся в Ситуация, описанная в спецификации, где нам нужно добавить зазор.Тот средства:

макс (M1, M2)

Нам нужно вычислить зазор C дважды, C1 и C2, и оставьте большее из двух: C = max (C1, C2). Первый способ - поставить верх B2 на одном уровне с низом F, то есть в точке y = M1 + H. означает, что поля больше не разрушаются с зазором между их:

низ F = верхний край границы B2 B2

M1 + H = M1 + C1 + M2 ⇔

C1 = M1 + H - M1 - M2

= H - M2

Второе вычисление состоит в том, чтобы сохранить верхнюю часть B2 на месте, т.е.э., в у = макс (M1, M2). Это означает:

макс (M1, M2) = M1 + C2 + M2 ⇔

C2 = макс (M1, M2) - M1 - M2

Мы предположили, что max (M1, M2)

C2 = макс (M1, M2) - M1 - M2

C2

А, поскольку C1 = H - M2, то

C2

и, следовательно,

C = макс (C1, C2) = C1

Пример (ы):

Пример 2.Примером отрицательного разрешения является эта ситуация в который зазор -1em. (Предположим, что ни один из элементов не имеет границ или обивка):

Первый параграф.

Плавающий абзац.

Последний абзац.

Пояснение: Без "ясно", первый и последний абзацы " поля исчезнут, а верхний край границы последнего абзаца будет быть на одном уровне с верхом плавающего абзаца. Но "ясно" требует, чтобы верхняя граница была на ниже поплавка, т.е.е., 2em ниже. Это означает, что необходимо ввести зазор. Соответственно, поля больше не сжимаются, а размер зазора устанавливается таким образом, чтобы зазор + верхний край = 2em, то есть зазор = 2em - верхний край = 2em - 3em = -1em.

Когда свойство установлено для плавающих элементов, это приводит к изменение правил для позиционирование поплавка. Добавлено дополнительное ограничение (# 10):

  • Верхний внешний край поплавка должно быть ниже нижнего внешнего край всех ранее плавающих влево прямоугольников (в случае 'clear: left ') или все предыдущие блоки, плавающие вправо (в случае' clear: правильно ') или оба (' ясно: оба ').

Примечание. Это свойство применяется ко всем элементам в CSS1. Реализации таким образом, возможно, поддерживал это свойство для всех элементов. В CSS2 и CSS 2.1 свойство clear применяется только к элементам уровня блока. Поэтому авторам следует использовать это свойство только на уровне блоков. элементы. Если реализация поддерживает clear встроенных элементов, вместо того, чтобы устанавливать зазор, как описано выше, реализация должна вызвать разрыв и эффективно вставить одно или несколько пустых строчных полей (или сдвинуть новое строчное поле вниз, как описано в разделе 9.5), чтобы переместить верхнюю часть очищенного строчного блока строки ниже соответствующего плавающего блока (ов).

В модели абсолютного позиционирования прямоугольник явно смещен относительно содержащего его блока. Удаляется из нормального потока полностью (не влияет на последующих братьев и сестер). Абсолютно позиционированный блок устанавливает новый содержащий блок для нормального потока дети и абсолютно (но не фиксированные) позиционированные потомки. Однако содержание абсолютно позиционированный элемент не обтекает другие блоки.Oни могут закрывать содержимое другого ящика (или сами скрывать), в зависимости от уровни стопки перекрывающихся коробов.

Ссылки в данной спецификации на абсолютно позиционирован элемент (или его поле) подразумевает, что свойство 'position' элемента имеет значение "абсолютный" или "фиксированный".

9.6.1 Фиксированное позиционирование

Фиксированное позиционирование - это подкатегория абсолютного позиционирования. В единственное отличие состоит в том, что для фиксированного блока содержащий блок устанавливается окном просмотра.Для непрерывных носителей фиксированный коробки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для страничных медиа, ящики с фиксированными позициями повторяются на каждой странице. Это полезно для размещение, например, подписи внизу каждой страницы. Ящики с фиксированным положением, превышающие площадь страницы, обрезано. Части блока фиксированного положения, которые не видны в исходный содержащий блок не будет печататься.

Авторы могут использовать фиксированное позиционирование для создания презентаций в виде фреймов.Рассмотрим следующую компоновку рамы:

Этого можно достичь с помощью следующего HTML-документа и правила стиля:

 


  <ГОЛОВА>
     Рамочный документ с CSS 2.1 
    
  
  <ТЕЛО>
    
...
...
...
...

Три свойства, которые влияют на создание и компоновку блока: 'дисплей', 'позиция' и 'float' - взаимодействовать следующим образом:

  1. Если 'display' имеет значение 'none', тогда 'позиция' и 'float' не применяются. В этом случае элемент не создает бокса.
  2. В противном случае, если «позиция» имеет значение 'absolute' или 'fixed', поле абсолютно позиционировано, вычисленный значение float равно none, и отображение настраивается в соответствии с таблицей ниже.Положение поля будет определяться свойствами «сверху», «справа», «снизу» и «слева» и содержащий блок.
  3. В противном случае, если 'float' имеет значение, отличное от 'none', поле floated, а «display» устанавливается в соответствии с таблицей ниже.
  4. В противном случае, если элемент является корневым элементом, 'display' устанавливается в соответствии с таблицей ниже, за исключением того, что undefined в CSS 2.1, является ли указанное значение 'list-item' становится вычисленным значением 'block' или 'list-item'.
  5. В противном случае применяются остальные значения свойства display. как указано.
Заданное значение Вычисленное значение
inline-table table
inline, table-row-group, table-column, группа-столбца-таблицы, группа-заголовка-таблицы, группа-нижнего колонтитула, строка-таблицы, table-cell, table-caption, inline-block block
other как указано

Чтобы проиллюстрировать различия между нормальным потоком, относительный позиционирование, плавающее и абсолютное позиционирование, мы предлагаем ряд примеры на основе следующего HTML:

 


  <ГОЛОВА>
     Сравнение схем позиционирования 
  
  <ТЕЛО>
    

Начало содержимого тела. Начало внешнего содержимого. Внутреннее содержимое. Конец внешнего содержимого. Конец содержимого тела.

В этом документе мы предполагаем следующие правила:

 
тело {дисплей: блок; размер шрифта: 12 пикселей; высота строки: 200%;
       ширина: 400 пикселей; height: 400px}
p {display: block}
диапазон {display: inline}
  

Конечные позиции ящиков, генерируемых внешним и внутренних элементов различаются в каждом примере.На каждой иллюстрации цифры слева от иллюстрации указывают нормальное положение потока двойного интервала (для четкость) линий.

Запись. Диаграммы в этом разделе являются иллюстративными и не предназначены для шкала. Они предназначены для того, чтобы подчеркнуть различия между различные схемы позиционирования в CSS 2.1 и не предназначены для справочные изображения приведенных примеров.

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

Рассмотрим следующие объявления CSS для внешних и внутренний , которые не меняют нормальный поток ящиков:

 
#outer {цвет: красный}
#inner {цвет: синий}
  

Элемент P содержит все встроенное содержимое: анонимный встроенный текст и два SPAN элементы.Таким образом, весь контент будет выложен во встроенном контексте форматирования внутри содержащего блока устанавливается элементом P, что дает что-то вроде:

9.8.2 Относительное позиционирование

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

 
#outer {позиция: относительная; верх: -12px; красный цвет }
#inner {позиция: относительная; верх: 12 пикселей; цвет синий }
  

Текст обычно проходит до внешнего элемента . В внешний текст затем перетекает в нормальное положение и размеры в конце строки 1.Затем встроенные поля, содержащие текст (распределенный по трем строкам) смещается как единое целое на '-12px' (вверх).

Содержимое внутреннего , как дочернего элемента внешнего , будет обычно идут сразу после слов «внешнего содержимого» (в строке 1.5). Однако внутреннее содержимое само смещено относительно внешнего содержимого на «12 пикселей» (вниз), обратно к их исходное положение в строке 2.

Обратите внимание, что содержимое после внешнего не зависит от относительное позиционирование внешнего .

Обратите внимание, что если бы смещение внешнего было '-24px', текст внешнего и основной текст перекрывались бы.

9.8.3 Плавающий блок

Теперь рассмотрим эффект плавающего блока. внутренний текст элемента справа с помощью следующих правила:

 
#outer {цвет: красный}
#inner {float: right; ширина: 130 пикселей; цвет синий }
  

Текст нормально течет до внутреннего поля , которое вытягивается из потока и перемещается к правому краю (его «ширина» была назначена явно).Линии слева от поплавка укорачиваются, а в них перетекает оставшийся текст документа.

Чтобы показать эффект свойства 'clear', мы добавляем родственника элемент к примеру:

 


  <ГОЛОВА>
     Сравнение схем позиционирования II 
  
  <ТЕЛО>
    

Начало содержимого тела. Начало внешнего содержимого. Внутреннее содержимое. Одноуровневое содержимое. Конец внешнего содержимого. Конец содержимого тела.

Следующие правила:

 
#inner {float: right; ширина: 130 пикселей; цвет синий }
#sibling {цвет: красный}
  

заставляет внутреннюю коробку перемещаться вправо, как и раньше, а оставшийся текст документа помещается на освободившееся место:

Однако, если «очистить» для элемента родственного брата установлено значение 'right' (т.е.е., сгенерированный sibling box не примет позицию рядом с плавающие прямоугольники справа), содержимое родственника начинает поток ниже поплавка:

 
#inner {float: right; ширина: 130 пикселей; цвет синий }
#sibling {ясно: правильно; красный цвет }
  

9.8.4 Абсолютное позиционирование

Наконец, мы рассмотрим эффект абсолютного позиционирования. Рассмотрим следующие объявления CSS для внешних и внутренний :

 
#outer {
    позиция: абсолютная;
    верх: 200 пикселей; слева: 200 пикселей;
    ширина: 200 пикселей;
    красный цвет;
}
#inner {цвет: синий}
  

, что приводит к размещению верхней части внешнего блока с относительно содержащего его блока.Содержащий блок для позиционированного box устанавливается ближайшим предком (или, если нет существует, инициал, содержащий блок, как в нашем примере). Верхняя сторона внешней коробки на 200 пикселей ниже верха содержащего блока, а левая сторона «200 пикселей» с левой стороны. Дочерний блок , внешний , обтекаемый обычно по отношению к своему родителю.

В следующем примере показан прямоугольник с абсолютным позиционированием, который дочерний элемент относительно расположенного бокса.Хотя родитель внешнее поле на самом деле не смещено, устанавливая его свойство 'position' в 'relative' означает, что его поле может служить содержащим блоком для позиционированного потомки. Поскольку внешний блок является встроенным блоком, разделить на несколько строк, верхний и левый края первого встроенного блока (обозначено толстыми пунктирными линиями на иллюстрации ниже) служат в качестве ссылок для "топ" и «левые» смещения.

 
#outer {
  положение: относительное;
  красный цвет
}
#inner {
  позиция: абсолютная;
  верх: 200 пикселей; слева: -100 пикселей;
  высота: 130 пикселей; ширина: 130 пикселей;
  цвет синий;
}
  

Это приведет к примерно следующему:

Если мы не разместим внешнюю коробку :

 
#outer {цвет: красный}
#inner {
  позиция: абсолютная;
  верх: 200 пикселей; слева: -100 пикселей;
  высота: 130 пикселей; ширина: 130 пикселей;
  цвет синий;
}
  

содержащий блок для внутреннего становится начальным содержащим блоком (в нашем пример).На следующем рисунке показано, где внутренний box в этом случае закончится.

Относительное и абсолютное позиционирование может использоваться для внесения изменений баров, как показано в следующем примере.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *