Gtalk.kz

Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это  inline  и  inline-block  соответственно.

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

            «Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru

Давайте рассмотрим основные свойства встроенных элементов.

1. Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
2. Встроенные элементы могут содержать:
   1. Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
   2. Разные данные (текст)
   3. Быть пустыми
3. Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
4. Можно использовать вертикальное выравнивание элементов (vertical-align)
5. Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)

По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:

span {display:block;}

Встроенный элемент после таких манипуляций будет вести себя как блочный и примет все новые свойства. (при этом старые уже не действуют)

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

Встроенный блок.

Сразу же рассмотрим его свойства.

1. В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
2. Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
3. Можно выравнивать элементы по вертикали (vertical-align)
4. Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
5. Выстраиваются друг за другом в одну линию.
6. Можно задать ширину и высоту.

Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (float).

Рассмотрим пример, Интернет-магазин. Вывод товаров друг за дружкой блоками в один ряд. Если каждый товар с описанием выводить как блок (списком), то они не будут стоять в ряд. Посмотрим:

</pre>
<ul>
	<li><img src="images/1.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/2.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/3.jpg" alt="" /><a href="#">Товар</a></li>
</ul>
<pre>

Теперь добавим стиль display:inline-block; для ul li – для выравнивания списка. Посмотрите, что получилось. Вуаля, немного волшебства с css и товары будут выглядеть отлично.

В internet explorer 7 и ниже для блочных элементов display:inline-block; отображается не корректно. Поэтому добавим zoom:1; и выставим display:inline; для данных браузеров через условные комментарии:

<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

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

с/у УтБ

***

В озвучке значимый голос диктора может повлиять на ваше восприятие записи. Выбирайте лучшие голоса!

***

Не знаю как вам, но такие флешмобы очень даже интересно смотреть