Компоновка со сливающимися рамками

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

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

ширина строки = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

Каждое свойство border-width описывает рамку между ячейкой i и следующей ячейкой; таким образом, border-width3 описывает рамку между третьей и четвертой ячейками.


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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Выравнивание
Высота

Вернуться в раздел: CSS / 11. Верстка таблиц