Понедельник, 05 Ноября 2012 17:08

CSS свойства для отображения блочных и строчных элементов в WebKit браузерах

Written by 
Оцени эту запись
(2 Голоса)

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

 

 

 
display: -webkit-box;
 
Задает блочный элемент
 
 
 
display: -webkit-inline-box;
 
Отображается как строчный элемент
 
 
Подобные способы отображения является реализацией тянущихся блоков Flexible Box описанных в спецификации CSS3, но только для WebKit браузеров. Аналогичные свойства есть также для Firefox, но в их названиях присутствует вендорный префикс -moz-.
 
 
А теперь рассмотрим привилегии, которые дают нам -webkit-box и -webkit-inline-box, а именно CSS свойства, которые применимы к таким элементам.
 
 

-webkit-box-align

 
 
Определяет выравнивание элемента. Допустимые значения: baseline(по базовой линии бокса), center(по центру), end(по конечной части бокса), start(по начальной части) и stretch(на весь бокс). Значение по умолчанию - stretch.
 
Немного поясню. Одно из ниже описанных свойств задает ориентацию бокса. Дочерние элементы в боксе могут располагаться горизонтально или вертикально. Другое свойство дает возможность задать растягивание дочерних элементов в родительском. Потому теперь очень просто разместить, например, 3 блока горизонтально, растянув их по вертикали на 100% родительского, а по горизонтали каждый займет треть.
 
 
<div style="display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: stretch; -webkit-box-pack: center; height: 50px;">
<div style="display: -webkit-box; -webkit-box-flex: 1; ">1</div>
<div style="display: -webkit-box; -webkit-box-flex: 1; ">2</div>
<div style="display: -webkit-box; -webkit-box-flex: 1; ">3</div>
</div>
 
 
1
2
3
 
 
Аналогично и с вертикальным выравниванием. А это очень приятно! :-) Ведь мы знаем, что у обычного блока по умолчанию ширина 100% родительского, а высота зависит от контента. И растянуть блок на 100% родительского по высоте порой бывает затруднительно. А боксы -webkit-box полностью меняют способ разметки страницы.
 
 
Поехали дальше!
 
 

-webkit-box-direction

 
Определяет порядок вывода дочерних элементов - нормальный(normal, по умолчанию) и обратный(reverse).
 
 

-webkit-box-flex

 
Задает возможность бокса растягиваться на пустое пространство родительского. Значение по умолчанию - 0. Это значит, что блок не растягивается, его ширина (высота, 
 
зависит от ориентации родительского) равна ширине (высоте), указанной в стилях. Если у свойства -webkit-box-flex указано значение, отличное от 0, то бокс растягивается в родительском пропорционально с соседними дочерними элементами. Если, например, у всех дочерних боксов -webkit-box-flex:1, то они равномерно заполняют все пространство родительского, имея равные размеры. Если же у одного стоит значение 1, а у соседнего - 2, то первый займет треть родительского, а второй - две трети.
 
 

-webkit-box-flex-group

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

-webkit-box-lines

 
Задает может ли бокс содержать больше одной строки контента. Значение single(только одна строка, по умолчанию) и multiple(несколько строк).
 

-webkit-box-ordinal-group

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

-webkit-box-orient

 
Определяет ориентацию блока. Значения:
 
  • block-axis - дочерние элементы располагаются вдоль оси блока (вертикально)
  • inline-axis - дочерние элементы вдоль оси текста (вертикально)
  • horizontal - дочерние элементы выводятся по горизонтали(по умолчанию)
  • vertical - дочерние элементы выводятся по вертикали
 
 

-webkit-box-pack

 
определяет как выравниваются дочерние элементы в боксе по ориентации бокса. Значения:
 
  • center - дочерние элементы выравниваются по центру 
  • end - выравниваются по концу элемента
  • justify - по ширине элемента
  • start - по началу элемента
 
Значение по умолчанию - start.
Поясню этот момент. Если -webkit-box-orient установлено horizontal, то start равносильно выравниванию по левому краю, а end - по правому.
 
 

-webkit-box-reflect

 
Описывает зеркальное отражение элементы.
В свойстве задается направление отражения(above, below, left, right), расстояние между элементом и отражением и маска для отражения в виде url.
 
 

-webkit-box-shadow

 
Задает эффект тени элементу. Подробно останавливаться не буду, так как свойство достаточно популярное.
 
 

-webkit-box-sizing

 
Определяет будет ли указанных размер бокса включать только контент или контент, внутренние отступы и границы.
Значения:
 
  • content-box - внутренние отступы и границы элементы не входят в размеры(по умолчанию)
  • border-box - ширина и высота элемента включают внутренние отступы и границы, то есть размеры контента меньше указанных размеров блока.
 
Можно провести аналогию с блочными моделями в нормальных браузерах (content-box) и в ИЕ6(border-box).
 
 
 
 

 

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


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов