Использование display -webkit-box в css3
Использование display -webkit-box в css3
webkit-box
1. Перед реализацией горизонтального веб-макета обычно используется тип float или display: inline-block, но ни то, ни другое не может обеспечить настоящий гибкий макет. По крайней мере, ширина должна рассчитываться в процентах сама по себе.
2. С помощью гибкого бокса можно получить действительно плавный макет. Если указаны соответствующие атрибуты, браузер поможет нам выполнить дополнительные вычисления.
3.box-flex — это недавно добавленный атрибут блочной модели css 3. Его внешний вид может решить метод компоновки, который мы реализуем с помощью N multi-structure и css. Классическим приложением макета является вертикальный контур, горизонтальное деление и пропорциональное деление макета.
В настоящее время атрибут box-flex не полностью поддерживается браузерами firefox, Opera и chrome, но вы можете использовать их частные атрибуты для определения firefox (-moz), opera (-0), chrome / safari (-webkit).
Предоставлено несколько атрибутов блочной модели
box-orient | Расположение подэлементов вертикальное (вертикальное) или горизонтальное (горизонтальное) |
box-flex | Соотношение между родственными элементами — это всего лишь коэффициент |
box-align | расположение коробки |
box-direction | Направление коробки |
box-flex-group | Коэффициент жидкости в группах |
box-lines |
|
box-ordinal-group | Направление расположения дочерних элементов в группе |
-moz-box-pack:end;
-webkit-box-pack:end;
Изображение эффекта
box-pack Вот несколько примеров гибкой коробки
1.
1 Четырехколоночная адаптивная верстка.Изображение эффекта
1.1html
<!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title> Использование webkit-box в css3 </title> </head> <style> .wrap { display:-moz-box; display:box; display: -webkit-box; -webkit-box-orient: horizontal; / * горизонтальный дисплей * / } .child { min-height: 200px; border: 2px solid orangered; -webkit-box-flex: 1; /* Один к одному*/ margin: 20px; font-size: 100px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; / * отображение по центру * / } </style> <body> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div> </body> </html> |
1.
2. Когда один столбец имеет фиксированную ширину, оставшимся двум столбцам могут быть присвоены разные пропорции (трехколоночный макет).Изображение эффекта
HTML-код
<head> <meta charset=»UTF-8″> <title> Использование webkit-box в css3 </title> </head> <style> .wrap { display: -webkit-box; -Webkit-box-orient: horizontal; / * * / } .child { min-height: 200px; border: 2px solid orange; -webkit-box-flex: 1; margin: 10px; font-size: 50px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; } .w100 {width: 100px} . .flex2 {-webkit-box-flex: 2} </style> <body> <div> <div>100px</div> <div>1</div> <div class = «child flex2»> масштаб 2 </div> </div> </body> |
1.1. Ниже приведен базовый макет обычной веб-страницы.
Изображение эффекта
<head> <meta charset=»UTF-8″> <title> Использование webkit-box в css3 </title> </head> <style> header, footer, section { border: 5px solid #FFA500; font-family: Georgia; font-size: 40px; text-align: center; margin: 20px; } #doc { width: 80%; min-width: 600px; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; margin: 0 auto; } header, footer { min-height: 100px; -webkit-box-flex: 1; } #content { min-height: 400px; display: -webkit-box; -webkit-box-orient: horizontal; }
. .flex1 {-webkit-box-flex: 1} .flex2 {-webkit-box-flex: 2} .flex3 {-webkit-box-flex: 3} </style> <body> <div id=”doc”> <header>Header</header> <div id=”content”> <section> фиксированная ширина 200 </section> <section> Пропорция 3 </section> <section> Пропорция 1 </section> </div> <footer>Footer</footer> </div> </body> |
w200 {width: 200px}
Интеллектуальная рекомендация
MFC максимизируйте контроль
Перепечатано: https://www.cnblogs.com/niannian/archive/2012/03/15/2721769.html…
Oracle создает табличное пространство и пользовательскую инструкцию
.
..
Решить: Dubbo не может найти ошибку dubbo.xsd
При создании проекта Dubbo вы столкнетесь: Multiple annotations found at this line:- cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element ‘dubbo:applica…
QT -основанная система передачи файлов LAN
Реализовать основные функции: 1. Сканируйте клиента LAN 2. Непрерывные файлы передачи и каталог 3. Программа автоматического выполнения передачи передачи. 4. Отображение прогресса и статуса Старая вер…
После того, как страница возвращается на предыдущую страницу, записывает значение, выбранное на предыдущей странице Выбрать
На приведенной выше картинке показана карта Идея: кэш Cookie запоминает значение, выбранное на текущей выборе страницы, а затем получить значение cookie при возврате. Шаг 1: введение JS; <script sr…
Вам также может понравиться
Обучение Python (четыре) встроенных функции
import Функция __import __ () используется для динамической загрузки классов и функций.
Если модуль часто меняется, вы можете использовать __import __ () для его динамической загрузки. __import…
Разработка iOS: Получить имя Wi-Fi, WiFi, список WiFi, интенсивность WiFi, WiFi настроек пароля, бирки WiFi Cubtitle
Некоторое время разрабатывает функцию Bluetooth, а функция Bluetooth разработана после разработки Bluetooth.WiFiФункция.WiFiФункция также проста, и основным необходимо импортировать каркас, которая по…
Swing — компонент раскрывающегося списка JComboBox
Обзор Функция раскрывающегося списка состоит в том, чтобы свернуть несколько параметров вместе и отобразить только первый или выбранный вариант. При выборе необходимо щелкнуть нижнюю треугольную кнопк…
Упражнение 8-6 Удаление символов (20 баллов)
Этот вопрос требует простой функции для удаления указанных символов в строке. Определение интерфейса функции: средиchar *strЯвляется ли входящая строка,cЯвляется ли персонаж, который будет удал…
Oracle оценивает конверсию
1.
Создайте таблицу — Create table create table SHUJU1 ( SUBJID NVARCHAR2(20), VISIT NVARCHAR2(50), FORM NVARC…
box-sizing | CSS | WebReference
- Содержание
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Примечание
- Спецификация
- Браузеры
Применяется для изменения алгоритма расчёта ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины содержимого (width), значений margin, padding и border. Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не содержимого, а размеры блока.
| Значение по умолчанию | content-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
box-sizing: content-box | border-box
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- content-box
- Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.
- border-box
- Свойства width и height включают в себя значения padding и border, но не margin.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
content-box border-box
div {
width: 400px;
padding: 20px;
border: 3px dashed #c26558;
box-sizing: {{ playgroundValue }};
}Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>box-sizing</title> <style> .
box1 {
background: #f0f0f0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
border: 2px solid #000; /* Параметры рамки */
}
.box2 {
background: #fc0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */
border: 2px solid #000; /* Параметры рамки */
box-sizing: border-box; /* Ширина блока с полями */
}
</style>
</head>
<body>
<div>Ширина с учетом значения свойства width, полей и границ.</div>
<div>Ширина равна значению свойства width.</div>
</body>
</html>В данном примере ширина первого слоя будет равна 324 пикселя, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселей за счёт применения свойства box-sizing. Результат примера показан на рис. 1.
Рис. 1. Ширина блоков
Объектная модель
Объект.
style.boxSizing
Примечание
Firefox до версии 29 поддерживает свойство -moz-box-sizing.
Safari до версии 5, Chrome до версии 10, Android до версии 4 поддерживают свойство -webkit-box-sizing.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 | Рабочий проект |
| CSS Basic User Interface Module Level 3 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 8 | 12 | 1 | 10 | 7 | 3 | 5.1 | 1 | 29 |
| 1 | 2.1 | 1 | 29 | 9 | 3 | 5,1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Размеры
См. также
- height
- width
- Вкладки на CSS
- Открываем блочную модель
- Размеры блока
- Строчно-блочные элементы
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
Блочная модель и CSS | Основы верстки контента
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
Блочная модель — правила, по которым браузер определяет размер элемента на странице, его ширину и высоту. В этом уроке рассмотрим все правила, которые влияют на блочную модель и научимся менять саму логику расчета размеров элемента.
Вспомним, какие свойства отвечают за ширину и высоту блока:
Внутренние отступы.
В CSS за их установку отвечает свойство paddingГраницы, устанавливающиеся свойством
borderВнешние отступы. За них отвечает свойство
marginВысота и ширина блока, устанавливаемые свойствами
heightиwidth
В CSS за их установку отвечает свойство Реальный размер элемента получится при сложении значений всех этих свойств. Рассмотрим их
Внутренние и внешние отступы
По своим значениям, свойства margin и padding достаточно похожи, за исключением того, «куда» устанавливаются отступы. padding делает отступы внутри элемента, тем самым увеличивая его в размерах
В качестве значения свойство padding принимает четыре числа в следующей последовательности:
отступ сверху. Можно установить отдельно свойством
padding-topотступ справа. Можно установить отдельно свойством
padding-rightотступ снизу.
Можно установить отдельно свойством padding-bottomотступ слева. Можно установить отдельно свойством
padding-left
Можно установить отдельно свойством .element {
padding: 10px 20px 30px 40px;
}
/* Эквивалентно записи */
.element {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}Если внимательно посмотреть на пример выше, то можно заметить, что в качестве значения свойства padding использовалось только одно значение, а не четыре. Свойство padding может принимать несколько разных вариаций сокращенных записей:
Одно значение — устанавливает одинаковый отступ по всем сторонам сразу. Например,
padding: 20pxустановит внутренний отступ в 20px сверху/справа/снизу/слеваДва значения — устанавливает отступы по вертикали и горизонтали. Например,
padding: 20px 30pxустановит внутренний отступ в 20px сверху/снизу и 30px справа/слеваТри значения — устанавливает отступы сверху, по горизонтали и снизу.
Например, padding: 20px 30px 40pxустановит внутренний отступ в 20px сверху, 30px справа/слева и 40px снизу
Например, Все те же самые значения и сокращения используются для свойства margin, которое устанавливает внешние отступы.
Свойство margin не влияет на видимые размеры элементов, но на место отступов не смогут встать другие элементы, поэтому оно входит в формирование общего размера
Сейчас использование этих свойств может показаться не таким очевидным, но впереди вас ждет множество упражнений, в которых будут использоваться эти свойства.
Заметьте, что отступ между вторым и третьим элементом всего 40 пикселей, а не 60, как могло бы подуматься, ведь используется нижний отступ в 40 пикселей от второго элемента и 20 пикселей сверху от третьего. При этом внешние отступы не сложились, а был выбран наибольший из них.
Этот эффект называется схлопыванием внешних отступов — если внешние отступы двух соседних элементов накладываются, то будет выбран тот, который больше.
Границы
Видимые границы элемента можно задать одним из двух свойств:
borderoutline
Различие свойств в поведении:
Их синтаксис похож, поэтому разберем только свойство border, которое является обобщенным для трех свойств:
border-width— ширина границыborder-style— тип границыborder-color— цвет границы
Cвойство border-width тоже сокращенное, что может сводить с ума. Если указано одно значение, то ширина устанавливается для всех сторон одновременно, что в большинстве случаев достаточно. Сокращения же повторяют сокращения свойств margin и padding:
.border {
/* Одного свойства недостаточно для создания границ */
border-width: 2px;
}Границы могут быть разного типа: сплошные, пунктирные и т.д. За определение типа границы отвечает свойство border-style, которое может принимать одно из значений:
Здесь работает принцип: «лучше один раз увидеть, чем сто раз услышать»
Последнее свойство — border-color, которое устанавливает цвет границе.
Вы можете использовать инструмент разработчика DevTools или специальные сайты, где дается возможность выбрать цвет и получить его hex значение. Ссылка на один из таких сайтов будет в конце урока.
Зная все основные свойства, можно объединить их единым свойством border и записать значения границы, используя только его. Порядок указания не имеет значения, но обычно свойства указывают в той последовательности, в которой они были изучены: border: border-width border-style border-color.
.border {
border: 1px solid #000;
}Изменение блочной модели
На видимый размер элемента влияют следующие свойства:
widthheightpaddingborder
Например, итоговая ширина элемента получается из складывания ширины (свойство width), левого и правого внутреннего отступа (свойства padding-left/padding-right), левой и правой границы (свойства border-left/border-right).
Такое поведение может вставлять палки в колеса, ведь задавая ширину элементу хочется ожидать, что она такой и будет, а не будет дополнительного сложения с другими свойствами. CSS может изменить это поведение и не давать изменять ширину другими свойствами.
Таким свойством является box-sizing. Его роль — определить, будут ли влиять свойства padding/border на формирование конечного размера элемента. Свойство принимает одно из двух значений:
Когда вы будете изучать верстку различных сайтов, то часто будете встречать вот такую запись в CSS:
* {
box-sizing: border-box;
}Это правило означает, что все элементы в HTML не будут добавлять внутренние отступы и границы к итоговой ширине
Изменение типа отображения элемента
HTML элементы можно поделить на несколько условных групп:
Блочные
Строчные
На самом деле вариантов намного больше и со многими вы познакомитесь в процессе изучения курсов, но сейчас важно уметь изменять тип элемента.
Для изменения типа отображения элемента используется свойство display. В качестве значения принимается тип отображения элемента: блочный, строчный, flex-контейнер, с которым вы скоро познакомитесь, и множество других значений. В этом уроке остановимся на трех:
blockinlineinline-block
Эти значения уже встречались вам, даже если это незаметно. Каждый HTML элемент, по умолчанию, имеет установленное свойство display, например:
<p>,<div>,<section>,<ul>— имеют значениеblock<span>,<strong>,<a>— имеют значениеinline
Эти значения можно менять по своему усмотрению. Например, в определенном макете или на определенном разрешении необходимо <span> сделать блочным элементом.
Для этого достаточно изменить одно свойство:
span {
display: block;
}Можно проделать и обратную операцию — превратить блочный элемент в строчный, тогда используется значение inline
p.inline {
display: inline;
}Поведение блоков будет таким, как уже было изучено: блочные элементы будут занимать всю доступную ширину, а строчные в зависимости от контента внутри, причем тип тега уже не будет играть роли.
Интересным значением является inline-block. По его названию кажется, что это одновременно и блочный и строчный элемент, но это не так. Такое отображение создает совершенно новый тип элемента, который еще не встречался. Очень подробно про него можно прочитать в статье, которая указана в конце урока. Если вы хотите глубже в этом разобраться, то рекомендуем ознакомиться с ней.
А что же в практическом плане дает значение inline-block?
В отличие от
inlineесть возможность использовать свойстваwidthиheight. Обычный строчный элемент игнорирует эти свойства, так как размер определяется контентом внутри и не может быть изменен с помощью CSSНа такой элемент свойства
margin/padding/borderприменяются как на обычный блочный элементВ отличие от блочного элемента его могут «обтекать» другие элементы, то есть он может вести себя как обычный
inlineэлемент
Обычный строчный элемент игнорирует эти свойства, так как размер определяется контентом внутри и не может быть изменен с помощью CSScss box-flex — Справочник CodeProject
См. Flexbox для получения дополнительной информации о том, что следует использовать вместо этого свойства.
Пример
HTML
Копировать код
<голова>
-moz-box-flex пример
<стиль>
div. example {
дисплей: -moz-box;
дисплей: -webkit-box;
граница: 1px сплошной черный;
ширина: 100%;
}
div.example > p:nth-child(1) {
-moz-box-flex: 1; /* Мозилла */
-вебкит-бокс-флекс: 1; /* Веб-кит */
граница: 1px сплошной черный;
}
div.example > p:nth-child(2) {
-moz-box-flex: 0; /* Мозилла */
-вебкит-бокс-флекс: 0; /* Веб-кит */
граница: 1px сплошной черный;
}
<тело>
<дел>
Я расширюсь, чтобы заполнить дополнительное пространство
Я не буду расширяться
example {
дисплей: -moz-box;
дисплей: -webkit-box;
граница: 1px сплошной черный;
ширина: 100%;
}
div.example > p:nth-child(1) {
-moz-box-flex: 1; /* Мозилла */
-вебкит-бокс-флекс: 1; /* Веб-кит */
граница: 1px сплошной черный;
}
div.example > p:nth-child(2) {
-moz-box-flex: 0; /* Мозилла */
-вебкит-бокс-флекс: 0; /* Веб-кит */
граница: 1px сплошной черный;
}
<тело>
<дел>
Синтаксис
CSS
Код копирования
/* <число> значений */ -moz-box-flex: 0; -moz-box-flex: 2; -moz-box-flex: 3,5; -вебкит-бокс-флекс: 0; -вебкит-бокс-флекс: 2; -webkit-box-flex: 3.5; /* Глобальные значения */ -moz-box-flex: наследовать; -moz-box-flex: начальный; -moz-box-flex: не установлено; -webkit-box-flex: наследовать; -webkit-box-flex: начальный; -webkit-box-flex: не установлено;
Значения
- <номер>
- Если значение равно 0, поле не увеличивается. Если он больше 0, поле увеличивается, чтобы заполнить часть доступного пространства.
Если он больше 0, поле увеличивается, чтобы заполнить часть доступного пространства.Формальный синтаксис
CSS
Код копирования
Описание
Свойства CSS -moz-box-flex и -webkit-box-flex указывают, как0041 -moz-box или -webkit-box увеличивается, чтобы заполнить блок, который его содержит, в направлении макета содержащего блока. См. Flexbox для получения дополнительной информации о свойствах элементов flexbox.
| Начальное значение | 0 |
|---|---|
| Применяется к | Элементы, которые являются прямыми детьми элемента с CSS - -MOZ-BOX OR -MOZ-INININ или |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | уникальный однозначный порядок, определенный формальной грамматикой |
Совместимость с браузером
- Настольный
- Мобильный
| Особенность | Хром | Firefox (Геккон) | Internet Explorer | Опера | Сафари |
|---|---|---|---|---|---|
| Базовая опора | (Да)-веб-кит | (Да)-mox [1] | Нет поддержки | (Да)-веб-кит | 1. 1-хтмл 3.0-веб-кит |
| Характеристика | Андроид | Chrome для Android | Firefox Mobile (Геккон) | Мобильный IE | Опера Мобайл | Сафари Мобильный |
|---|---|---|---|---|---|---|
| Базовая опора | ? | ? | ? | Нет поддержки | ? | 1.0-веб-кит |
[1] В дополнение к префиксу -moz , в Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) добавлена поддержка -webkit версия свойства с префиксом по причинам веб-совместимости за предпочтением layout.css.prefixes.webkit , по умолчанию false . Начиная с Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) предпочтение по умолчанию равно true .
Примечания
Содержащий блок выделяет доступное дополнительное пространство пропорционально значению гибкости каждого из элементов содержимого.
Элементы содержимого с нулевой гибкостью не увеличиваются.
Если только один элемент содержимого имеет ненулевое значение гибкости, то он увеличивается, чтобы заполнить доступное пространство.
Элементы контента с одинаковой гибкостью увеличиваются на одинаковые абсолютные величины.
Если значение flex установлено с использованием атрибута flex элемента, то стиль игнорируется.
Чтобы элементы XUL в содержащем блоке были одинакового размера, задайте для атрибута equalsize содержащего блока значение всегда . У этого атрибута нет соответствующего свойства CSS.
Уловка, позволяющая сделать все элементы содержимого в содержащем блоке одинакового размера, состоит в том, чтобы присвоить им всем фиксированный размер (например, height: 0 ) и одно и то же значение box-flex больше нуля (например, -moz-box -flex: 1 ).
См. также
ориентация коробки , ориентация коробки , ориентация коробки , гибкая
Технические характеристики
Это свойство является нестандартным расширением.
Был старый черновик спецификации CSS3 Flexbox, в котором определялся box-flex , но с тех пор этот черновик был заменен.
Лицензия
© 2016 Mozilla Contributors
Под лицензией Creative Commons Attribution-ShareAlike License v2.5 или более поздней версии.
https://developer.mozilla.org/en-us/docs/web/css/box-flex
CSS Свойство CSS Справочник по CSS ПотребностиБраузерСовместимость NeedsMobileBrowserСовместимость Нестандартный
Разбиваем ящики с помощью фрагментации CSS — Smashing Magazine
- 15 минут чтения
- CSS, Браузеры
- Поделиться в Twitter, LinkedIn
Об авторе
Рэйчел Эндрю — веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬
Рэйчел Эндрю копалась в спецификации CSS Fragmentation и обнаружила, что поддержка браузера несколько фрагментирована.
В этой статье она объясняет, что такое фрагментация, почему вы можете захотеть ее использовать и каково состояние поддержки браузеров.В этой статье я познакомлю вас со спецификацией фрагментации CSS. Вы, возможно, никогда не слышали об этом, однако, если вы когда-либо создавали таблицу стилей печати и хотели контролировать, где содержимое разрывается между страницами, или макет с несколькими столбцами и хотели, чтобы фигура не разрывалась между столбцами, вы столкнулись с этим.
Я обнаружил, что довольно часто люди сообщают о проблемах с multicol, которые на самом деле связаны с поддержкой браузерами фрагментации. После краткого изложения свойств, содержащихся в этой спецификации, я объясню текущее состояние поддержки браузеров и некоторые вещи, которые вы можете сделать, чтобы заставить их работать так же хорошо, как в ваших многоцветных и печатных проектах.
Что такое фрагментация?
Фрагментация в CSS описывает процесс, посредством которого содержимое разбивается на разные блоки.
В настоящее время у нас есть два места, в которых мы можем столкнуться с фрагментацией в Интернете: когда мы печатаем документ и если мы используем макет с несколькими столбцами. Эти две вещи по сути одинаковы. Когда вы печатаете (или сохраняете в формате PDF) веб-страницу, содержимое фрагментируется на столько страниц, сколько необходимо для печати вашего содержимого.
При использовании нескольких столбцов содержимое фрагментируется на столбцы. Каждое поле столбца похоже на страницу в постраничном контексте. Если вы думаете о наборе столбцов как о наборе страниц, это может быть полезным способом подумать о множестве столбцов и о том, как в нем работает фрагментация.
Если вы посмотрите на спецификацию фрагментации CSS, вы увидите упомянутый третий фрагментированный контекст — это регионы. Поскольку в настоящее время нет пригодных для использования реализаций регионов, мы не будем рассматривать их в этой статье, а вместо этого рассмотрим два контекста, с которыми вы можете столкнуться в своей работе.
Больше после прыжка! Продолжить чтение ниже ↓
Блочные и встроенные блоки
В этой статье я буду часто упоминать блочные блоки. Каждый элемент вашей страницы имеет поле. Некоторые из этих полей расположены в виде блоков: абзацы, элементы списка, заголовки. Говорят, что они участвуют в контексте форматирования блока. Другие являются встроенными, например слова в абзаце, интервалы и элементы привязки. Они участвуют во встроенном контексте форматирования. Проще говоря, когда я говорю о блочном блоке, я имею в виду блоки вокруг таких вещей, как абзацы. Имея дело с фрагментацией, важно знать, с каким типом ящика вы имеете дело.
Для получения дополнительной информации о блочном и встроенном макете см. статью MDN «Блочный и встроенный макет в обычном потоке». Это одна из тех вещей, которые мы, вероятно, все понимаем на каком-то уровне, но, возможно, раньше не сталкивались с терминологией.
Управление разрывами
Независимо от того, создаете ли вы таблицу стилей для печати, используете ли вы специальный агент пользователя для печати для создания PDF-файла или используете несколько столбцов, вы иногда сталкиваетесь с проблемами, которые выглядят примерно так.
В приведенном ниже примере с несколькими столбцами у меня есть некоторый контент, который я отображаю в виде трех столбцов. В середине содержимого находится выделенная область, разбитая на две колонки. Я не хочу такого поведения — я бы хотел, чтобы коробка оставалась вместе.
Блок разбивается на два столбца (Большой предварительный просмотр) Чтобы исправить это, я добавляю свойство breakinside: избегайте в блоке. Свойство break-inside управляет разрывами внутри элементов, когда они находятся в фрагментированном контексте. В браузере, который поддерживает это свойство, поле теперь останется в одном из столбцов. Однако столбцы будут выглядеть менее сбалансированными, что, как правило, лучше, чем в конечном итоге с разделением рамки между столбцами.
См. пример взлома Pen Simple от (Rachel Andrew.
См. пример Pen Simple break-inside by (Rachel Andrew).
Свойство break-inside является одним из свойств, подробно описанных в спецификации фрагментации. Полный список свойств выглядит следующим образом:
-
break-before -
Break-Affter -
ВНУТРЕНИЕ -
Сироты -
ВИДОВ -
. на то, что на самом деле происходит в браузерах.. Если у вас естьсо значениемh3, за которым следуют два абзацаСвойства используются в селекторах, которые нацелены на элемент, который вы хотите разбить до или после.
Например, вы можете захотеть, чтобы ваша таблица стилей печати разбивалась на новую страницу каждый раз, когда появляется заголовок уровня 2. В этом случае вы должны использовать
break-before: pageдля элементаh3. Это контролирует фрагментацию и гарантирует, что перед блоком элемента h3всегда есть разрыв.h3 { перерыв перед: страница; }Другим распространенным требованием является предотвращение того, чтобы заголовки оказывались последними на странице или в столбце. В этом случае вы можете использовать
прервать послесо значениемизбежать. Это должно предотвратить разрыв сразу после блока элемента:h2, h3, h4, h5 { перерыв после: избегать; }Фрагменты внутри фрагментов
Возможно, фрагментированный элемент вложен внутри другого. Например, наличие multicol внутри чего-то, что выгружается. В этом случае вы можете захотеть контролировать разрывы для страниц, но не для столбцов, или наоборот. Вот почему у нас есть такие значения, как
страница, которая всегда вызывает разрыв до или после элемента, но только тогда, когда фрагмент является страницей. Илиизбежать страницы, которая позволит избежать разрыва до или после элемента только для постраничных контекстов.То же самое относится и к столбцам. Если вы используете столбец
, это всегда приводит к разрыву до или после этого элемента, но только для контекстов с несколькими столбцами. Значение). К 2009 году они исчезли, и черновик был в спецификации multicol для свойств разрыва без префикса, которые в конечном итоге попали в спецификацию фрагментации CSS.Avoid-columnпредотвратит разрыв в контекстах с несколькими столбцами.Есть
всегда значениев спецификации уровня 4, что указывает на то, что вы хотите разбить все — страницу или столбец. Однако, как недавнее дополнение к спецификации, в настоящее время оно нам не нужно.Дополнительные значения для постраничных носителей
Если вы создаете книгу или журнал, у вас есть левая и правая страницы. Возможно, вы захотите контролировать разбиение, чтобы принудительно разместить что-либо на левой или правой странице разворота. Следовательно, использование следующего кода вставит один или два разрыва страницы перед
h3, чтобы убедиться, что он отформатирован как правильная страница.h3 { перерыв-перед: справа; }Существуют также значения для лицевой и оборотной сторон, которые относятся к последовательности страниц , так как книги, написанные на языке, написанном вертикально или справа налево, имеют другую последовательность страниц, чем книги, написанные на английском языке.
Я не буду подробно рассматривать эти значения в этой статье, так как на этот раз меня в первую очередь интересует то, что возможно из браузера.взломМы уже видели пример свойства
взлома. Это свойство управляет разбиением внутри блок-боксов, т.е. внутри абзаца, заголовка или div.Вещи, которые вы, возможно, не захотите разбивать, могут включать рамку, как описано выше: рисунки, подписи к которым не должны отделяться от изображения, таблицы, списки и т. д. Добавьте
break-inside: избегайтедля любого контейнера, который вы не хотите ломать в любом контексте фрагментации. Если вы хотите избежать разрывов между столбцами, используйтевзлом: избежать столбцаи между страницамивзлома: избежать страницы.сиротивдовСвойствасиротивдовсвойства касаются того, сколько строк должно оставаться до или после разрыва (вызванного столбцом или новой страницей). Например, если я хочу, чтобы в конце столбца не оставалось ни одной строки, я бы использовал свойство сирот, как в типографике сирота — это первая строка абзаца, которая появляется одна в нижней части столбца. страница с оставшейся частью абзаца, разбитой на другую страницу. Свойство должно быть добавлено к тому же элементу, который фрагментируется (в нашем случае — контейнеру multicol)..контейнер { количество столбцов: 3; сироты: 2; }Чтобы контролировать, сколько строк должно быть вверху столбца или страницы после разрыва, используйте
widows:.container { количество столбцов: 3; вдовы: 2; }Эти свойства относятся к разрывам между встроенными блоками, такими как строки слов внутри абзаца. Поэтому они не помогают в ситуации, когда заголовок или другой блочный элемент находится один внизу столбца или страницы, для этого вам понадобятся свойства разрыва, рассмотренные выше.
Box Decoration
Последнее свойство, которое может представлять интерес, это свойство
box-decoration-break. Это контролирует ситуацию, когда у вас есть поле с разорванной границей между двумя столбцами или страницами. Вы хотите, чтобы граница была разрезана пополам? Или вы хотите, чтобы каждая из двух половинок коробки была полностью обернута рамкой?Первый сценарий используется по умолчанию, как если бы вы установили для свойства
box-decoration-breakзначениеslice 9.0042 на коробке..box { box-decoration-break: slice; }Значение slice означает, что граница фактически разделена пополам (большой предварительный просмотр).Чтобы получить второе поведение, установите
box-decoration-breakна clone..box { box-decoration-break: клон; }Значение clone означает, что рамка полностью обернута вокруг каждого фрагмента блока (большой предварительный просмотр)Поддержка фрагментации браузером
Теперь мы подошли к причине, по которой у меня нет нескольких примеров CodePen выше, чтобы продемонстрировать все это.
вам, и главная причина, по которой я пишу эту статью. Браузерная поддержка этих свойств невелика.Если вы работаете в Paged Media с определенным пользовательским агентом, таким как Prince, вы можете наслаждаться действительно хорошей поддержкой фрагментации и, вероятно, найдете эти свойства очень полезными. Если вы работаете с веб-браузером, либо в многоцветном режиме, создавая таблицы стилей для печати, либо используете что-то вроде Headless Chrome для создания PDF-файлов, поддержка несколько неоднородна. Вы обнаружите, что браузер с лучшей поддержкой — это Edge — пока он все равно не перейдет на Chromium!
Can I Use не слишком полезен для объяснения поддержки из-за смешивания свойств фрагментации с multicol, а затем наличия некоторых отдельных данных для устаревших свойств. Итак, в рамках работы, которую я выполнял для MDN по документированию свойств и их поддержки, я начал тестировать реальную поддержку браузера. Далее следует несколько советов, основанных на этом тестировании.
Устаревшие свойства и префиксы поставщиков
Я не могу идти дальше без урока истории. Если вы обнаружите, что вам действительно нужна поддержка фрагментации, вы можете найти некоторое облегчение в устаревших свойствах, которые изначально были частью CSS2 (или в некоторых существующих префиксных свойствах).
В CSS2 были свойства для управления разрывом страницы. В то время Multicol не существовало, поэтому единственным фрагментированным контекстом был постраничный контекст. Это означало, что были введены три конкретных свойства разрыва страниц:
-
page-break-before -
page-break-after -
page-break-inside
Эти свойства работают аналогично более общим свойствам страницы 02-904 без префикса 02-904 контроль перерывов до, после и внутри боксов. Для таблиц стилей печати вы обнаружите, что некоторые старые браузеры, которые не поддерживают новые свойства
break-, поддерживают эти свойства префикса страницы. Свойства рассматриваются как псевдонимы для новых свойств.В рабочем проекте спецификации multicol от 2005 года подробно описаны свойства разрыва для multicol — с использованием свойств с префиксом
column-(т. -внутриОднако некоторые свойства столбцов с префиксом поставщика были реализованы на основе этих свойств. Это:
-
-WEBKIT-Column-Break-Before -
-WEBKIT-Column-Break-After -
-WEBKIT-Column-Break-Break-Break-Break-INSIDE
. Поддержка For For Cragment in MiltoL in MiltoLOL в MildAlOL в MildAlOL в MildAlOL в MildAlOL в MildAlOL в MildAlOL
. на основе тестирования этих функций в многоцветных контекстах. Я пытался объяснить, что возможно, но взгляните на CodePens в любом доступном браузере.Разноцветный И
Взлом внутриПоддержка в многоцветном цвете лучше всего подходит для
взломсобственности. Все последние версии Chrome, Firefox, Edge и Safari поддерживаютbreak-inside: избегайте. Таким образом, вы должны обнаружить, что вы можете предотвратить разрыв блоков между столбцами при использовании multicol.Некоторые браузеры, за исключением Firefox, поддерживают свойство
-webkit-column-break-inside, его можно использовать со значением, избегая, и это может предотвратить разрыв блоков между столбцами, которые не поддерживают. взлом.Firefox поддерживает
разрыв страницы внутри: избегайтев многоцветном формате. Таким образом, использование этого свойства предотвратит разрывы внутри блоков в браузерах Firefox до Firefox 65.Это означает, что если вы хотите предотвратить разрывы между блоками в многоцветном коде, использование следующего CSS будет охватывать максимально возможное количество браузеров, возвращаясь в прошлое.
насколько это возможно..box { -webkit-column-break-inside: избегать; разрыв страницы внутри: избегать; Взлом внутрь: избегать; }Что касается значения столбца
, явно указывающего, что вы хотите избежать разрывов только между столбцами, а не страницами, работает во всех браузерах, кроме Firefox.Приведенный ниже CodePen объединяет некоторые из этих тестов в несколько столбцов, чтобы вы могли попробовать их сами.
См. «Тест фрагментации пера Multicol: взлом», Рэйчел Эндрю.
См. «Тест фрагментации пера Multicol: взлом», Рэйчел Эндрю.Многоцветный А
Разрыв передДля предотвращения разрывов перед элементом необходимо уметь использовать
break-before: избегайтеилиbreak-before: избегайте столбца. Свойство избежать не поддерживается браузером.Край поддерживает
break-before: столбец, чтобы всегда форсировать разрыв перед блоком элемента.Safari, Chrome и Edge также поддерживают
-webkit-column-break-before: всегда, что приводит к разрыву перед блоком элемента. Поэтому, если вы хотите сделать разрыв перед блоком элемента, вы должны использовать:.box { -webkit-column-break-before: всегда; перерыв перед: столбец; }Предотвращение разрыва перед ящиком в настоящее время является невыполнимой задачей. Вы можете поэкспериментировать с некоторыми примерами этих свойств ниже:
См. Тест фрагментации Pen Multicol: break-before Рэйчел Эндрю).
См. Тест на фрагментацию Pen Multicol: break-before Рэйчел Эндрю).Multicol And
break-afterЧтобы предотвратить разрыв после элемента, чтобы он не стал последним в нижней части столбца, вы должны иметь возможность использовать
break-after: избежатьиперерыв после: избегайте столбца. Единственный браузер, поддерживающий их, — Edge.Edge также поддерживает принудительное прерывание после элемента с помощью
break-after: column, Chrome поддерживаетbreak-after: column, а также-webkit-column-break-after: always.Firefox не поддерживает
break-afterили какие-либо префиксные свойства для принудительного или разрешения разрывов после блока.Поэтому, кроме Edge, вы действительно не можете избежать разрывов после коробки. Если вы хотите принудительно их использовать, вы получите результаты в некоторых браузерах, используя следующий CSS:
.ящик { -webkit-break-after: всегда; перерыв после: столбец; }См. Тест на фрагментацию пера Multicol: перерыв после Рэйчел Эндрю).
См. Тест на фрагментацию Pen Multicol: перерыв после Рэйчел Эндрю). Поддержкапри печати из браузера
Независимо от того, печатаете ли вы напрямую из браузера на рабочем столе или создаете PDF-файлы с помощью Chrome без заголовка или другого решения, основанного на технологии браузера, не имеет значения.
Вы зависите от поддержки браузером свойств фрагментации.Если вы создадите таблицу стилей для печати, вы обнаружите ту же поддержку свойств разрыва, что и для multicol; однако для поддержки старых браузеров вам следует удвоить свойства, чтобы использовать свойства с префиксом
page-.Таблицы стилей печати и
break-insideВ современных браузерах свойство
break-insideможно использовать для предотвращения разрывов внутри блоков. Добавьте свойствоpage-break-inside, чтобы добавить поддержку старых браузеров..ящик { разрыв страницы внутри: избегать; Взлом внутрь: избегать; }Таблицы стилей печати И
break-beforeДля принудительного разрыва перед блоком используйте
break-before:pageвместе сpage-break-before: всегда..box { разрыв страницы до: всегда; перерыв перед: страница; }Чтобы избежать разрывов перед блоком, используйте
break-before: избежать страницывместе сpage-break-before: избежать..box { page-break-before: избегать; break-before: избежать-страницы; }Поддержка значений
страницыиизбежать страницылучше, чем для эквивалентных многоцветных значений. Большинство современных браузеров имеют поддержку.Таблицы стилей печати И
break-beforeДля принудительного разрыва после блока используйте
break-after: pageвместе сpage-break-after: всегда..box { разрыв страницы после: всегда; перерыв после: страница; }Для предотвращения поломок после использования коробки
break-after: избежать страницывместе сpage-break-after: избежать..box { разрыв страницы после: избегать; перерыв после: страница избегания; }Widows And Orphans
Свойства
widowsиorphansимеют хорошую кросс-браузерную поддержку — единственным браузером без реализации является Firefox. Я бы предложил использовать их при создании многоцветного макета или таблицы стилей печати. Если они по какой-то причине не работают, вы получите вдов и сирот, что не идеально, но и не является катастрофой. Если они действительно работают, ваша типографика будет выглядеть еще лучше.box-decoration-break
Последнее свойство
box-decoration-breakподдерживает многоцветность и печать в Firefox. Safari, Chrome и другие браузеры на основе Chromium поддерживают-webkit-box-decoration-break, но только для встроенных элементов. Таким образом, вы можете клонировать границы вокруг строк предложения, например; у них нет поддержки в контексте, который мы рассматриваем.В CodePen ниже вы можете увидеть, что тестирование на
-webkit-box-decoration-break: cloneс запросами функций возвращает true; однако это свойство не влияет на границу поля в контексте с несколькими столбцами.См.
See the Pen Multicol: декорация коробки Рэйчел Эндрю. Ручку Multicol: коробка-украшение-брейк Рэйчел Эндрю.Использование фрагментации
Как видите, текущее состояние фрагментации в браузерах несколько фрагментировано! Тем не менее, есть разумная сумма, которую вы можете достичь, а там, где это не удается, результат, как правило, неоптимальный, но не катастрофический. А значит стоит попробовать.
Стоит отметить, что чрезмерное обращение с этими свойствами может привести к чему-то другому, чем вы надеялись. Если вы работаете в Интернете, а не печатаете и принудительно разрываете столбцы после каждого абзаца, то в конечном итоге у вас будет больше абзацев, чем места для столбцов, многоколонка в конечном итоге переполнится в направлении строки. У него закончатся столбцы для размещения дополнительных абзацев. Поэтому даже там, где есть поддержка, вам все равно нужно тщательно тестировать и помнить, что во многих случаях чем меньше, тем лучше.
Дополнительные ресурсы
Чтобы узнать больше о свойствах, перейдите на MDN, я недавно обновил там страницы, а также стараюсь обновлять данные совместимости браузера.
Главная страница CSS-фрагментации содержит ссылки на отдельные страницы свойств, на которых есть дополнительные примеры, данные о совместимости браузеров и другая информация об использовании этих свойств.Базовый обзор блочной модели CSS
CSS — один из лучших способов управления дизайном и функциональностью вашего веб-сайта.
Прежде чем это сделать, вы должны сначала понять один из самых фундаментальных принципов веб-дизайна: блочную модель CSS. CSS — или каскадные таблицы стилей — позволяет вам вносить стилистические изменения в макеты веб-страниц и элементы на этих страницах, чтобы в конечном итоге улучшить внешний вид вашего сайта.
- Что такое блочная модель CSS и как она работает?
- Элементы блочного уровня
- Встроенные элементы
- Примеры блочной модели CSS
- Пример заполнения
- Границы Пример
- Поля Пример
- Использование блочной модели CSS для вашего веб-сайта
Используя приведенные выше ссылки, вы можете быстро перейти на эту страницу, чтобы найти нужный контент.
Давайте начнем.Что такое блочная модель CSS и как она работает?
Блочная модель CSS — это набор правил, которые помогают определять, как элементы отображаются на вашем веб-сайте или в веб-проекте. Он определяет параметры элементов, их границы и расстояние как внутри, так и снаружи целевого элемента.
Что такое блочная модель в CSS?
Блочная модель в CSS представляет собой набор правил, определяющих, как ваша веб-страница отображается в Интернете. В этой модели для HTML-элементов создается прямоугольный блок. Каждый из них расположен в соответствии с его размером, типом, расположением, отношением к другим элементам и внешними факторами, такими как размер области просмотра. Это поле состоит из содержимого, заполнения, границы и поля.
Вот пример, иллюстрирующий каждый слой блочной модели CSS. Мы обсудим эти слои более подробно ниже.
Источник изображения
Это означает, что любая веб-страница, которую вы видите, состоит из элементов, заключенных в прямоугольные блоки и расположенных относительно друг друга.
Эти элементы могут существовать рядом, выше, ниже и внутри друг друга, в зависимости от типа элемента, которым они являются.Существует два типа элементов HTML: элементы блочного уровня и встроенные элементы. Давайте подробнее рассмотрим каждый ниже.
Блочные элементы
По умолчанию блочные элементы начинаются с новой строки и занимают 100% доступного пространства — это может быть полная ширина окна просмотра или его контейнера, если он находится внутри другого элемента. Поскольку по умолчанию они начинаются с новой строки, блочные элементы прерывают поток документа.
Как упоминалось ранее, элементы блочного уровня могут содержать другие элементы, включая встроенные элементы и другие элементы блочного уровня. Например, элемент div может содержать заголовок, абзац или другой элемент div.
Если к блочному элементу применены свойства padding, border и margin, другие элементы будут вытеснены из рамки вокруг элемента. В результате этого — и того факта, что они охватывают всю ширину своего контейнера — блочные элементы занимают больше места, чем встроенные элементы, и могут создавать более крупные структуры.
Конечно, ширину и высоту этих элементов можно указать в CSS, чтобы они занимали меньше места.
Элементы уровня блока включают следующее:
,
,
,
,
,
,
,
- ,
- ,
, ,
,
- ,
, -
Это контролирует фрагментацию и гарантирует, что перед блоком элемента 
Я не буду подробно рассматривать эти значения в этой статье, так как на этот раз меня в первую очередь интересует то, что возможно из браузера.
Например, если я хочу, чтобы в конце столбца не оставалось ни одной строки, я бы использовал свойство 
Это контролирует ситуацию, когда у вас есть поле с разорванной границей между двумя столбцами или страницами. Вы хотите, чтобы граница была разрезана пополам? Или вы хотите, чтобы каждая из двух половинок коробки была полностью обернута рамкой?
вам, и главная причина, по которой я пишу эту статью. Браузерная поддержка этих свойств невелика.
Свойства рассматриваются как псевдонимы для новых свойств.
насколько это возможно.
Единственный браузер, поддерживающий их, — Edge.
Вы зависите от поддержки браузером свойств фрагментации.
Я бы предложил использовать их при создании многоцветного макета или таблицы стилей печати. Если они по какой-то причине не работают, вы получите вдов и сирот, что не идеально, но и не является катастрофой. Если они действительно работают, ваша типографика будет выглядеть еще лучше.
Ручку Multicol: коробка-украшение-брейк Рэйчел Эндрю.
Главная страница CSS-фрагментации содержит ссылки на отдельные страницы свойств, на которых есть дополнительные примеры, данные о совместимости браузеров и другая информация об использовании этих свойств.
Давайте начнем.
Эти элементы могут существовать рядом, выше, ниже и внутри друг друга, в зависимости от типа элемента, которым они являются.