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.

Резюме

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


 

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

51903. Технологии проектирования урока изобразительного искусства. Организационные и методические требования к структуре урока изобразительного искусства 58.7 KB
  Организационные и методические требования к структуре урока изобразительного искусства Как строится урок изобразительного искусства Чтобы разработать план конкретного урока определить его цель и задачи учителю нужно четко представлять место данного урока в содержании курса. Для этого он должен определиться в выборе программы; составить календарнотематический план исходя из конкретных условий разный тип школ различное количество часов разная обеспеченность средствами обучения; точно определить цель урока вычленить главные...
51905. Кредитно – денежная система. Монетарная политика 48.5 KB
  Функции центрального банка: разработка и реализация денежно – кредитной политики; эмиссия и изъятие денег из обращения; хранение золотовалютных резервов страны; выполнение кредитных и расчётных операций для правительства; контроль за деятельностью коммерческих банков и т. функция замещения наличных денег кредитными операциями. Процесс создания денег. Денежный мультипликатор Предложение денег на денежном рынке увеличивается или уменьшается в результате деятельности коммерческих банков за счет так называемых кредитных денег.
51906. Психологический анализ урока 38 KB
  В ходе анализа рассматривается насколько урок соответствует уровню подготовки учащихся и их интеллектуальному развитию. Анализируются психологическая природа усвоения учебного материала развития интеллектуальной активности обучаемых в учебном процессе соответствие приемов и способов работы возрастным и индивидуальнопсихологическим особенностям учащихся. критерии Психологическая цель урока: 1 проектирование развития учащихся в пределах изучения конкретного учебного предмета и конкретного урока; 2 учет в целевой установке урока...