Блочная модель CSS. Использование CSS для макетирования

Содержание

Слайд 2

План Сущность нормального потока. Блочная модель CSS: свойства, определяющие размеры блока.

План

Сущность нормального потока.
Блочная модель CSS: свойства, определяющие размеры блока.
Использование

CSS для макетирования: позиционирование, обтекание, манипулирование внешними отступами.
Модуль макета гибкого контейнера flexbox, концепция многоколоночной разметки, сеточная разметка grid.
Использование CSS для создания каркаса макета.
Слайд 3

Сущность нормального потока Элементы на веб-странице располагаются в нормальном потоке, если

Сущность нормального потока

Элементы на веб-странице располагаются в нормальном потоке, если вы

не применили к ним ни единого CSS для изменения их поведения.
Вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока.
Слайд 4

Основные теги для верстки При вёрстке сайта с помощью слоёв самым

Основные теги для верстки

При вёрстке сайта с помощью слоёв самым часто

используемым html-тегом является
, который как раз и формирует слой на веб-странице. Он является блочным тегом.
Второй тег, который используется при верстке, это строчный тег . Сами по себе эти теги ничего на экране не отображают, и оформляются они стилями css.
Слайд 5

Основные теги для верстки Блочный элемент создает разрыв строки перед тегом

Основные теги для верстки

Блочный элемент создает разрыв строки перед тегом и

после него.
Он образуют прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя, если для него не задано значение width.
Блочные элементы могут содержать внутри себя элементы любого типа.
Нельзя размещать блочные элементы внутри строчных, за исключением элемента .
Для блочных элементов можно задавать margin и padding. Свойства width и height устанавливают ширину и высоту области содержимого элемента.
Слайд 6

Основные теги для верстки Строчные элементы не создают блоки, они отображаются

Основные теги для верстки

Строчные элементы не создают блоки, они отображаются на

одной строке с содержимым рядом стоящих тегов.
Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding, но, если для элемента задан фон, он будет распространяться на верхний и нижний padding, заходя на соседние строки текста.
Ширина и высота строчного элемента зависит только от его содержания, задать его размеры с помощью CSS нельзя.
Слайд 7

Блочные элементы

Блочные элементы

Слайд 8

Строчные элементы

Строчные элементы

Слайд 9

HTML 5 для блочной верстки — для шапки, - для подвала,

HTML 5 для блочной верстки

— для шапки,
- для подвала,

Слайд 10

Свойство display При помощи css можно изменить тип элемента, т.е. блочный

Свойство display

При помощи css можно изменить тип элемента, т.е. блочный тег

можно сделать строчным, а строчный - блочным.
Для этого существует css свойство - display.
Например,
можно задать значение свойства display: inline;,
а для - значение display: block;
Слайд 11

Блочная модель CSS: свойства, определяющие размеры блока На первый взгляд может

Блочная модель CSS: свойства, определяющие размеры блока

На первый взгляд может показаться,

что width – это окончательная ширина элемента, height – это окончательная высота элемента.
На самом деле это не так, width и height - это не окончательные размеры элемента. Для того, чтобы вычислить размеры, необходимо учитывать следующие моменты.
Слайд 12

Блочная модель CSS: свойства, определяющие размеры блока Ширина блока складывается из

Блочная модель CSS: свойства, определяющие размеры блока

Ширина блока складывается из следующих

свойств:
Соответственно, высота из следующих:
Слайд 13

Значения свойства display Блочный элемент (display: block;) Строчный элемент (display: inline;)

Значения свойства display

Блочный элемент (display: block;)
Строчный элемент (display: inline;)
Строчно-блочный
(display: inline-block;)
Ячейки таблицы

(display: table-cell;)
Гибкий (display:flexbox;)
Слайд 14

Строчно-блочные элементы (display: inline-block;) Являются встроенными, но для них можно задавать

Строчно-блочные элементы (display: inline-block;)

Являются встроенными, но для них можно задавать поля,

отступы, ширину и высоту.
Для блока возможно задать значение ячейки таблицы (table-cell). Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п.
Может быть просто такой одинокий DIV, это допустимо.
При этом он ведёт себя как ячейка TD, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align.
Слайд 15

Модуль макета гибкого контейнера flexbox flexbox — это целый модуль, который

Модуль макета гибкого контейнера flexbox

flexbox — это целый модуль, который объединяет

в себе множество свойств.
Некоторые из них должны применяться к контейнеру (родительскому элементу, так называемому flex-контейнеру), в то время, как другие свойства применяются к дочерним элементам или flex-элементам.
Слайд 16

