Стилизация контейнеров для содержимого веб-страниц
Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container). Стилизовать контейнеры средствами CSS можно по-разному. Некоторые способы работы с контейнерами ставят дизайнера перед необходимостью решать достаточно сложные задачи.
В этом материале я расскажу о контейнерах для содержимого веб-страниц: о том, как они работают, о том, как ими пользоваться, и о тех случаях, когда лучше обойтись без них. Обратите внимание на то, что я буду использовать здесь термины «обёртка» и «контейнер» как равнозначные.
Общие сведения
Когда вы, при разговоре о некоем элементе веб-страницы, узнаёте о том, что речь идёт об обёртке или о контейнере, это значит, что, на самом деле, перед вами — группа элементов, которая «обёрнута» в другой элемент или «размещена» внутри этого элемента. Если, настраивая веб-страницу, не пользоваться дополнительными элементами, отведя роль контейнера элементу , то стилизовать этот элемент можно так:
body
Но в современных условиях использование в качестве контейнера элемента может оказаться непрактичным. Контейнер позволяет не допустить выхода дочерних элементов за его границы.
Контейнер не даёт дочерним элементам выходить за его границы
Здесь имеется боковая и основная области страницы. Обе эти области находятся внутри элемента-контейнера. Ему назначен класс .wrapper . Среди прочих свойств контейнера, естественно, задана и его ширина. Структура HTML-кода такой страницы выглядит так:
Без использования элемента-обёртки дочерние элементы будут размещаться, ориентируясь на края экрана. Это может быть неудобным для пользователей. Особенно — для тех, которые работают на больших экранах.
Страница без элемента-контейнера, включающего в себя её содержимое
Здесь показано, как элементы, растягиваясь, занимают весь экран. Происходит это в том случае, если в макете страницы нет элемента-контейнера. Полагаю, не следует предлагать пользователям работать с подобными страницами. Позвольте мне объяснить эту мысль.
О необходимости использования контейнеров для содержимого веб-страниц
Использование контейнера для содержимого веб-страниц имеет множество сильных сторон, о которых стоит знать дизайнерам и разработчикам. Вот некоторые из этих сильных сторон:
- Использование контейнера улучшает читабельность содержимого страницы. Без контейнера содержимое, вроде текста, может растягиваться на всю ширину экрана. На маленьких экранах подобное может давать вполне приемлемый результат. Но на больших экранах это выглядит очень плохо.
- Группировка элементов дизайна страницы упрощает настройку расстояния между ними.
- Если элементы дизайна нужно сгруппировать по столбцам, это будет сложно сделать без использования контейнера.
Настройка элемента-контейнера средствами CSS
Теперь, когда мы поговорили об основах применения контейнеров, и о том, какие преимущества даёт их использование, давайте остановимся на том, как настраивать их средствами CSS.
▍Настройка ширины контейнера
Элемент-контейнер с настроенной шириной
При создании контейнера первое, что нужно решить, это то, какой ширины он будет. На вопрос о желаемой ширине контейнера можно ответить, проанализировав дизайн страницы. В целом, можно сказать, что чаще всего используются контейнеры с шириной, находящейся в пределах 1000px — 1300px . Например, в популярном фреймворке Bootstrap используется ширина, равная 1170px .
.wrapper
Здесь показана установка ширины элемента с классом .wrapper в 1170px , но, на самом деле, свойство width для настройки ширины контейнеров использовать не рекомендуется. Дело в том, что это приводит к необходимости горизонтального скроллинга страницы в том случае, если ширина области окна браузера, доступной для вывода страницы, меньше 1170px . Решить эту проблему можно, воспользовавшись свойством max-width :
.wrapper
Хотя это — вполне рабочий приём, можно полностью избавиться от свойства width и, как в следующем примере, пользоваться лишь свойством max-width :
.wrapper
Теперь, когда мы нашли подходящий механизм настройки ширины контейнера, давайте поговорим о том, как выровнять контейнер по центру страницы.
▍Выравнивание контейнера по центру страницы
Контейнер, выровненный по центру страницы
Для того чтобы выровнять контейнер по центру страницы, нужно, при настройке его внешних отступов, воспользоваться значением auto для левого и правого отступов:
.wrapper
Вот как, в соответствии со спецификацией CSS, ведут себя отступы, которым назначено значение auto :
Если margin-left и margin-right установлены в значение auto, то значения, которые будут использованы для этих отступов, будут одними и теми же. Это позволяет центрировать элемент по горизонтали относительно краёв содержащего его блока.
Если вас интересуют подробности об использовании ключевого слова auto в CSS — взгляните на эту мою статью.
Я воспользовался здесь конструкцией margin: 0 auto . Она сбрасывает размеры верхнего и нижнего отступов в значение 0, а левый и правый отступы настраивает в соответствии с особенностями применения ключевого слова auto . У такого шага есть некоторые последствия, о которых я расскажу ниже. А пока же хочу отметить, что рекомендуется использовать полный вариант вышеописанной сокращённой конструкции для настройки внешних отступов:
.wrapper
▍Настройка левого и правого внутренних отступов
Горизонтальные (левый и правый) внутренние отступы
При проектировании контейнера важно уделить внимание настройке его левого и правого внутренних отступов. Когда размер области просмотра меньше максимальной ширины контейнера, это приведёт к тому, что края контейнера будут прижаты к границам области просмотра. Вот пример стилизации контейнера, в котором предусмотрены внутренние отступы:
.wrapper
Настроив внутренние отступы контейнера, мы можем быть уверены в том, что края контейнера, в любом случае, будут находиться как минимум в 16px от краёв области просмотра, даже в том случае, если ширина области просмотра окажется меньше максимальной ширины контейнера. Внутренние отступы — это нечто вроде защитного механизма, который не даёт границам контейнера прижиматься к границам области просмотра даже в том случае, когда область просмотра уже, чем максимальная ширина контейнера.
▍Использование процентных значений при настройке контейнеров
Мне, после публикации исходного варианта этого материала, написали об использовании процентных значений при настройке контейнеров. В частности, речь идёт о применении CSS-свойства max-width: 90% вместо использования свойств padding-left и padding-right .
Использование процентных значений при настройке контейнеров и ситуации, когда значение max-width: 90% приводит к приемлемым и неприемлемым результатам
Хотя этот подход оказался вполне рабочим, выяснилось, что на больших экранах 90% ширины области просмотра — это слишком много. Но данную проблему можно решить, воспользовавшись медиа-запросом:
.wrapper < max-width: 90%; margin-left: auto; margin-right: auto; >/* Медиа-запрос для больших экранов */ @media (min-width: 1170px) < .wrapper < max-width: 1170px; >> В результате оказывается, что, используя процентное значение, мы усложняем CSS-код. Для того чтобы избавить себя от необходимости применения медиа-запроса, мы можем использовать фиксированное значение для ширины. Ещё одно решение, предложенное в этом твите, заключается в применении комбинации свойств width: 90% и max-width: 1170px :
.wrapper
Это — интересный подход, но я предпочёл бы настраивать внутренние отступы самостоятельно, не полагаясь на процентные значения.
▍Свойство display элемента-контейнера
Так как для оформления контейнеров используют теги , контейнеры, по умолчанию, являются блочными элементами. Что если понадобится поменять свойство контейнера display на grid , сделав это для того чтобы разместить его дочерние элементы в сетке?
Я не рекомендую этого делать, так как это идёт вразрез с идеей разделения ответственностей. Элемент-контейнер, «обёртка», это сущность, предназначение которой заключается в том, чтобы «оборачивать» другие элементы. Если нужно разместить дочерние элементы контейнера в сетке, тогда стоит добавить в контейнер ещё один , включающий в себя другие элементы, свойство которого display установлено в значение grid . Это будет проще и чище, чем настройка сетки средствами основного контейнера. Такой подход, кроме того, позволяет говорить о том, что в будущем проект, в котором он используется, будет легче поддерживать.
Пусть имеется такой контейнер:
Задавать свойство display: grid подобного элемента не рекомендуется из-за того, что такой элемент может использоваться на разных страницах. Его особые настройки могут случайно привести к нарушению размещения элементов. Вот неудачный вариант настройки контейнера, о котором идёт речь:
.wrapper
Лучше будет использовать такой HTML-код:
Элемент с классом featured-news можно стилизовать так:
.featured-news
Обратите внимание на то, что в этом примере мы использовали отдельный элемент в качестве ещё одной обёртки для содержимого страницы. На имена классов, использованных здесь, можете внимания не обращать. Для решения подобной задачи можно подобрать более удачные имена классов, которые подойдут для многократного использования на различных страницах сайта. Однако именование CSS-сущностей выходит за рамки данного материала.
▍Настройка внешних отступов, разделяющих элементы-контейнеры
Помните, как выше я не рекомендовал использование сокращённого способа настройки внешних отступов для центрирования элемента-контейнера? Речь шла о такой конструкции:
.wrapper
Хотя это — вполне рабочий стиль, в том случае, если на странице имеется несколько элементов-обёрток, и между ними должно быть некоторое расстояние, применение подобного стиля может привести к путанице. Если вы, по какой-то причине, решите уточнить стилизацию элемента-обёртки, применив дополнительный класс, то настройка внешних отступов с помощью этого класса не даст нужных результатов из-за особенностей расчёта значений специфичности CSS-правил.
Я имею в виду такую схему стилизации:
.wrapper-variation
Свойство margin для элемента с классом .wrapper-variation не будет применено к элементу из-за того, что его переопределяет свойство margin: 0 auto . Краткая форма настройки свойства переопределяет его полную форму. Для того чтобы подобного избежать, рекомендуется в таких случаях использовать полную форму записи свойств. То есть, при стилизации элемента с классом .wrapper нужно поступить так:
.wrapper
Теперь поговорим о настройке внешних отступов элементов. При работе над каждым своим проектом я готовлю набор вспомогательных классов для настройки внутренних и внешних отступов. Я использую их там, где они нужны. Взгляните на следующий рисунок.
Автономный контейнер и контейнер внутри элемента
При таком подходе CSS-код для элемента-обёртки остаётся в неизменном виде, а расстояния между элементами настраиваются с использованием вспомогательных CSS-классов. Тут у вас может появиться вопрос о том, зачем мне понадобилось использовать на странице несколько контейнеров, когда можно обойтись одним. Обратите внимание на то, что в вышеприведённом HTML-коде имеется элемент , расположенный между двух элементов-обёрток.
Здесь хорошо показывает себя использование модификатора !important . Дело в том, что смысл использования вспомогательных классов заключается в том, чтобы принудительно менять значения свойств. Обеспечить такое поведение можно с помощью !important .
Контейнер внутри полноэкранного элемента
В некоторых случаях бывает так, что есть элемент с фоном, занимающий 100% ширины области просмотра, а внутри этого элемента имеется элемент-контейнер. Эта схема похожа на ту, которую мы рассматривали в предыдущем разделе.
HTML-структура страницы в такой ситуации может выглядеть так:
Элемент занимает 100% ширины области просмотра. Этому элементу можно назначить фоновое изображение или фоновый цвет. Контейнер, находящийся внутри этого элемента, не даёт содержимому занимать всю ширину области просмотра.
Элемент занимает всю ширину области просмотра, контейнер ограничивает пространство, в котором выводится содержимое страницы
На этом рисунке у элемента задано фоновое изображение. Он занимает всю ширину области просмотра, а содержимое страницы, выводимое в контейнере, ограничено шириной контейнера.
Нужно ли заключать в контейнер содержимое верхнего блока страницы?
Нужен ли контейнер для оформления верхнего блока страницы, который часто называют «Hero Section»? Это зависит от каждой конкретной ситуации. Исследуем два самых распространённых подхода к оформлению верхних блоков страниц.
Первый подход предусматривает центровку содержимого блока и ограничение ширины содержимого.
Ширина содержимого верхнего блока страницы ограничена
Второй вариант предусматривает распределение содержимого в пределах верхнего блока.
Содержимое распределено в пределах верхнего блока страницы
Для того чтобы лучше разобраться в этих паттернах, предлагаю исследовать особенности их внутреннего устройства.
Верхний блок страницы, содержимое которого выровнено по центру
Возможно, разрабатывая верхний блок страницы, вам захочется разместить в соответствующем элементе некое содержимое и выровнять его по центру без использования элемента-контейнера.
How to make bread at home
.
Sign up
При стилизации вышеприведённого HTML-кода выровнять его содержимое по центру можно, воспользовавшись свойством text-align :
.hero
При таком подходе всё будет выглядеть достойно до тех пор, пока не изменится ширина окна браузера. Вот разбор проблем, которые это может вызвать.
▍Проблема №1: содержимое раздела прижимается к краям области просмотра
Так как в данном примере не настроены правый и левый внутренние отступы, содержимое раздела будет размещено вплотную к границам этого раздела. Это создаёт неудобства для пользователей, так как им сложнее будет читать содержимое верхнего блока страницы.
Содержимое раздела прижато к его краям
▍Проблема №2: слишком большая длина строк текста на экранах большого размера
На экранах большого размера текст, оформленный тегом
, может быть очень тяжело читать из-за того, что длина абзаца окажется слишком большой. В соответствии с этим документом, рекомендованное число символов в строке составляет 45-75. Выход длины строки за пределы этого диапазона усложняет чтение.
Длина строки слишком велика
▍Решение проблем
Для решения вышеозначенных проблем можно использовать контейнер. Он позволит и удержать длину строки в разумных пределах, и предотвратить плотное прилегание содержимого к границам раздела.
How to make bread at home
.
Sign up
Здесь я, настраивая контейнер, использую имя класса hero__wrapper , так как этот контейнер, вполне возможно, будет уникальным и будет применяться только для оформления верхнего блока страницы. Поэтому, в частности, ширина контейнера может быть меньше, чем ширина контейнеров, используемых в обычных условиях.
.hero__wrapper
Выровнять содержимое верхнего блока страницы по центру можно, используя любой удобный подход. Тут всё зависит от каждой конкретной ситуации. В данном примере для выравнивания контента достаточно воспользоваться свойством text-align: center .
Как выравнивать контейнер: по центру, или по левому краю страницы?
Я не могу дать однозначного ответа на этот вопрос, однако я видел сайты, контейнеры, используемые на которых, выравниваются на экранах ноутбуков по центру, а на экранах настольных компьютеров — по левому краю страницы.
Примером такого сайта является Techcrunch. Обратите внимание на то, что на экране настольного компьютера содержимое сайта выровнено по левому краю страницы.
Выравнивание содержимого на экране ноутбука и на экране настольного компьютера
Мне нравится работать с сайтами, содержимое которых выровнено по центру. На страницах таких сайтов имеются симметричные отступы слева и справа. Но у того, что содержимое некоторых сайтов выравнивают по левому краю страницы, может быть какая-то причина, о которой я не знаю. Если вы знаете о том, почему это так, дайте мне знать.
Использование CSS-переменных для создания различных вариантов стилизации контейнеров
Редко бывает так, что все элементы-контейнеры, используемые в некоем проекте, имеют одну и ту же ширину. Ширина контейнера может меняться в зависимости от содержимого контейнера и от того, как именно он используется. Большую гибкость в работе с контейнерами даёт использование CSS-переменных. Это, кроме того, весьма современный подход к настройке контейнеров. Рассмотрим пример.
Вот HTML-код контейнера:
.wrapper
Если вы внимательно прочли CSS-код, вы могли заметить, что var() передаётся два значения: первое — это переменная —wrapper-width , второе — это обычное значение 1170px . Второе значение является запасным. Смысл его существования заключается в том, что оно будет использовано в том случае, если значение переменной —wrapper-width окажется неустановленным.
Что это значит? А это значит, что в наших руках оказывается инструмент для создания различных вариантов элементов-обёрток благодаря возможности переопределения значения переменной —wrapper-width . Выглядит это так:
Благодаря этому подходу я смог создать особый контейнер, не прибегая при этом к следующим действиям:
- Добавление к элементу нового класса.
- Копирование и дублирование существующих стилей.
Если вам не нравится этот подход из-за использования в нём встроенного стиля для переопределения значения CSS-переменной, вы вполне можете решить эту задачу и с помощью добавления к элементу нового класса. Например — так, как показано ниже.
Так выглядит стиль:
.wrapper--small < --wrapper-width: 720px; /* благодаря этому стандартная ширина контейнера будет переопределена. */ >Здесь можно найти рабочий пример.
Использование display: contents
Для начала позвольте немного рассказать о значении contents свойства display . Каждый элемент в CSS — это блок. В этом блоке что-то содержится, у него есть внутренние и внешние отступы и граница. Использование свойства display: contents приводит к тому, что блок, которому оно назначено, удаляется из потока документа. Это можно представить себе как удаление открывающего и закрывающего тегов блока.
.site-header__wrapper
Элемент-обёртка
При реализации чего-то, напоминающего этот пример, может понадобиться сделать так, чтобы заголовочный раздел сайта мог бы растягиваться до полной ширины страницы, чтобы его ширина не ограничивалась бы свойствами контейнера.
.site-header__wrapper < display: contents; >.site-header
Здесь, благодаря использованию свойства display: contents , элемент-обёртка будет как бы «скрыт». Теперь, когда свойство display: flex применяется к элементу с классом .site-header , дочерние элементы контейнера становятся дочерними элементами .site-header .
Заголовочная часть сайта занимает, в ширину, всё доступное пространство
Отзывчивый фон и фиксированное содержимое
В книге CSS Secrets представлена интересная техника, которая может быть использована для стилизации разделов, имеющих отзывчивый фон (фон, способный занимать всю доступную ширину области просмотра) и элемент-контейнер для содержимого. Рассмотрим обычный способ создания макетов подобных разделов.
section < background-color: #ccc; >.wrapper
Здесь значения свойств margin-left: auto и margin-right: auto вычисляются путём взятия половины ширины области просмотра и вычитания из неё ширины содержимого. Того же самого можно добиться с использованием внутренних отступов.
Внутренние отступы
section
Но дело пока ещё не сделано. На мобильных устройствах содержимое будет прижато к краям области просмотра. Решить эту проблему можно, например, так:
section < padding: 1rem; >@media (min-width: 1170px) < section < padding: 1rem calc(50% - 585px); >> В качестве альтернативного решения можно предложить применение новой CSS-функции max() . Используя её, мы задаём минимальный размер внутреннего отступа, равный 1rem , а в качестве второго значения, передаваемого ей, указываем выражение 50% — 585px .
section
Если вам интересны подробности о CSS-функциях min() , max() и clamp() — вот мой материал на эту тему.
Как вы стилизуете элементы-контейнеры?
Контейнеры: виды и функции
Контейнер – эта специальная тара определенных размеров, применяемая для разнообразных целей. Прежде всего, это транспортировка грузов морским, железнодорожным и автомобильным транспортом. Сегодня используется много модификаций контейнеров, однако, основными являются специализированные и универсальные типы.
Виды контейнеров
В наше время на практике используются многие типы контейнеров. Выделим основные из них:
- сухогрузный – наиболее известный и чаще всего применяемый. Он предназначен для транспортировки сухих товаров и соответствует стандартам ISO;
- с плоским стеллажом – отличается наличием складных стенок, которые можно сложить и сформировать плоский поддон для транспортировки разных грузов;
- с открытым типом верха – крышка такой конструкции легко откидывается, а потому в нем возможно перевозить груз разной высоты;
- морской – предназначен для перевозки товара морским видом транспорта. Для обеспечения сохранности груза используется фитинг. Он предназначен для крепления морского контейнера к прицепу автотранспорта. Приобрести фитинг можно здесь – http://www.contlease.ru/catalog/suhogruznye_morskie_kontejnery/zapchasti_k_suhogruznym_kontejneram/fiting/.
- с загрузочной стороной – данный контейнер снабжен специальной дверью, которая существенно облегчает процесс погрузки;
- рефрижераторный – применяется с целью транспортировки грузов, требующих соблюдения необходимого режима температуры. Как правило, он предназначен для перевозки овощей и рыбы;
- цистерна – в основном используется для поставки жидкостей. Ее корпус создают из прочной стали либо другого материала, не подверженного коррозии;
- автомобильный – необходим для транспортировки машин на дальние расстояния. При помощи откидных бортов обеспечивается надежная перевозка авто, при этом минимальный риск его повреждения;
- специализированный – данный контейнер изготовлен для перевозки груза с определенными характеристиками и требованиями к условиям транспортировке. Наиболее часто его применяют для поставки оружия, которое требует повышенной безопасности.
Функции контейнеров
Прежде всего, это:
- возможность укрупнения масштабов отправок грузов;
- обеспечение защиты грузов от всевозможных воздействий отрицательных факторов со стороны окружающей среды;
- возможность временного хранения груза.
Контейнеры отличаются значительной прочностью и наличием элементов конструкции, которая позволяет перевозить различные типы грузов.
Виды и характеристика контейнеров
Контейнер — это унифицированный модуль для перевозки различных грузов. Размеры контейнера и его конструктивные особенности зависят от того, для транспортировки какого груза они предназначены.
Контейнер — это унифицированный модуль для перевозки различных грузов. Размеры контейнера и его конструктивные особенности зависят от того, для транспортировки какого груза они предназначены.
Размеры и весовые характиристики морских сухогрузных и железнодорожных контейнеров
Внешние и внутренние размеры стандартных морских контейнеров
| Тип морского контейнера | Внешний вид мосркого контейнера | Вес тары, т | Вес груза, т | Внутренние размеры, м | Вместимость м3 | Размер дверей | Описание морского контейнера | |||
| Ширина | Длина | Высота | Ширина | Высота | ||||||
| 20′ Dry Van |  |
2.300 | 28.150 | 2.352 | 5.900 | 2.390 | 33.00 | 2.340 | 2.283 | Специально разработаны для перевозки генеральных грузов. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. |
| 20′ Flat Rack |  |
2.560 | 29.500 | 2.352 | 5.900 | 2.310 | 32.00 | Эти контейнера подходят для негабаритных и тяжеловесных грузов, передняя и задняя стенка контейнера заваливается, контейнер снабжён дополнительными устройствами длязакрепеления и перевозки груза. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. | ||
| 20′ Open top |  |
2.200 | 21.700 | 2.340 | 5.890 | 2.360 | 32.60 | 2.320 | 2.300 | Этот контейнер позволяет перевозку грузов, чья высота превышает 2.4 метра и грузов которые должны хорошо вентилироваться. Верх контейнера закрывается плотным и прочным брезентом. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. |
| 20′ Reefer |  |
2.950 | 21.800 | 2.285 | 5.450 | 2.260 | 28.10 | 2.320 | 2.250 | Данные контейнера могут поддерживать постоянную температуру от -20С до +20С. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. |
| 20′ Tank Tainer |  |
5.350 | 26.670 | 24.00 | Предназначены для перевозки наливных грузов. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. | |||||
| 40′ Dry Van |  |
3.700 | 28.700 | 2.352 | 12.030 | 2.390 | 67.70 | 2.340 | 2.275 | Специально разработаны для перевозки генеральных грузов. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. |
| 40′ FlatRack/platform |  |
5.000 | 40.050 | 2.410 | 12.020 | 1.955 | 56.60 | Эти контейнера подходят для негабаритных и тяжеловесных грузов, передняя и задняя стенка этого контейнера заваливается, данный контейнер снабжён дополнительными устройствами длязакрепеления и перевозки груза. Максимальный вес груза может варьироваться, уточняйте для каждой отправки. | ||
| 40′ High Cube |  |
3.930 | 26.480 | 2.352 | 12.030 | 2.695 | 76.00 | 2.340 | 2.585 | Специально разработаны для перевозки генеральных грузов.Максимальный вес груза можетварироваться, уточняйте для каждой отправки. |
| 40′ Open top |  |
3.800 | 26.280 | 2.352 | 12.024 | 2.380 | 67.30 | 2.320 | 2.250 | Этот морской Контейнер позволяет перевозку грузов, чья высота превышает 2.4 метра и грузов которые должны хорошо вентилироваться. Верх контейнера закрывается плотным и прочным брезентом. |
| 40′ Reefer |  |
4.350 | 26.000 | 2.285 | 11.570 | 2.250 | 58.40 | 2.290 | 2.265 | Эти морские Контейнера могут поддерживать постоянную температуру от -20С до +20С. Максимальный вес груза можетварироваться, уточняйте для каждой отправки. |
| 40′ ReeferHigh Cube |  |
4.450 | 28.400 | 2.286 | 11.570 | 2.546 | 67.30 | 2.280 | 2.267 | Эти морские Контейнера могут поддерживать постоянную температуру от -20С до +20С. Максимальный вес груза можетварироваться, уточняйте для каждой отправки. |
| 45′ High Cube |  |
4.590 | 27.910 | 2.352 | 13.556 | 2.695 | 86.00 | 2.340 | 2.579 | Специально разработаны для перевозки генеральных грузов.Максимальный вес груза можетварироваться, уточняйте для каждой отправки. |
| 20′ разборный поддон |  |
2.600 | 30.150 | 2.213 | 5.675 | 2.270 | Погрузочный поддон состоит из напольного перекрытия с высокой несущей способностью и стального каркаса с настилом из мягкой древесины и двух перегородок; поддон может быть закрепленным или разборной. Перегородки защищают груз, при этом несколько поддонов крепятся один на другой. | |||
| 40′ разборный поддон |  |
5.700 | 39.300 | 2.200 | 11.660 | 2.245 | Погрузочный поддон состоит из напольного перекрытия с высокой несущей способностью и стального каркаса с настилом из мягкой древесины и двух перегородок; поддон может быть закрепленным или разборной. Перегородки защищают груз, при этом несколько поддонов крепятся один на другой. | |||
| 20′ платформа |  |
2.520 | 27.960 | 2.438 | 6.058 | 0.370 | Основное назначение 20 футовых контейнеров-платформ заключается в перевозке и временном хранении крупногабаритных, громоздких и тяжеловесных грузов. | |||
| 40′ платформа |  |
5.700 | 39.300 | 2.245 | 12.192 | 0.648 | Основное назначение 40 футовых контейнеров-платформ заключается в перевозке и временном хранении крупногабаритных, громоздких и тяжеловесных грузов. | |||
| 20′ стандарт |  |
2.230 | 28.230 | 2.350 | 5.895 | 2.392 | 33.00 | 2.340 | 2.292 | Контейнер общего назначения. Контейнер полностью закрытый и пылеводонепроницаемый, имеющий жесткую крышу, жесткие боковые стенки, жесткие торцевые стенки, имеющий хотя бы в одной торцевой стенке двери и предназначенный для перевозки и хранения широкой номенклатуры грузов. |
| 40′ стандарт |  |
3.780 | 26.700 | 2.350 | 12.029 | 2.392 | 67.00 | 2.340 | 2.292 | Контейнер общего назначения. Контейнер полностью закрытый и пылеводонепроницаемый, имеющий жесткую крышу, жесткие боковые стенки, жесткие торцевые стенки, имеющий хотя бы в одной торцевой стенке двери и предназначенный для перевозки и хранения широкой номенклатуры грузов. |
В морских грузоперевозках наиболее распространенными в использовании по размерам являются 20-ти и 40-ка футовые контейнеры. Длина этих контейнеров соответственно 6 и 12 метров. По высоте контейнеры делятся на стандартные и контейнеры повышенной высоты, т.н. «High Cube». В настоящее время прослеживается тенденция к увеличению вместимости контейнеров, поэтому появляются контейнеры, увеличенные по длине (45-ти футовые) или ширине (Pallet Wide), а также увеличенные сразу по ширине и длине (45HCPW)
Такое разнообразие типов контейнеров дает широкие возможности при перевозках. Контейнер незаменим при мультимодальных перевозках. Сегодня значительная часть грузов перевозится в контейнерах.
В зависимости от вида, перевозимого груза, можно выделить несколько типов контейнеров:
Универсальный сухогрузный контейнер (Dry Container ) — служит для перевозок тарно-штучных и навалочных грузов. Конструктивно контейнер представляет собой металлический ящик с широкими дверями. По углам периметра контейнер снабжен специальными отверстиями для перегрузок (нижними и верхними фитингами).
Рефрижераторный контейнер (Reefer Container) — предназначен для перевозки температурных грузов, т.е. грузов, при транспортировке которых должен поддерживаться определенный температурный режим. Эти специальные контейнеры имеют высокую степень термоизоляции и собственную холодильную установку, которая позволяет при подключении полностью поддерживать внутри контейнера необходимую температуру.
Опен Топ (Open Top) — это стандартный сухогрузный контейнер, применяемый для перевозки негабаритных по высоте грузов. Имеет мягкую съемную крышу, позволяющую загружаться через верх.
Флетрек (Flatrack) — представляет из себя стандартную контейнерную платформу без крыши и боковых стенок. Применяется для перевозки негабаритного груза, как по высоте, так и по ширине.
Танк-контейнер (Tank Container) — служит для перевозок жидких и газообразных грузов. Конструктивно — это цистерна, заключенная в жесткую металлическую раму, также снабженную угловыми фитингами сверху и снизу, которая позволяет использовать для перегрузки танк-контейнеров стандартное контейнерное оборудование.
Помня о том, что для многих из наших клиентов путешествие груза не оканчивается в порту, мы рады предложить услугу по перегрузке и дальнейшей доставке груза автотранспортом – до дверей непосредственного получателя.
Главная Информация Виды и характеристика контейнеров
- Сборные грузы
- Сборные грузы из Америки
- Сборные грузы из Китая
- Сборные грузы из Кореи
- Морские международные перевозки контейнеров-рефрижераторов
- Каботажные перевозки
- Морские грузоперевозки негабаритных грузов
- Морские контейнерные перевозки
- Автомобильные контейнерные перевозки
- Железнодорожные контейнерные перевозки
- Контейнерные перевозки опасных грузов
- Автоэкспедирование грузов
- Автомобильные перевозки негабаритных грузов
- Доставка спецтехники и других грузов автотранспортом
Прием для отправки сборного груза в Магадан на т/х «С.Анива», р.2404 осуществляется по 31 января до 14 часов, на Камчатку т/х «Ю.Тарапуров», р.24003 по 30.01.2024 до 14 часов , на Сахалин т/х «Ирида», р.2403 по 26 января до 14 часов
Дальневосточная
транспортно-экспедиторская
компанияЧто такое Docker: для чего он нужен и где используется
В статье мы расскажем, что такое контейнеры, где они применяются и чем могут быть полезны.
В первую очередь эта статья будет полезна тем, кто вообще не знаком с контейнерами или Docker. Мы расскажем самые базовые вещи, а наш пример по созданию приложения будет довольно простым. Но это позволит вам понять основы Docker и затем двигаться дальше — изучать более сложные материалы.
В конце будет практическая часть: мы создадим небольшое приложение, обернем его в образ и запустим. Все действия будем показывать на примере виртуальной машины облачной платформы Selectel.
Managed Kubernetes помогает разворачивать контейнерные приложения в инфраструктуре Selectel. Сосредоточьтесь на разработке, а мы займемся рутинными операциями по обеспечению работы вашего кластера Kubernetes.
Что такое контейнеры
Прежде чем рассказывать про Docker, нужно сказать несколько слов о технологии контейнеризации.
Контейнеры — это способ стандартизации развертки приложения и отделения его от общей инфраструктуры. Экземпляр приложения запускается в изолированной среде, не влияющей на основную операционную систему.
Разработчикам не нужно задумываться, в каком окружении будет работать их приложение, будут ли там нужные настройки и зависимости. Они просто создают приложение, упаковывают все зависимости и настройки в некоторый единый образ. Затем этот образ можно запускать на других системах, не беспокоясь, что приложение не запустится.
Docker — это платформа для разработки, доставки и запуска контейнерных приложений. Docker позволяет создавать контейнеры, автоматизировать их запуск и развертывание, управляет жизненным циклом. Он позволяет запускать множество контейнеров на одной хост-машине.
Контейнеризация похожа на виртуализацию, но это не одно и то же. Виртуализация запускает полноценный хост на гипервизоре со своим виртуальным оборудованием и операционной системой. При этом внутри одной ОС можно запустить другую ОС. В случае контейнеризации процесс запускается прямо из ядра основной операционной системы и не виртуализирует оборудование. Это означает, что контейнеризованное приложение может работать только в той же ОС, что и основная. Контейнеры не виртуализируют оборудование, поэтому потребляют меньше ресурсов.
Преимущества использования контейнеров Docker
Контейнеры упрощают работу как программистам, так и администраторам, которые развертывают эти приложения.
Docker решает проблемы зависимостей и рабочего окружения
Контейнеры позволяют упаковать в единый образ приложение и все его зависимости: библиотеки, системные утилиты и файлы настройки. Это упрощает перенос приложения на другую инфраструктуру.
Например, разработчики создают приложение в системе разработки — там все настроено, приложение работает. Когда оно готово, его нужно перенести в систему тестирования, а затем в продуктивную среду. Если в одной из них нет нужной зависимости, приложение не будет работать. Программистам придется отвлечься от разработки и совместно с командой поддержки разобраться в ситуации.
В контейнерах такой проблемы нет, так как они содержат в себе все необходимое для запуска приложения. Специалисты занимаются разработкой, а не решением инфраструктурных проблем.
Изоляция и безопасность
Контейнер — это набор процессов, изолированных от основной операционной системы. Приложения работают только внутри контейнеров и не имеют доступа к основной операционной системе. Это повышает безопасность приложений:они не смогут случайно или умышленно навредить основной системе. Если приложение в контейнере завершится с ошибкой или зависнет, это никак не затронет основную ОС.
Ускорение и автоматизация развертывания приложений и масштабируемость
Контейнеры упрощают развертывание приложений. В классическом подходе для установки программы нужно совершить несколько действий: выполнить скрипт, изменить файлы настроек и так далее. В этом процессе не исключена вероятность человеческой ошибки: пользователь запустит скрипт два раза, перепутает последовательность или что-то не поймет. Контейнеры позволяют полностью автоматизировать этот процесс, так как включают в себя все нужные зависимости и порядок выполнения действий.
Также контейнеры упрощают развертывание на нескольких серверах. В классическом подходе для того, чтобы развернуть одно и то же приложение на нескольких машинах, нужно будет повторять одни и те же действия. Контейнеры избавляют от этой рутинной работы и позволяют автоматизировать развертывание.
Контейнеры приближают к микросервисной архитектуре
Контейнеры хорошо вписываются в микросервисную архитектуру. Это подход к разработке, при котором приложение разбивается на небольшие компоненты, по возможности независимые. Обычно противопоставляется монолитной архитектуре, где все части системы сильно связаны друг с другом.
Это позволяет разрабатывать новую функциональность быстрее, ведь в случае с монолитной архитектурой изменение какой-то части может затронуть всю остальную систему.
Docker compose — одновременно развернуть несколько контейнеров
Docker-compose позволяет разворачивать и настраивать несколько контейнеров одновременно. Например, для веб-приложения нужно развернуть стек LAMP: Linux + Apache, MySQL, PHP. Каждое из приложений — это отдельный контейнер для ОС Linux. Но в этой ситуации нам нужны именно все контейнеры вместе, а не отдельно взятое приложение. Docker-compose позволяет развернуть и настроить все приложения одной командой, а без него пришлось бы разворачивать и настраивать каждый контейнер отдельно.
Хранение данных в Docker
Одна из главных особенностей контейнеров — эфемерность. Это означает, что контейнеры могут быть в любой момент остановлены, перезапущены или уничтожены. При этом все накопленные данные в контейнере будут потеряны. Поэтому приложения нужно разрабатывать так, чтобы они не полагались на хранилище данных в контейнере, это называется принципом Stateless.
Это хорошо подходит для приложений или сервисов, которые не сохраняют результаты своей работы. Например, функции расчета или преобразования данных: им на вход поступил один набор данных, они его преобразовали или рассчитали и вернули результат. Все, ничего никуда сохранять не нужно.
Но далеко не все приложения такие, и есть много данных, которые нужно сохранить. В контейнерах для этого предусмотрены несколько способов.
Тома (Docker volumes)
Это способ, при котором Docker сам создает директории для хранения данных. Их можно сделать доступными для разных контейнеров, чтобы они могли обмениваться данными. По умолчанию эти директории создаются на хост-машине, но можно использовать и удаленные хранилища: файловый сервер или объектное хранилище.
Монтирование каталога (bind mount)
В этом случае директория сначала создается на хост-машине а уже потом монтируется в контейнеры.
Но этот способ не рекомендуется, потому что он усложняет резервное копирование, миграцию и совместное использование данных несколькими контейнерами.
Архитектура (компоненты) Docker
Теперь расскажем подробнее про компоненты, из которых состоит Docker.
Docker daemon
Это некоторый резидентный процесс, который запущен на хост-машине постоянно. Он владеет всей инфраструктурой, а также предоставляет интерфейс взаимодействия с контейнерами, включающего создание и удаление, запуск и остановку.
В ранних версиях платформы Docker можно встретить упоминание о dockerd, но на текущий момент демоны уже успели разбиться на отдельные проекты. Все чаще можно встретить его современника — containerd.
Docker client (клиент)
Это интерфейс командной строки для управления Docker daemon. Мы пользуемся этим клиентом, когда создаем и разворачиваем контейнеры, а клиент отправляет эти запросы в Docker daemon.
Docker image (образ)
Это неизменяемый файл (образ), из которого разворачиваются контейнеры. Приложения упаковываются именно в образы, из которых потом уже создаются контейнеры. В технической литературе можно также встретить описание image как шаблона запуска процесса.
Приведем аналогию на примере установки операционной системы. В дистрибутиве (образе) ОС есть все, что необходимо для ее установки. Но этот образ нельзя запустить, для начала его нужно «развернуть» в готовую ОС. Так вот, дистрибутив для установки ОС — это образ, а установленная и работающая ОС — это контейнер. Но контейнеры обычно разворачиваются одной командой — это намного проще и быстрее, чем установка ОС.
Docker container (контейнер)
Это уже развернутое из образа и работающее приложение.
Docker Registry
Это репозиторий с образами. Разработчики создают образы своих программ и выкладывают их в репозиторий, чтобы их можно было скачать и воспользоваться ими. Распространенный публичный репозиторий — Docker Hub. В нем собраны образы множества популярных программ или платформ: базы данных, веб-серверы, компиляторы, операционные системы и так далее. Также можно создать свой приватный репозиторий, например внутри компании. Разработчики будут размещать там образы, которые будут использоваться всей компанией.
Dockerfile
Dockerfile — это инструкция для сборки образа. Это простой текстовый файл, содержащий по одной команде в каждой строке. В нем указываются все программы, зависимости и образы, которые нужны для разворачивания образа.
Для примера рассмотрим Dockerfile, который мы будем использовать далее в этой статье чтобы развернуть собственное приложение:
FROM python:3 COPY main.py / CMD [ "python", "./main.py" ]Первая строчка означает, что за основу мы берем образ с названием python версии 3 это называется базовый образ. Docker найдет его в docker registry, скачает и будет использовать за основу. Вторая строчка означает, что нужно скопировать файл main.py в корень файловой системы контейнера. Третья строчка означает, что нужно запустить python и передать ему в качестве параметра название файла main.py.
Далее рассмотрим примеры нескольких команд докер и что происходит, когда мы их выполняем.
Все эти команды выполняются в Docker client, который отправляет их в Docker daemon:
- Команда docker build (зеленая стрелка) читает dockerfile и собирает образ.
- Команда docker pull (красная стрелка) скачивает образ из docker registry. По умолчанию docker скачивает образы из публичного репозитория Docker Hub. Но можно создать свой репозиторий и настроить докер, чтобы он работал с ним.
- Команда docker run (черная стрелка) берет образ и запускает из него контейнер.
Создаем виртуальную машину для работы с Docker
Перейдем к практической части. Мы установим докер, создадим приложение, обернем его в контейнер и запустим. Мы для примера будем использовать виртуальную машину на платформе Selectel.
В панели управления заходим в раздел «Облачная платформа» — «Серверы», нажимаем кнопку «Создать сервер».
На следующем экране выбираем параметры сервера: имя, регион, ОС, параметры производительности и так далее. Сейчас для нас важны параметры «Источник» — выбираем ОС Ubuntu 20.04 и «Конфигурация» — выбираем 2 vCPU и 8 ГБ оперативной памяти.
Далее обратите внимание на разделы Сеть и Доступ. В разделе Сеть нужно выбрать подсеть с публичным адресом, чтобы к виртуальной машине можно было подключаться из интернета. В разделе Доступ будет указан пароль для root-пользователя, а также необходимо загрузить SSH-ключ, чтобы подключаться к виртуальной машине. Подробную инструкцию о подключении смотрите в базе знаний.
После этого внизу страницы нажимаем кнопку «Создать». Виртуальная машина создается за несколько минут, и после того, как она перейдет в статус ACTIVE, к ней можно подключаться по SSH.
Установка Docker
Мы рассмотрим установку докера на примере Ubuntu. Если у вас другой дистрибутив Linux или операционная система — ищите соответствующую инструкцию на официальном сайте.
Для начала синхронизируем пакетную базу apt и установим нужные зависимости:
sudo apt-get updatesudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ gnupg \ lsb-releaseДалее импортируем GPG-ключ для репозитория docker:
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpgТеперь добавим новый репозиторий в список apt:
echo \ "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/nullТеперь можно устанавливать докер:
sudo apt-get updatesudo apt-get install docker-ce docker-ce-cli containerd.ioПо умолчанию, доступ к docker daemon есть только у пользователя root. Чтобы с докером могли работать и другие пользователи, их нужно добавить в специальную группу — docker. Выполните эту команду из под обычного пользователя:
sudo usermod -aG docker $USERПосле этого необходимо перелогиниться, чтобы изменение вступило в силу.
Запуск контейнера
Теперь попробуем запустить какое-нибудь готовое приложение. Выполните команду:
docker run ubuntu echo 'hello from ubuntu'Команда docker run создает и запускает контейнер из образа. В этом примере мы создаем контейнер из образа ubuntu, затем выполняем в нем команду echo ‘hello from ubuntu’. Но так как у нас чистая установка докера и мы не скачали ни одного образа, докер сначала найдет этот образ в публичном репозитории Docker Hub, скачает, а потом создаст из него контейнер. В следующий раз, когда нам понадобится образ ubuntu, докер уже не будет его скачивать.
После выполнения команды в терминале появится строка hello from ubuntu, и контейнер сразу остановится. Теперь выполним другую команду:
docker run -it ubuntuЭта команда запустит контейнер в интерактивном режиме, то есть контейнер запустится и будет ждать дальнейших команд. При этом мы окажемся внутри операционной системы контейнера: запустится оболочка (bash), и мы сможем выполнять какие-то команды внутри контейнера. Чтобы выйти из контейнера, введите команду exit.
Создание собственного образа и запуск контейнера
Теперь создадим HelloWorld-приложение на Python, обернем его в образ и запустим.
Для начала создадим директорию, в которой мы будем работать и перейдем в нее:
mkdir first-docker-appcd first-docker-appСоздадим файл main.py и запишем в него одну строчку кода:
echo 'print("Hello from python");' >> main.pyПроверим, что наша программа работает. Для этого выполним команду:
python main.pyВ консоли должно выйти сообщение Hello from python. Это и есть наше простое приложение. Теперь нужно обернуть его в докер-образ. Для этого создадим файл Dockerfile и напишем в нем три строчки:
FROM python:3 COPY main.py / CMD [ "python", "./main.py" ]В первой строке мы указываем образ, который берем за основу. Так как мы пишем приложение на Python, нужно чтобы в нашем образе он уже был установлен. Самый простой способ это сделать — использовать готовый официальный образ с Docker Hub. Цифра 3 — это тег. Он означает, что нужно использовать третью версию Python. Вместо этого можно было бы использовать тег latest, который означает самую последнюю версию, или можно было указать номер конкретной версии, например 3.8.8.
Во второй строчке мы копируем наш файл main.py в корневую директорию образа.
Третья строчка — запускаем python и передаем ему в качестве параметра имя нашего файла.
Теперь из этого докер-файла можно собирать образ. Выполним команду:
docker build -t first-docker-app .Параметр -t обозначает имя нашего образа, мы назвали его first-docker-app.
Так как у нас еще нет скачанного образа python, то докер сам скачает его из Docker Hub и затем будет использовать его в качестве основы для создания нашего образа.
Проверим список установленных у нас образов:
docker imagesМы увидим, что у нас установлено три образа:
REPOSITORY TAG IMAGE ID CREATED SIZE first-docker-app latest 649cceb4dfd2 4 seconds ago 885MB python 3 b1aa63f57d3c 2 days ago 885MB ubuntu latest 8e428cff54c8 4 days ago 72.9MBfirst-docker-app — это наш образ, который мы только что создали. python — это образ python, который докер автоматически скачал чтобы собрать наш образ. ubuntu — образ, который мы пробовали для запуска готового приложения.
Теперь создадим контейнер из нашего образа и запустим его:
docker run first-docker-appВ результате нам выведется результат: Hello from python.
Итог: Мы создали свое приложение, упаковали его в докер-образ и запустили. Конечно, это очень простой пример. Наша программа состоит всего из одной строчки, а dockerfile из трех. Но это позволяет понять базовые принципы работы докера, как он устроен, как создавать свои образы и запускать контейнеры.
Готовые кластеры Kubernetes с GPU
Создайте за несколько кликов.