CSS, HTML
Некоторые полезные возможности CSS и HTML.

Таблица показывает как будет отображаться значение display в различных браузерах.

display: block
Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.


display: inline
Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.

display: none
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.

display: inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

display: inline-table
Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

display: list-item
Элемент выводится как блочный и добавляется маркер списка.

display: run-in
Устанавливает элемент как блочный или встроенный в зависимости от контекста.

display: table
Определяет, что элемент является блочной таблицей подобно использованию тега <table>. Допольнительные варианты стилей: table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group.

БраузерIE 5.5IE 6IE 7IE8IE9 pr3FF 3.0FF 3.5FF 3.6FF 4b1Saf 4.0 WinSaf 5.0 WinChrome 4Chrome 5Opera 10.10Opera 10.53Opera 10.60
block
Да Да Да Да Да
inline
Да Да Да Да Да
none
Да Да Да Да Да
inline-block
Нет Неза-
вершен
Да Да Да Да Да
  • IE 6/7 поддерживает значение только display: inline.
list-item
Нет Да Да Да Да Да
run-in
Нет Да Нет Incorrect Да Да Да
  • Safari, Chrome и Konqueror также поддерживают run-in, когда он идет до элемента со свойствомdisplay: inline.
table
Нет Да Да Да Да Да

Safari 3 и Chrome 1 требуют свойство элемента display: table и display: table-row, чтобы верно отображать клетки. Другим браузерам, включая, Safari 4 и Chrome 2, это не нужно.

БраузерIE 5.5IE 6IE 7IE8IE9 pr3FF 3.0FF 3.5FF 3.6FF 4b1Saf 4.0 WinSaf 5.0 WinChrome 4Chrome 5Opera 10.10Opera 10.53Opera 10.60
Оригинал: quirksmode.org

Реклама на сайте

Здесь
Мануальная терапия, массаж, физиотерапия, ЛФК
doktortela.net
Круглые воздуховоды с фланцами
Где дешевле Воздуховод круглый? Я нашел здесь
altervent.ru