18. Блочная модель, padding и margins.
Вообще, элемент HTML можно считать плоской прямоугольной областью (блок, бокс, box).
В CSS термин "блочная модель" ("box model") используется, когда обсуждается дизайн и расположение элементов.
В CSS "блочная модель" ("box model") есть блок (box), который окружает элемент HTML. Состоит этот самый блок из следующих составляющих:
Попробуем для наглядности отобразить блок, у которого область контента будет размером 400х200 пикселей, и в котором имеются (перечисляем от центра к краям): контент, паддинги, бордеры, обводка блока, маржины.
Линейки, справа и ниже исследуемого блока, вы можете двигать по экрану, чтобы, при желании, померить высоту или ширину той или иной области.
Кроме того, настало время научиться пользоваться еще одним дополнением к FireFox - "Web Developer" (Веб Девелопер, Веб Разработчик). Нажмите кнопки Miscellaneous - Disply Ruler (Разное - Показать Линейку) и теперь вы можете измерять расстояния на экране.
Теперь на примере свойства margin разбирем возможности его использования в классах (по аналогии можно те же возможности использовать для свойства padding и др.):
Теперь исследуем маржины, паддинги и пр. свойства блока на практическом примере:
css_018_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_018_001.zip ← скачайте пример, чтобы установить на свой сайт...
Теперь, как говорил мой профессор по CSS: "вопрос для самых сообразительных, чтобы у них окончательно снесло крышу: можно ли использовать для маржинов отрицательные значения, если да, то какой будет эффект?"
Попробуйте ответить на этот вопрос, поигравшись с практическим примером данного урока.
В CSS термин "блочная модель" ("box model") используется, когда обсуждается дизайн и расположение элементов.
В CSS "блочная модель" ("box model") есть блок (box), который окружает элемент HTML. Состоит этот самый блок из следующих составляющих:
- margins - маржины, пограничные области блока, могут соприкасаться с обводкой блока - аутлайном (outline) изнутри. Важно понимать: свойство outline принципиально отличается от свойства border. Толщина линии border учитывается в общей ширине и высоте элемента, а толщина линии outline - не учитывается.
- borders - бордеры, пограничные линии, которые располагаются между маржинами и паддингами (отступами для контента).
- padding - паддинги (отступы для контента), области, которые располагаются между самим контентом и бордерами.
- актуальный контент (actual content) - находится в самой середине блока, как видно из названия, в нем и находится собственно содержание.
Попробуем для наглядности отобразить блок, у которого область контента будет размером 400х200 пикселей, и в котором имеются (перечисляем от центра к краям): контент, паддинги, бордеры, обводка блока, маржины.
Это область паддингов (padding)
Это бордеры (border)
Это обводка блока (аутлайны, outline)
Это маржины, пограничные (самые внешние) области блока (margin)
↑ top (1) ↑
→
right (2)
→
right (2)
→
↓ bottom (3) ↓
←
left (4)
←
left (4)
←
Попробуем для наглядности отобразить блок, у которого область контента будет размером 400х200 пикселей, и в котором имеются (перечисляем от центра к краям): контент, паддинги, бордеры, обводка блока, маржины.
То, что вы читаете здесь называется актуальный контент (actual content) - находится в самой середине блока, как видно из названия, в нем и находится собственно содержание.
Padding - паддинги (отступы для контента), области, которые располагаются между самим контентом и бордерами. В нашем примере толщина всех паддингов равна 50px.
Borders - бордеры, пограничные линии, которые располагаются между маржинами и паддингами (отступами для контента). В нашем примере толщина всех бордеров равна 5px.
Outline - аутлайны (обводка блока) прикасаются своей внутренней стороной с бордерами. Важно понимать: свойство outline принципиально отличается от свойства border. Толщина линии border учитывается в общей ширине и высоте элемента, а толщина линии outline - не учитывается. В нашем примере толщина всех аутлайнов равна 20px.
Margins - маржины, пограничные (самые внешние) области блока. В нашем примере толщина всех маржинов равна 50px.
То, что вы читаете здесь называется актуальный контент (actual content) - находится в самой середине блока, как видно из названия, в нем и находится собственно содержание.
Padding - паддинги (отступы для контента), области, которые располагаются между самим контентом и бордерами. В нашем примере толщина всех паддингов равна 50px.
Borders - бордеры, пограничные линии, которые располагаются между маржинами и паддингами (отступами для контента). В нашем примере толщина всех бордеров равна 5px.
Outline - аутлайны (обводка блока) прикасаются своей внутренней стороной с бордерами. Важно понимать: свойство outline принципиально отличается от свойства border. Толщина линии border учитывается в общей ширине и высоте элемента, а толщина линии outline - не учитывается. В нашем примере толщина всех аутлайнов равна 20px.
Margins - маржины, пограничные (самые внешние) области блока. В нашем примере толщина всех маржинов равна 50px.
Линейки, справа и ниже исследуемого блока, вы можете двигать по экрану, чтобы, при желании, померить высоту или ширину той или иной области.
Кроме того, настало время научиться пользоваться еще одним дополнением к FireFox - "Web Developer" (Веб Девелопер, Веб Разработчик). Нажмите кнопки Miscellaneous - Disply Ruler (Разное - Показать Линейку) и теперь вы можете измерять расстояния на экране.
Теперь на примере свойства margin разбирем возможности его использования в классах (по аналогии можно те же возможности использовать для свойства padding и др.):
- margin-top:100px; - устанавливается маржин 100px только для верха элемента.
- margin-bottom:100px; - устанавливается маржин 100px только для низа элемента.
- margin-right:50px; - устанавливается маржин 50px только для правой стороны элемента.
- margin-left:50px; - устанавливается маржин 50px только для левой стороны элемента.
- margin:25px 50px 75px 100px; - очень часто используемый тип сокращенной записи. Начиная сверху и по часовой стрелке (см нашу схему наверху!) - для верха (1) 25px, для правой стороны (2) 50px, для низа (3) 75px, для левой стороны (4) 100px.
- margin:25px 50px 75px; - редко используемый тип сокращенной записи. Означает следующее - для верха (1) 25px, для правой стороны (2) и для левой стороны (4) 50px, для низа (3) 75px.
- margin:25px 50px; - часто используемый тип сокращенной записи. Означает следующее - для верха (1) и для низа (3) по 25px, для правой стороны (2) и для левой стороны (4) по 50px.
- margin:25px; - часто используемый тип сокращенной записи. Просто и интуитивно понятно: все 4 маржина по 25px.
Теперь исследуем маржины, паддинги и пр. свойства блока на практическом примере:
css_018_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_018_001.zip ← скачайте пример, чтобы установить на свой сайт...
Теперь, как говорил мой профессор по CSS: "вопрос для самых сообразительных, чтобы у них окончательно снесло крышу: можно ли использовать для маржинов отрицательные значения, если да, то какой будет эффект?"
Попробуйте ответить на этот вопрос, поигравшись с практическим примером данного урока.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
