|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Визуальное представление моделей бокса.

В языках разметки не ставится акцент на визуальном представлении потому что эти языки не умеют изменять модель тегов(боксов), например в HTML можно сказать есть два типа тегов, это блочные, после которых не нужно ставить тег BR, например HTML, BODY H1- H6, P и строчные теги, после которых нужно ставить BR при необходимости.
При помощи каскадных стилей мы можем все теги разделить не на две модели, а на восемь основных групп. И не только разделить, но и "поменять природу" например из строчных сделать блочные и наоборот, т.е. тег H1 превратить в SMALL или наоборот.

Визуальное представление модели бокса устанавливается при помощи свойства display, т.е. P{display: модель бокса}. Без необходимости изменять модель блока нет смысла, а так-же не требуется устанавливать модель бокса повторно, например P{display: block} или B{display: inline}, потому что тег P и есть блочный тег, а B строковый, но есть ситуации когда нужно изменить умолчания, но что чтобы это сделать нужно понять принцип действие модели.

Мы знаем что для CSS все теги являются объектами, но эти объекты в свою очередь делятся на категории:

1) display: block - эта модель бокса и есть по умолчанию для тегов BODY, H1-H6, P, DIV и других. Блок(block) это прямоугольная форма, которой можно управлять размерами(высотой и шириной) что в свою очередь позволяет управлять содержимым, например позиционировать, т.е. передвигать содержимое в любую область окна просмотра(порт просмотра). Другими словами Блок подразумевается Содержащий блок, который содержит в себе блоки, бокс-блоки или анонимные блоки. Анонимный блок(не объявленный явно), например:
<DIV> анонимный блок
<P>блок</P>
анонимный блок
</DIV>
Тег DIV есть блок-боксом, но в данном примере он содержит в себе другой блок-бокс(тег P), который в свою очередь разделяет DIV на три бокса, контент до тега P и после и есть анонимными блоками.

2)display: inline эта модель боксов которые не образуют новых боксов, например теги B, IMG, EM, A и другие. В свою очередь инлайн-боксы могут содержать в себе другие инлайн-боксы, так-же существуют анонимные инлайн боксы:
<P>Анонимный <EM> инлайн(встроенный)</em> бокс.</P>
Слова "Анонимный" и "бокс" и есть анонимные инлайн-боксы.

3)display: list-item эта модель генерирует основной блок-бокс списка(UL, OL DL), а так-же элементы списка(LI, DT и DD) , но более подробно мы поговорим о этой модели когда будем изучать управление списков в CSS.

4)display: marker эта модель управляет элементами, а если быть точнее то маркерами, но об этом поговорим при изучении списков в CSS.

5)display: run-in эта модель может быть и display: inline и display: block, все зависит от контента который следует за ним.
Например H1{display:run-in;}, если после H1 идет тег P или DIV(т.е. блочные), то содержание тега H1 становится первым инлайн-блоком(display: inline) в блок-боксе, а если за H1 идет просто анонимный блок, то H1 остается самим собой(display: block).

6)display: compact эта модель почти аналог предыдущей, например если за H1 идет блок-бокс и содержимое тега H1 помещается в пределах одной строки, то это содержимое становится первым инлайн-боксом в блок-боксе. Но если за тегом H1 не идет блок-бокс или содержимое не вставляется в пределах одной строки, то это содержимое становится display: block.
П.С. Браузер Mozilla FireFox не поддерживает свойства display:compact и display:run-in.

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

8)display: table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption , при установке этих значений боксы ведеут себя как элементы таблицы, есть конечно исключения, но о них вы узнаете из глав от таблицах.

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!