Transcript ppsx
Slide 1
Slide 2
Slide 3
Блочные элементы
Блочные элементы представляют собой
прямоугольную область, которая делится
на несколько частей – содержимое,
отступы, граница и поля.
Содержимое блочного элемента может
включать в себя строчные элементы, а
также другие блочные элементы, хотя и с
некоторыми ограничениями.
Slide 4
Блочные элементы
Отступ – это промежуток между
содержимым элемента и его границей.
Поля – это промежуток между границей
элемента и содержимым родительского
элемента.
Отступ имеет такой цвет фона, как и
содержимое, а поля элемента имеют цвет
фона, совпадающий с цветом фона
родительского элемента.
Slide 5
Отступ
Граница
Поле
Slide 6
Строчные элементы
Строчные элементы представляют собой
часть строки.
Они размещаются последовательно слева
направо до тех пор, пока ширины
родительского блочного элемента хватает
для размещения очередного строчного
элемента.
Строчные элементы не могут включать
блочные элементы, но могут включать
другие строчные элементы.
Slide 7
Slide 8
Slide 9
Классификация элементов
К блочным элементам относятся элементы
body, p, h1-h6, hr, li, ol, ul, div, section, article,
nav, aside, header, footer, address, pre,
blockquote.
К строчным относятся элементы img, br, i, b,
em, strong, sup, sub, span, q, abbr. Слова
обычного текста также являются строчными
элементами, несмотря на отсутствие какой-либо
специальной разметки.
Элементы head, title, link, meta, style
представляют собой исключение – эти элементы
не отображаются в теле веб-страницы, а задают
метаданные страницы.
Slide 10
Прозрачный элемент
Главная
…
Slide 11
Slide 12
Обычное позиционирование
Блочные элементы одного уровня располагаются на веб-странице последовательно,
также как и в HTML-файле.
По умолчанию ширина элемента
принимается равной 100%.
Если один блочный элемент вложен в другой
блочный элемент, то ширина вложенного
элемента рассчитывается относительно
ширины родительского элемента.
Slide 13
Обычное позиционирование
Высота элемента по умолчанию задаётся
таким образом, чтобы её было достаточно
для размещения всего содержимого.
Поля двух соседних блочных элементов
соединяются в одно.
Высота полученного поля равняется
высоте большего из двух полей.
Slide 14
Slide 15
Плавающие элементы
Для создания плавающего элемента
необходимо установить стиль float:
left или float: right.
Кроме того, плавающие элементы
должны иметь фиксированную ширину.
Slide 16
Плавающие элементы
При размещении плавающего элемента браузер будет
выполнять следующие действия:
сначала браузер размещает на страницы элементы,
расположенные в HTML-файле до плавающего, в обычном
порядке сверху вниз;
когда браузер встречает плавающий элемент, он размещает
этот элемент слева или справа и исключает его из общего
потока, в результате элемент «плавает» на странице;
поскольку плавающий элемент был исключён из общего
потока, то остальные блочные элементы размещаются на
странице так, будто этого элемента вовсе нет;
когда размещаются строчные элементы, учитываются
границы плавающего элемента, поэтому строчные
элементы обтекают его.
Slide 17
Slide 18
Плавающие элементы
Если необходимо, чтобы какой-либо
блочный элемент не оказывался под
плавающим элементом, то для него
необходимо задать свойство clear.
Это свойство может иметь одно из трёх
значений: left, right или both.
Slide 19
Slide 20
Абсолютное позиционирование
Абсолютное позиционирование задаётся с
помощью значения absolute свойства
position.
Абсолютно позиционированный элемент, также
как и плавающий, должен иметь фиксированную
ширину, а его позиция задаётся свойствами
top/bottom и left/right.
Такой элемент, также как и плавающий,
исключается из общего потока и накладывается
на другие элементы.
При этом строчное содержимое элементов не
обтекает абсолютно позиционированный
элемент.
Slide 21
Slide 22
Относительное позиционирование
Элемент, позиционированный
относительно, является частью общего
потока веб-страницы, но в последний
момент перед тем, как отобразить этот
элемент, браузер смещает его.
Относительное позиционирование
задаётся с помощью значения relative
свойства position.
Смещение задаётся свойствами
top/bottom и left/right.
Slide 23
Slide 24
Фиксированное
позиционирование
При фиксированном позиционировании, также
как и при абсолютном, свойствами top/bottom
и left/right задаётся позиция элемента, но
она вычисляется не относительно веб-страницы,
а относительно окна браузера.
При этом элемент всегда остаётся там, куда его
поместили, и не перемещается даже тогда,
когда используется прокрутка страницы.
Фиксированное позиционирование задаётся с
помощью значения fixed свойства position.
Slide 25
Slide 26
Slide 27
Конспект лекций по С & C++
Slide 28
Slide 2
Slide 3
Блочные элементы
Блочные элементы представляют собой
прямоугольную область, которая делится
на несколько частей – содержимое,
отступы, граница и поля.
Содержимое блочного элемента может
включать в себя строчные элементы, а
также другие блочные элементы, хотя и с
некоторыми ограничениями.
Slide 4
Блочные элементы
Отступ – это промежуток между
содержимым элемента и его границей.
Поля – это промежуток между границей
элемента и содержимым родительского
элемента.
Отступ имеет такой цвет фона, как и
содержимое, а поля элемента имеют цвет
фона, совпадающий с цветом фона
родительского элемента.
Slide 5
Отступ
Граница
Поле
Slide 6
Строчные элементы
Строчные элементы представляют собой
часть строки.
Они размещаются последовательно слева
направо до тех пор, пока ширины
родительского блочного элемента хватает
для размещения очередного строчного
элемента.
Строчные элементы не могут включать
блочные элементы, но могут включать
другие строчные элементы.
Slide 7
Slide 8
Slide 9
Классификация элементов
К блочным элементам относятся элементы
body, p, h1-h6, hr, li, ol, ul, div, section, article,
nav, aside, header, footer, address, pre,
blockquote.
К строчным относятся элементы img, br, i, b,
em, strong, sup, sub, span, q, abbr. Слова
обычного текста также являются строчными
элементами, несмотря на отсутствие какой-либо
специальной разметки.
Элементы head, title, link, meta, style
представляют собой исключение – эти элементы
не отображаются в теле веб-страницы, а задают
метаданные страницы.
Slide 10
Прозрачный элемент
Главная
…
Slide 11
Slide 12
Обычное позиционирование
Блочные элементы одного уровня располагаются на веб-странице последовательно,
также как и в HTML-файле.
По умолчанию ширина элемента
принимается равной 100%.
Если один блочный элемент вложен в другой
блочный элемент, то ширина вложенного
элемента рассчитывается относительно
ширины родительского элемента.
Slide 13
Обычное позиционирование
Высота элемента по умолчанию задаётся
таким образом, чтобы её было достаточно
для размещения всего содержимого.
Поля двух соседних блочных элементов
соединяются в одно.
Высота полученного поля равняется
высоте большего из двух полей.
Slide 14
Slide 15
Плавающие элементы
Для создания плавающего элемента
необходимо установить стиль float:
left или float: right.
Кроме того, плавающие элементы
должны иметь фиксированную ширину.
Slide 16
Плавающие элементы
При размещении плавающего элемента браузер будет
выполнять следующие действия:
сначала браузер размещает на страницы элементы,
расположенные в HTML-файле до плавающего, в обычном
порядке сверху вниз;
когда браузер встречает плавающий элемент, он размещает
этот элемент слева или справа и исключает его из общего
потока, в результате элемент «плавает» на странице;
поскольку плавающий элемент был исключён из общего
потока, то остальные блочные элементы размещаются на
странице так, будто этого элемента вовсе нет;
когда размещаются строчные элементы, учитываются
границы плавающего элемента, поэтому строчные
элементы обтекают его.
Slide 17
Slide 18
Плавающие элементы
Если необходимо, чтобы какой-либо
блочный элемент не оказывался под
плавающим элементом, то для него
необходимо задать свойство clear.
Это свойство может иметь одно из трёх
значений: left, right или both.
Slide 19
Slide 20
Абсолютное позиционирование
Абсолютное позиционирование задаётся с
помощью значения absolute свойства
position.
Абсолютно позиционированный элемент, также
как и плавающий, должен иметь фиксированную
ширину, а его позиция задаётся свойствами
top/bottom и left/right.
Такой элемент, также как и плавающий,
исключается из общего потока и накладывается
на другие элементы.
При этом строчное содержимое элементов не
обтекает абсолютно позиционированный
элемент.
Slide 21
Slide 22
Относительное позиционирование
Элемент, позиционированный
относительно, является частью общего
потока веб-страницы, но в последний
момент перед тем, как отобразить этот
элемент, браузер смещает его.
Относительное позиционирование
задаётся с помощью значения relative
свойства position.
Смещение задаётся свойствами
top/bottom и left/right.
Slide 23
Slide 24
Фиксированное
позиционирование
При фиксированном позиционировании, также
как и при абсолютном, свойствами top/bottom
и left/right задаётся позиция элемента, но
она вычисляется не относительно веб-страницы,
а относительно окна браузера.
При этом элемент всегда остаётся там, куда его
поместили, и не перемещается даже тогда,
когда используется прокрутка страницы.
Фиксированное позиционирование задаётся с
помощью значения fixed свойства position.
Slide 25
Slide 26
Slide 27
C & C++
Slide 28