flexbox В основном элементы будут распределяться либо вдоль главной оси (от

flexbox

В основном элементы будут распределяться либо вдоль главной оси (от main-start

до main-end), либо вдоль поперечной оси (от cross-start до cross-end).
● main-axis - главная ось, вдоль которой располагаются flex-элементы. Обратите внимание, она необязательно должна быть горизонтальной, всё зависит от свойства justify-content.
● main-start | main-end - flex-элементы размещаются в контейнере от позиции main-start до позиции main-end.
● main size|cross size - ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, либо высотой элемента.
● cross axis - поперечная ось, перпендикулярная к главной. Её направление зависит от направления главной оси.
● cross-start | cross-end - flex-строки, заполняются элементами и размещаются в контейнере от позиции cross-start и до позиции cross-end.
Слайд 17

flexbox Элементы в контейнере поддаются выравниванию при помощи свойства justify-content вдоль

flexbox

Элементы в контейнере поддаются выравниванию при помощи свойства justify-content вдоль главной

оси:
● flex-start (default): гибкие элементы выравниваются по началу главной оси;
● flex-end: элементы выравниваются по концу главной оси;
● center: элементы выравниваются по центру главной оси;
● space-between: элементы занимают всю доступную ширину в контейнере, крайние элементы вплотную прижимаются к краям контейнера, а свободное пространство равномерно распределяется между элементами;
● space-around: гибкие элементы выравниваются таким образом, что свободное пространство равномерно распределяется между элементами.
Слайд 18

flexbox Мы также имеем возможность выравнивания элементов по cross оси. Применив

flexbox

Мы также имеем возможность выравнивания элементов по cross оси. Применив свойство

align-items, которое позволяет выравнивать элементы в строке относительно друг друга:
● flex-start: все элементы прижимаются к началу строки;
● flex-end: элементы прижимаются к концу строки;
● center: элементы выравниваются по центру строки;
● baseline: элементы выравниваются по базовой линии текста;
● stretch (default): элементы растягиваются, заполняя полностью строку;
Слайд 19

flexbox Свойство align-content отвечает за выравнивание целых строк относительно гибкого контейнера.

flexbox

Свойство align-content отвечает за выравнивание целых строк относительно гибкого контейнера. Оно

не будет давать эффекта, если гибкие элементы занимают одну строку:
● flex-start: все линии прижимаются к началу cross-оси;
● flex-end: все линии прижимаются к концу cross-оси;
● center: flex-элементы выравниваются по центру flex-контейнера.
● space-between: линии распределяются от верхнего края до нижнего, оставляя свободное пространство между строками, крайние же строки прижимаются к краям контейнера;
● space-around: линии равномерно распределяются по контейнеру;
● stretch (default): линии растягиваются, занимая все доступное пространство.
Слайд 20

flexbox С помощью свойства flex-basis мы можем указывать базовую ширину гибкого

flexbox

С помощью свойства flex-basis мы можем указывать базовую ширину гибкого элемента.

По умолчанию имеет значение auto.
Свойство flex-basis принимает значение ширины в px, %, em и остальных единицах. По сути, это не строго ширина гибкого элемента, это своего рода отправная точка, относительно которой происходит растягивание или усадка элемента.
В режиме auto элемент получает базовую ширину относительно контента внутри него.
Слайд 21

Схлопывания Когда два или более вертикальных margin соприкасаются, они сливаются, при

Схлопывания

Когда два или более вертикальных margin соприкасаются, они сливаются, при этом

ширина общего отступа равна ширине большего из исходных отступов.
Слайд 22

Схлопывания Слияние выполняется только для блочных элементов в нормальном потоке документа.

Схлопывания

Слияние выполняется только для блочных элементов в нормальном потоке документа.
Внешние

вертикальные отступы строчных, плавающих и абсолютно позиционированных элементов не сливаются.
Чтобы получить желаемый промежуток, можно задать, например, для верхнего элемента padding-bottom, а для нижнего элемента — margin-top.
Слайд 23

Схлопывания Существуют исключения для схлопывания: ● с блоками, которым присвоено float;

Схлопывания

Существуют исключения для схлопывания:
● с блоками, которым присвоено float;
● с основными

элементами (html, body);
● для блоков, которым присвоено свойство и значение position:absolute;
● для строчных элементов.
Слайд 24

Обтекаемые элементы Обтекаемые элементы или как их ещё называют «плавающие», используются

Обтекаемые элементы

Обтекаемые элементы или как их ещё называют «плавающие», используются для

реализации обтекания текстом изображений, создания врезок, и даже создания много столбцовых компоновок.
Также обтекаемые элементы активно используются при верстке веб-страниц, и при помощи их возможно заменить табличную верстку на верстку слоями.
Для того, чтобы задать обтекание, в CSS существует только одно свойство float, которое может принимать всего два значения - это left и right.
Слайд 25

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

Обтекаемые элементы

В следующем примере картинке, т.е. тегу , заданно свойство

float: left;

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

Слайд 26

Обтекаемые элементы У обоих элементов задано свойство float: left;, т.е. они

Обтекаемые элементы

У обоих элементов

задано свойство float: left;, т.е. они

должны занимать левое положение и позволять обтекать себя справа.
Слайд 27

Обтекаемые элементы Элементы находятся на одной линии по горизонтали, что и

Обтекаемые элементы

Элементы

находятся на одной линии по горизонтали, что и
ожидаемо,

т.к. у них задано свойство float: left;.
Первый
занял положение слева, позволил обтекать себя справа.
Второй
, соответственно, в свою очередь также позволил обтекать себя справа.
Заголовок первого уровня находится справа второго элемента
, но его рамка обрамляет также оба элемента
.
Это происходит потому, что у свойства float есть особенность: элементы,
которым заданно это свойство, начинают притягивать к себе все близлежащие элементы и заставляют их тоже участвовать в обтекании.
Слайд 28

Обтекаемые элементы Заголовок не должен участвовать в обтекании и должен находиться

Обтекаемые элементы

Заголовок не должен участвовать в обтекании и должен находиться под

элементами
. В этом случае необходимо применить запрет на обтекание. Для этого в css существует свойство clear:
left, отменяющее обтекание с левого края,
right – с правого края, и значение,
both - которое отменяет обтекание с обеих сторон.
Добавим свойство clear:both; для заголовка первого уровня.
Слайд 29

Обтекаемые элементы Заголовок остается на том же месте, где он сейчас

Обтекаемые элементы

Заголовок остается на том же месте, где он сейчас находится,

но рамка должна
обрамлять только сам заголовок.
Для решения этой задачи, поможет css свойство overflow.
Оно определяет, как будет вести себя блочный элемент в случае его переполнения, и при значении hidden отображает только содержимое этого элемента.
Слайд 30

Позиционирование блоков Позиционирование позволяет точно определить, где появятся блоки относительно другого

Позиционирование блоков

Позиционирование позволяет точно определить, где появятся блоки относительно другого элемента

или относительно окна браузера. По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в html-документе ({position: static}).
Свойство не наследуется.
Блочный элемент (p, div, h1 и др.) занимает 100% ширины родительского элемента (по умолчанию — body). Поэтому блочные элементы отображаются один под другим в соответствии с разметкой страницы.
Строчный элемент (em, strong, span и др.) занимает ширину, которая соответствует ширине содержимого внутри него. Поэтому строчные элементы отображаются рядом друг с другом.
Свойство position вместе со значениями top, right, bottom и left отображает элемент с нарушением обычного порядка, смещая его на заданное расстояние.
Слайд 31

Позиционирование блоков

Позиционирование блоков

Слайд 32

Позиционирование блоков

Позиционирование блоков

- Предыдущая
Буква У
Следующая -
Профориентационная помощь в кризисные периоды выбора и начала реализации профессионального образования

Похожие презентации

ИСПОЛЬЗОВАНИЕ СОВРЕМЕННЫХ ИНФОРМАЦИОННЫХ И КОММУНИКАЦИОННЫХ ТЕХНОЛОГИЙ В ОБРАЗОВАНИИ Презентация учебной дисциплины Москва -200
Служба поддержки пользователей Service Desk
Язык программирования Python. Операторы цикла в языке Python
Информация, информационные процессы, измерение количества информации
Объектно-ориентированная платформа Windows
Гайд по работе с KB Scanner
Формирование изображения на экране компьютера
Электронные таблицы Microsoft Excel
IP Multicast как точка роста видеоконференцсвязи
Проектування програми – перетворювача записів
Статистическая обработка информации
Язык разметки гипертекста HTML (Hyper Text Markup Language )
Структурное программирование
Построение моделей транспортного процесса с помощью унифицированного языка моделирования UML
История « Polity IV »
Проектирование модуля навигации
Факсимильные аппараты
Работа с сигналами в среде SIMULINK
Клиент-серверное приложение на Node.js
Програмний модуль шифрування даних
Impeller. Database programming language
Создание микромира и его обитателей. Освоение среды ЛогоМиры
Презентация "Лабораторная 3" - скачать презентации по Информатике
Введение в операционные системы. (Тема 1)
ПРАКТИКУМ ПО ОСНОВАМ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТОВ HTML Составитель: учитель информатики и ИКТ ГБОУ СОШ № 411 «Гармония» с углубленн
Антивирусы
Множества
ОБЩАЯ ХАРАКТЕРИСТИКА ТАБЛИЧНОГО ПРОЦЕССОРА
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть