12788

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

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

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

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

Русский

2013-05-03

24.21 KB

9 чел.

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

Боксовая модель в 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.

Резюме

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


 

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

53192. Гра не тільки розважає, а й здоров’я додає! 94.5 KB
  Від ставлення людини до особистого здоров’я залежить його збереження та зміцнення. Одне з найважливіших завдань сучасної школи – навчити дітей та їх батьків берегти і зміцнювати своє здоров’я. Вчитель повинен сформувати в учнів свідоме ставлення до свого здоров’я надати життєві навички здорового способу життя та безпечної для здоров’я поведінки.
53193. Літературна гра на тему: Шевченко - художник 32.5 KB
  Шевченка створена на тему його однойменної поеми Катерина Картина проектується на екран. На екран проектується репродукція картини Т.На екран проектується обкладинка першого видання Кобзаря. ВовчкуАвтопортрет зі свічкою Репродукція проектується на екран.
53194. Гра «Поле чудес» План-конспект узагальнюючого уроку на тему «Світлотінь» для 6 класу 308 KB
  Завдання можуть бути суто теоретичними а можуть чергуватися практичні та теоретичні питання. Нас чекають цікаві завдання відкриття призи. Познайомимося з умовами гри: Розподіл барабана на сектори: Кожен сектор має своє позначення: Намальований пензлик це означає що гравуць отримує практичне завдання виконати в кольорі аквареллю на папері пейзаж натюрморт розмивання набризк і т. Намальований олівець практичне завдання виконати простим олівцем малюнок геометричне тіло з світлотінню глечик вазу і т.
53195. Фізико-математична гра «Щасливий випадок» 241.5 KB
  Правила: В цьому раунді кожній команді буде задано деяку кількість простих запитань з математики, інформатики, фізики та астрономії за обмежений час (1 хв.) Кожна правильна відповідь оцінюється 1 балом. Приймаються лише перші відповіді команди. Якщо ніхто з учасників команди не знає відповіді на запитання, можна говорити «Пас» або «Далі». Очки при цьому не нараховуються.
53196. Гра – тренінг «Обираємо професію разом» 41.5 KB
  Учитель: одна мудра людина сказала: Щастяце коли хочеться іти на працю а у вечорі йти додому Просто правда Але тільки на перший погляд. проводила тест на визначення профорієнтації за результатами цього тесту ви об’єднались в групи: 1 людина людина; 2 людина – техніка; 3 людина – природа; 4 людиназнакова система; 5 людина мистецтво. Завдання 1: на столі знаходяться речі дивлячись на них ви повинні відповісти на такі запитання: людина – людина: 1. Яка ємкість одноразового стаканчика людина техніка: 1.
53197. Мандрівка в народну гру 66 KB
  Їх із задоволенням грають діти і навіть дорослі не проти пограти. Проте у всіх іграх є одна спільна рисанародна мудрість. Гра найважливіша форма дитячої діяльності. Спостережливість уміння володіти собою як гра.
53198. Від навчання до бізнесу 41.5 KB
  Де знаходиться статуя Свободи Париж столиця якої країни Як називається вежа що похилилася але не падає Які іноземні фірми спортивного одягу ви знаєте Техніка якої країни славиться на весь світ Москва столиця якої країни У якому місті знаходиться Ейфелева вежа Священною твариною якої країни є корова На прапорі якої країни є кленовий листок Де знаходиться піраміда Тутанхамона Як називаються всі кістки людини В який телепередачі по Т.К Інтер учні заробляють гроші своїм розумом Як називається каркас...
53200. Игра «Счастливый случай» 51.5 KB
  Как называется самая глубокая часть океана Существует ли море без берегов Где оно расположено На каком материке ветер дует круглый год только на север Где находится самый длинный коралловый риф Назовите цветные моря. Где они находятся Какое озеро самое глубокое в мире Как называются сухие русла рек в Африке Что такое атолл Назовите самый крупный остров у берегов Африки Назовите пролив между Южной Америкой и Антарктидой. На какой реке находится водопад Виктория Как называется ветер меняющий направление два...