12789

Поля и заполнение

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

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

Поля и заполнение В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним как можно изменять представление элементов свойствами margin и padding. Установим поля элемента Установим заполнение элемента Установим поля элемента У элемента ест

Русский

2013-05-03

13.38 KB

2 чел.

Поля и заполнение

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

  •  Установим поля элемента
  •  Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны  до соседних элементов (или краёв документа). См. также диаграмму в 7 лабораторной.

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <body>.

CSS-код для этого примера выглядит так:

body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

Или вы можете написать более элегантно:

body {

margin: 100px 40px 10px 70px;

}

  •  Показать пример

 Задание: вы можете установить поля примерно таким же образом почти для любого элемента. Например, определите поля для всех параграфов <p> следующим образом:

body {

margin: 100px 40px 10px 70px;

}

p {

margin: 5px 50px 5px 50px;

}

Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {

background: yellow;

}

h2 {

background: orange;

}

  •  Показать пример

 Задание: определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка (сделать самостоятельно и сравнить с предыдущим примером):

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Резюме

Вам остался один шаг до создания боксовой модели в CSS. В следующем уроке мы рассмотрим, как устанавливать рамки разного цвета и как очерчивать элементы.

К началу


 

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

67539. Электропривод с упругими связями. Уравнения трехмассовой системы и колебания в двухмассовой системе. Люфт в механической передаче. Удары и выход из контакта. Механическая передача с упругими связями 247.5 KB
  Рассмотрим упругий стержень, к концам которого приложены моменты М1, М2 (см. рис. 15.1). Концы имеют углы поворота α1 и α2, коэффициент жесткости стержня с12 . Если не учитывать момент инерции стержня, то из условия равновесия моментов получаем равенства...
67540. Установившиеся и переходные процессы в электроприводах. Система уравнений динамики двигателя постоянного тока независимого возбуждения 72.5 KB
  Система уравнений динамики двигателя постоянного тока независимого возбуждения Переходные процессы в электрических приводах. Примеры установившихся процессов для тока На рис.1 приведены примеры установившихся процессов для электрического тока постоянный ток переменный синусоидальный...
67541. Электромеханический и электромагнитный переходные процессы в двигателе постоянного тока независимого возбуждения. Электромеханический переходной процесс 140.5 KB
  Через время Тэм экспонента уменьшается в е = 2,71828 раз. За время 2Тэм она уменьшится в е2 раз. Через время 3Тэм экспонента уменьшается приближенно в 20 раз, тогда считают, что переходной процесс заканчивается (остается 5 % от первоначального значения экспоненты).
67542. Совместное протекание электромагнитного и электромеханического переходных процессов в двигателе постоянного тока независимого возбуждения 163 KB
  Апериодический и колебательный процессы Совместное протекание электромагнитного и электромеханического переходных процессов в двигателе постоянного тока независимого возбуждения. Допустим что в двигателе постоянного тока независимого возбуждения uв = const; Ф = const но индуктивность якоря...
67543. Метод последовательных интервалов. Включение обмотки возбуждения. Пуск двигателя постоянного тока последовательного возбуждения и трехфазного асинхронного двигателя. Метод последовательных интервалов 143 KB
  Для решения нелинейных дифференциальных уравнений на ЭВМ в настоящее время применяются эффективные численные методы. Включение обмотки возбуждения Рассмотрим переходный процесс при включения обмотки возбуждения двигателя постоянного тока на постоянное напряжение.
67544. Качания ротора синхронного двигателя. Уравнения электромагнита постоянного тока. Качания ротора синхронного двигателя 339.5 KB
  Качания ротора синхронного двигателя. При работе синхронной электрической машины подключенной к сети бесконечной мощности возможны качания ротора. При отклонении продольной оси ротора-индуктора от оси МДС возникает момент который стремится вернуть ротор в нейтральное положение.
67545. Виды теплопередачи. Электрические схемы замещения. Нагревание одного и двух тел 258 KB
  Отметим что теплопередача теплопроводностью наблюдается не только через твердые тела но и через жидкости и газы если они неподвижны. Теплопередача конвекцией Тогда закон Ома для теплового сопротивления имеет тот же вид: Отметим что в отличие от коэффициента теплопроводности λ имеющего достаточно...
67546. Тепловые режимы работы электроприводов. Средняя мощность и температура электродвигателей и электромагнитных устройств. Тепловые режимы работы электропривода 157 KB
  Поскольку двигатель как нагреваемое тело может рассматриваться в виде линейного объекта то средняя температура может быть найдена по средней мощности потерь. Мощность электрических потерь определяется по закону Джоуля-Ленца: pэ = ri2. Они состоят из потерь на гистерезис и вихревые токи и определяются формулой где m – масса стали...
67547. Соотношения подобия в механике, электричестве и магнетизме 227 KB
  Простейшим видом подобия является геометрическое подобие. Коэффициент пропорциональности назовем коэффициентом подобия. Геометрически подобные треугольники Определяющим называется размер выбранный для задания коэффициента подобия.