Конспект занятий 5-6

Блочная модель элемента

Мы уже проходили такие стили элементов, как margin, padding, border,width и height. Эти свойства являются универсальными и присущи любым элементам в HTML.

На самом деле, любой элемент на странице представляет собой прямоугольник (бокс), общий размер которого и складывается из перечисленных выше свойств. И как это ни выглядит парадоксальным, свойства width и height не определяют полные ширину и высоту элемента. Что это такое и из чего складываются истинные размеры элементов станет ясно, если мы рассмотрим блочную модель элемента.

Итак, любой элемент представляется следующим образом:

Блочная модель элемента

Т.е. полная ширина элемента складывается по следующей формуле: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. А свойство width лишь определяет ширину содержимого элемента.

Например, полная ширина следующего элемента 

<div style="width:200px; border:2px solid black;padding: 5px; margin: 3px"></div>
будет равна 200+2*2 (толщина левой и правой границы)+5*2 (внутренние отступы слева и справа)+2*3 (внешние отступы)=220 px.

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

h1,p{
	margin: 0px;
}

Упражнение

Сверстать следующий информационный блок
Упражнение для верстки блоками

Этот блок можно посмотреть на главной странице Газеты.Ru. При этом, текст информационного блока необходимо оформить при помощи тега <P>, а заголовок — при помощи тега <H2>.

Свойство display

Как мы уже знаем, элементы на страницах могут быть блочными и строчными. Тем не менее, даже тип элемента можно менять при помощи стилей. Для этого используется свойство display. Так, для того чтобы превратить блочный элемент в строчный используется значение inline, для обратной трансформации — из строчного в блочный, используется значение block. В приведенном ниже примере ссылка превращается в блочный элемент, а тег div в строчный:

<style>
a{
	display: block;
}
div {
	display: inline;
}
</style>

<body>
<a href="#">Блочная ссылка</a>
<div>Строчный див</div>

Также, часто используется значение display: none для того, чтобы сделать элемент невидимым.

Свойство float

Свойство floatпозволяет управлять способами обтекания содержимого элемента другими объектами на странице. До сих пор обтекаемость мы могли настраивать только у изображений при помощи параметра тега <IMG>. Вспомним, как это делалось:

<img src="pic.jpg" align="left" />

Аналогично работает и float. Если float:left;, то элемент прилипает к левому краю, а все содержимое, которое находится ниже в коде страницы начинает обтекать его справа, в случае, если float:right; — ситуация зеркальная: элемент прилипает к правому краю, а остальные элементы обтекают его слева. Приведенный ниже пример показывает, как можно встраивать блок непосредственно в текст. 

<style>
div.cut {
	width: 200px;
	background-color: #c0c0c0;
	float:left;
}
</style>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero sapien, convallis vitae sodales eget, feugiat sit amet odio. 
Nunc sagittis vulputate elit, vel posuere felis hendrerit quis. Maecenas porta suscipit sem, id interdum est ultrices nec. 

<div class="cut">Это Lorem 
ipsum.</div> 

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ullamcorper mauris at nisi mollis venenatis. Proin tempus, lorem ac elementum eleifend, quam nunc 
tincidunt orci, vel fringilla elit tellus sed magna. Donec vehicula vulputate risus id feugiat. Nunc nec ante eget dolor iaculis 
tincidunt ac sed turpis. Mauris non tempus magna. Sed et turpis sit amet lorem facilisis laoreet. Suspendisse tristique 
sollicitudin dictum. Pellentesque ac erat nisi. Nunc non rhoncus urna. Vestibulum interdum nunc eu magna mattis suscipit. 
Nulla facilisi. Proin vel mi egestas lacus sodales varius ut lacinia felis. Morbi consequat urna eu augue condimentum 
facilisis quis sed dolor.

В браузере это будет выглядеть так:

Свойство float

Горизонтальный список

Как мы уже выяснили, на многих сайтах навигационное меню оформляется в виде списков. Но ведь элементы списка располагаются сверху вниз, как в примере приведенном ниже.

Что заставляет эти элементы располгаться один под другим? Такое поведение свойственно для блочных элементов (строго говоря, элементы списка не являются ни блочными ни строчными), но в данном случае это не столь важно. Поэтому, если мы, при помощи уже известного нам свойства display превратим каждый элемент списка в строчный тег, то они должны располагаться по горизонтали. Давайте попробуем:

<style>
ul.horizontal li{
	display: inline;
}
</style>
<body>
<ul class="horizontal">
	<li>Главная</li>
	<li>Документация</li>
	<li>О проекте</li>
</ul>

Вот какой список из этого получится

Да, теперь элементы, как видно, располагаются по горизонтали

Мещанинов Николай ©2011