12788

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

Практическая работа

Информатика, кибернетика и программирование

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

Русский

2013-05-03

24.21 KB

10 чел.

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

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

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


Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из Всеобщей Декларации Прав Человека):

<h1>Article 1:</h1>

<p>All human beings are born free

и equal in dignity и rights.

They are endowed with reason и conscience

и should act towards one another in a

spirit of brotherhood</p>

Добавив цвет и информацию шрифта этот пример можно представить так:

В этом примере - два элемента : <h1> и <p>. Боксовая модель этих элементов выглядит так:

Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом. Боксом, который можно настроить с помощью CSS.

Резюме

В этом уроке вы узнали о боксовой модели. В следующих трёх уроках подробнее остановимся на том, как создавать элементы и управлять ими в боксовой модели.


 

А также другие работы, которые могут Вас заинтересовать

51692. Моделирование проблемных, развивающих личностно ориентированных образовательных ситуаций 131.5 KB
  Ситуации творчества: сущность виды формы: ситуации соревнования заботы игры исследования. Ситуации выбора: выбора деятельности общения позиции социальной роли. Ситуации успеха: сущность алгоритм создания позиция педагога. Соотношение проблемной ситуации задачи вопроса.
51694. Правила поведения при чрезвычайных ситуациях природного характера 31.5 KB
  Молнии Молниевый разряд характеризуется большими токами а его температура доходит до 300000С. Прямое попадание молнии для человека заканчивается смертельным исходом. Если вы заметили грозовой фронт то в первую очередь определите примерное расстояние до него по времени задержки первой вспышки молнии и первого раската грома. Если после первой вспышки молнии до раската грома прошло 5 сек.
51696. Значення мови в житті суспільства. Українська мова – державна мова України 44 KB
  Мета: забезпечити усвідомлення значення мови як основного засобу спілкування формування думки й пізнання значення державної мови як невідємної складової української державності та згуртування громадян; сприяти формуванню патріотичних почуттів і любові до рідної мови; розвивати увагу память логічне й образне мислення удосконалювати навички роботи з підручником і таблицею збагачувати словниковий запас учнів. Орієнтовні запитання до тексту: Чи дано людині від народження вміння спілкуватися за допомогою мови Що зумовило виникнення...
51699. День Збройних Сил України 38.5 KB
  Далі ми пропонуємо такі конкурси для хлопців: 1 конкурс Лівооооруч Хлопці мають вишикуватись у шеренгу. По команді ведучого вони мають різко рівнятися повертатися у той бік у який накаже ведучий. І тільки на РУЧ хлопці мають повертатися.
51700. Формування особистості в початкових класах 28.5 KB
  Особливу роль в цьому напрямку відіграє початкова школа. Початкова школа це Школа радості школа добра родинного затишку милосердя постійного спілкування і співпраці родини вчителів і дітей спрямована на: розвиток природних здібностей; формування духовності; навчання добротворення і виховання почуттєвості через різні види діяльності.