Войти
» » » Блоковая модель в CSS

Блоковая модель в CSS

Блоковая модель в CSS

В этой статье мы разберём блоковую можель CSS, что считается блоком, а что нет и как правильно оформлять блоки в CSS.

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

Основными или наиболее популярными блочными элементами являются H1-H6, P, div (при разметки сайта используют div).
А строчными элементами считаются теги выделения части текста или отдельных слов: strong , EM , I. (с помощью их можно выделить жирным важное слово или сделать ссылку курсивным шрифтом).

Теперь непосредственно о CSS: в стилях CSS так же используется понятие блоков. Все блоки в CSS являются самостоятельной еденицей и всега имеют прямоугольную форму. Другими словами – каждяый элемент является смостоятельным блоком. А строчные элементы находятся в блочных и наследуют их свойства, если не задано обратное.

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

Каждый блок имеет поля как внутренние, так и внешние, они служат для красивого или удобного расположения контента на странице сайта.

Margin – отвечает за внутренние отступы в блоке.

Padding – отвечает за расстояние между блоками.

О этих свойствах мы поговорим позденее в отдельной статье.

Так же каждый блок можно выделить рамкой «border» (о них мы тоже поговорим в отдельной статье), они позволяют красиво выделить необходимый блок или придать ему очертания.

Подводя итоги: к каждому отдельному блоку можно прописать размеры, фон, шрифт и всё остальное, так как блок является полностью независимым элементом сайта.

Пример оформления блока в HTML:
<div class="news2">
<section class="news02" itemscope itemtype="http://schema.org/BlogPosting">
<a href="{full-link}" title="{title}"><h2 itemprop="name">{title}</h2></a>
<a href="{full-link}" title="{title}"><img src="{image-1}" alt="{title}"></a>
</section>
</div>

Пример оформления блока в CSS:
.news2 {float:left; width:270px; height:300px; background:#f2f2f2; margin:0 0 10px 0; padding:5px}
.news02 {float:left; width:260px; height:300px; text-align:center; margin:0 0 10px 0; border-style: none none solid none; border-color:#000; border-width:1px; padding:5px}
.news02 H2{font:bold 14px cambria, Arial; margin-top:0px;}
.news02 img{width:250px; max-height:200px;}
.news02 img:hover{opacity:0.9}