display

Содержание

Difference between display none and display block
display
Синтаксис
Значения
Объектная модель
Браузеры

Difference between display none and display block

The display property defines how a certain HTML element should be displayed. Display block and none are used to show or hide html elements. You can read more about display property and available options here.

none: The element will not be displayed at all.
block: The element displayed as a block-level element (like paragraphs and headers)

Display:none; — The element is in the DOM but is NOT visible and does not take up any space unlike visibility:hidden .

Display: block; — A block element takes up the full width available and does not allow other elements to be placed beside them. Example: div

These two style properties do two different things.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. (The element will generate no box at all)

display: block the element will span the full width of the space available to it. (a line break before and after the element)

You are asking about a CSS property i think. This is used to show/hide DOM elements

CSS property is display and the value is ‘none’, ‘block’, etc

Referring from : CSS Display as suggested by http://w3fools.com/

Object is rendered as a block element.

Element is not rendered. The element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.

Default. Object is rendered as an inline element sized by the dimensions of the content.

Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.

table-header-group

Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.

table-footer-group

Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.

inline-block

Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.

Источник

display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Синтаксис

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display

Значение Описание IE6 IE7 IE8 Cr2 Cr8 Op9.2 Op10 Sa3.1 Sa5 Fx3 Fx4

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

inline

Элемент отображается как встроенный. Использование блочных тегов, таких как и

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

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

inline-table

Определяет, что элемент является таблицей как при использовании тега

, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

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

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

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

table

Определяет, что элемент является блочной таблицей подобно использованию тега .).

table-caption	Задает заголовок таблицы подобно применению тега .
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег	или	).
table-column	Назначает элемент колонкой таблицы, словно был добавлен тег .
table-column-group	Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега .
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега .
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега .
table-row	Элемент отображается как строка таблицы (тег
table-row-group	Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега .

HTML5 CSS 2.1 IE Cr Op Sa Fx

        <html> 
<body> 
<b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i> 
</body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

[window.]document.getElementById(» elementID «).style.display

Браузеры

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для тегов и ;
для элементов
понимает значение block как list-item ;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для тега ;
значение table-column-group поддерживается только для тега .

Chrome 2.0, а также Safari версии 3 и старше, iOS:

значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline .

Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .

Источник