Фото Сергея Белосова
Блог Сергея Белоусова
  • - Разработка сайтов
  • - Обучаю профессиональной верстке
  • - Консультации по разработке сайтов и поиску клиентов
Мои контакты: skype skype skype skype

Урок 2-2

Блочные и строчные модели элементов



<span> - это строчный универсальный элемент, служит в основном для того что бы оформить участок текста при помощи css

Браузер по умолчанию определяет модель элементов:

Список блочных (block):
<body>, <ul>, <ol>,  <li>, <p>, <h1> - <h6>, <section>, <div>, <article>, <header>, <footer>, <form>, <hr>, <nav>

Список строчных (inline):
<img>, <span>, <a>, <strong> ... и все остальные теги оформления текста, кроме тех что перечислены в списке блочных элементов

Список строчно-блочных (inline - block):
<button>, <input>, <select>, <textarea>

Это далеко не полный список тегов которые существуют в HTML, их гораздо больше. Но из полного списка используется примерно 20%. Я вам рассказываю про теги которые использую сам регулярно в своих проектах. Если какие-то теги я не упоминаю, значит они не понадобятся нам в будущем. В дальнейшем я дам вам информацию по всем тегам и свойствам CSS для общего кругозора, но сейчас затачиваем внимание только на том что нам не обходиомо в данный момент.

Вопросы по уроку:

  1. Опишите своими словами, как вы поняли понятие блочные и строчные элементы и чем они отличаются.
  2. При помощи какого css свойств и значений можно изменять модель элемента ?
  3. Свойства width и height что обозначают и какой модели элемента мы можем их применять ?
  4. Что обозначает свойство margin ? К каким моделям элементов применяется и каким образом ? Перечислите все способы написания значений в margin.
  5. Что обозначает свойство padding? К каким моделям элементов применяется и каким образом ? Перечислите все способы написания значений в padding.
  6. Опишите своими словами, как вы поняли inline-block и чем он отличается от block и inline.

Напишите заключение по уроку:

  1. Что понравилось и что не понравилось.
  2. Все ли понятно ? Доходчиго ли я объясняю ?