Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это inline и inline-block соответственно.
Порой у вас бывало такое, что меняешь стили, меняешь, а ничего не происходит с элементом. Выстраиваются друг за другом в линию, на отступы не откликается и в таком веселом духе. Знакомо? Отлично, давайте разбираться.
«Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru
Давайте рассмотрим основные свойства встроенных элементов.
- Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
- Встроенные элементы могут содержать:
- Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
- Разные данные (текст)
- Быть пустыми
- Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
- Можно использовать вертикальное выравнивание элементов (vertical-align)
- Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)
По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:
span {display:block;}
Встроенный элемент после таких манипуляций будет вести себя как блочный и примет все новые свойства. (при этом старые уже не действуют)
По сути, блочные и встроенные элементы, имеют противоположные свойства, и во время верстки отлично дополняют друг друга, но порой необходимы и те и другие свойства разных элементов. В таких ситуациях на помощь приходит встроенный блок.
Встроенный блок.
Сразу же рассмотрим его свойства.
- В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
- Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
- Можно выравнивать элементы по вертикали (vertical-align)
- Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
- Выстраиваются друг за другом в одну линию.
- Можно задать ширину и высоту.
Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (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]-->
Надеюсь, теперь вы понимаете разницу между основными блоками. Теперь вы знаете, как себя они будут вести, и как заставить их вести себя.
с/у УтБ
***
В озвучке значимый голос диктора может повлиять на ваше восприятие записи. Выбирайте лучшие голоса!
***
Не знаю как вам, но такие флешмобы очень даже интересно смотреть 
