Fullstack разработка. Использование блочной верстки. Лекция 4 презентация

Кроссбраузерная верстка
Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.
Основной недостаток хаков - снижается универсальность кода.

Слои
В HTML4, HTML5 и XHTML слой — это элемент веб-страницы, созданный с помощью тега
, к которому применяется стилевое оформление.

Использование тега
Тег
– это основа блочной вёрстки. Данный элемент выполняет роль фундамента, общий вид которого можно задавать широким набором свойств.

Свойства, формирующие блочный элемент

Поля (свойство padding)
Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Поле сверху (padding-top)
Устанавливает значение поля от верхнего края содержимого элемента.
Синтаксис:

Поле справа (padding-right)
Устанавливает значение поля от правого края содержимого элемента.
Синтаксис:

Поле снизу (padding-bottom)
Устанавливает значение поля от нижнего края содержимого элемента.
Синтаксис:

Поле слева (padding-left)
Устанавливает значение поля от левого края содержимого элемента.
Синтаксис:

Поля (свойство padding)
Синтаксис:

Порядок задания значений в свойствах padding, border, margin
Если установлено одно или четыре значения:

Порядок задания значений в свойствах padding, border, margin
Если установлено два значения: Если установлено три значения:

Границы (border)
Границы — это линии вокруг полей элемента.
У каждой линии есть толщина, стиль и цвет.
Стиль начертания линий может быть индивидуален для каждой из сторон блока.

Толщина границы (border-width)
Синтаксис:
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Стиль границы
Синтаксис:
Вид рамки в зависимости от стиля границы элемента:

Цвет границы (border-color)
Синтаксис:
transparent — устанавливает прозрачный цвет.

Универсальное свойство границ
Синтаксис:
Одновременно устанавливает толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, возможно воспользоваться свойствами border-top, border-bottom, border-left, border-right.

Все свойства границ

Скругленные уголки
(свойство border-radius)
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис

Значения border-radius

Эллиптические уголки
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рисунке показана разница между обычным скругленным уголком и эллиптическим уголком.

Другие свойства скруглённых уголков

Отступы (margin)
Отступ — пустое пространство от внешнего края границы, полей или содержимого блока.

Отступы (margin)
Особенности:
Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока;
Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону;
Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой;
Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.

Отступы (свойство margin)
Синтаксис:
Порядок установки значений такой же, как и для padding и border. Возможно установить от 1 до 4 значений.

Отступы на отдельных краях
Как и для свойств bottom и padding для отступов существуют специфические свойства, характерные только для определённых положений сверху, справа. снизу или слева: margin-top, margin-right, margin-bottom, margin-left.

Ширина
Устанавливает ширину контента в блоке.
Синтаксис:
auto — устанавливает ширину исходя из типа и содержимого элемента.

Ширина блока
Ширина блока это комплексная величина и складывается из нескольких значений свойств:
width — ширина контента, т.е. содержимого блока;
padding-left и padding-right — поле слева и справа от контента;
border-left и border-right — толщина границы слева и справа;
margin-left и margin-right — отступ слева и справа.

Ширина блока

Ширина блока
Пример:
Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342px

Высота блока
Устанавливает высоту контента в блоке.
Синтаксис:
auto — устанавливает высоту исходя из типа и содержимого элемента.

Высота блока

Свойство overflow
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис:
Свойства:
visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины;
hidden — отображается только область внутри элемента, остальное будет скрыто;
scroll — всегда добавляются полосы прокрутки;
auto — полосы прокрутки добавляются только при необходимости.

Схлопывание отступов
Для положительных значений отступов выбирается наибольшее значение из двух отступов, и оно устанавливается как расстояние между блоками.

Отмены схлопывания
Схлопывание не срабатывает:
для элементов, у которых установлено свойство padding;
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для .

Поток документа
Порядок вывода объектов на странице и называется «потоком».

Позиционирование элементов
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное.

Использование position
Свойство position задает позиционирование элемента относительно исходного положения или родителя.
Синтаксис:

Нормальное позиционирование
Если для элемента свойство position не задано или его значение static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Абсолютное позиционирование
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера.

Абсолютное позиционирование

Свойства top, right, bottom, left

Относительное позиционирование и вложенные слои

Фиксированное позиционирование
Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Нет полос прокрутки при нахождении за пределами видимой области.

Плавающие элементы
Плавающими (обтекаемыми) называются такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом.

Использование плавающих элементов
Использование:
галереи небольших фотографий;
двух и трехколоночные макеты;
горизонтальные меню;
иллюстрации в тексте;
многоколоночный текст.

Свойство float
Синтаксис:
Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон.

Обтекания нет
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Для картинки установлено float: left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Для картинки установлено float: right

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

Отмена обтекания
Ширина элемента
Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки.

Отмена обтекания
Ширина элемента

Отмена обтекания
Использование overflow
Использование overflow со значением auto, scroll или hidden отменяет действие float.

Отмена обтекания
Свойство clear
Значения:
left — отменяет обтекание с левого края элемента (float: left);
right — отменяет обтекание с правой стороны элемента (float: right);
both — отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.

Блочные элементы
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги
,
,
,
,
,
, ... ,
,
,
,
,
, ,
и некоторые устаревшие.
Слайд 58
Блочные элементы
Свойство для определения блочного элемента: display: block.
Слайд 59
Особенности блочных элементов
Блоки располагаются по вертикали друг под другом;
На прилегающих сторонах элементов действует
эффект схлопывания отступов;
Запрещено вставлять блочный элемент внутрь строчного;
По ширине блочные элементы занимают всё допустимое пространство;
Если задана ширина или высота контента (свойства width и height), то ширина блока складывается из значений width (height), полей, границ, отступов слева и справа (сверху и снизу);
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Слайд 60
Анонимный блок
Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то
вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя.
Слайд 61
Строчные элементы
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным
элементам относятся теги
,
,
,
,
и др.
Используются для изменения вида текста или его логического выделения.
Слайд 62
Строчные элементы
Свойство для определения строчного элемента:
display: inline.
Слайд 63
Свойства строчных элементов
Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять
блочные элементы внутрь строчных запрещено;
Эффект схлопывания отступов не действует;
Свойства, связанные с размерами (width, height) не применимы;
Ширина равна содержимому плюс значения отступов, полей и границ;
Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;
Можно выравнивать по вертикали с помощью свойства vertical-align.
Слайд 64
Анонимный строчный элемент
Серым цветом на рисунке помечен текст внутри тега
, а пунктиром
анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.
Слайд 65
Блочно-строчные элементы
Блочно-строчный элемент – элемент, по структуре похожий на блочный, но обтекаемый остальными
объектами, как строчный.
Слайд 66
Блочно-строчные элементы
Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы;
Высота элемента вычисляется
браузером автоматически, исходя из содержимого блока;
Ширина равна содержимому плюс значения отступов, полей и границ;
Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;
Можно выравнивать по вертикали с помощью свойства vertical-align;
Разрешено задавать ширину и высоту;
Эффект схлопывания отступов не действует.
Слайд 67
Блочно-строчные элементы
Свойство для определения блочно-строчного элемента: display: inline-block.
Слайд 68
Свойство display
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис:
Слайд 69
Свойство display
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис:
Свойства:
block —
элемент показывается как блочный;
inline — элемент показывается как строчный;
Inline-block — это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу;
list-item — элемент выводится как блочный и добавляется маркер списка;
none — временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
Слайд 70
Свойство vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис:
Слайд 71
Свойство vertical-align
baseline — выравнивает базовую линию текущего элемента по базовой линии родителя. Если
родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента;
bottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех;
middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента;
sub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется;
super — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним;
top — выравнивание верхнего края элемента по верху самого высокого элемента строки.
Слайд 72
Свойство min-width
Синтаксис:
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной
минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Слайд 73
Свойство max-width
Синтаксис:
Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от
значений установленных свойств width, max-width и min-width.
Слайд 74
Вычисление ширины
min-width < width < max-width => width
width < max-width => width
min-width >
width > max-width => min-width
min-width > width < max-width => min-width
Слайд 75
Свойство min-height
Синтаксис:
Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от
установленных значений свойств height, max-height и min-height.
Слайд 76
Свойство max-height
Синтаксис:
Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от
значений установленных свойств height, max-height и min-height.
Имя файла: Fullstack-разработка.-Использование-блочной-верстки.-Лекция-4.pptx
Количество просмотров: 24
Количество скачиваний: 0
Скачать
- Предыдущая
Одноклассники, сверстники, друзья
Следующая -
Стадии проектирования и состав проектов автоматизации. Виды и типы схем
Похожие презентации
Исследование по теме: Спутниковая связь и ее роль в жизни человека
Програмне забезпечення Digitals
Компоненты процесса. Классификация процессов
Стандартные функции системы muLisp
Пристрої, що використовуються для роботи із повідомленнями
Устройство компьютера
Языки программирования QBasic и Turbo Pascal 7.0
TEPA Golden Rules modules presentation
Подготовка учащихся к ЕГЭ
Организация обработки больших данных. Лекция 4
Школа::Кода Основы программирования на языке Python. 14 занятие
Состав объектов
Язык программирования Паскаль
Компьютер - универсальная машина для работы с информацией
Классификация информационных технологий
Экспертные системы
Условный оператор. Решение задач
Аппаратное обеспечение работы компьютера
Программное обеспечение (Software)
Сплайны - работа с элементами объектов. Autodesk 3ds max. Лекция №2
Опрацювання даних як інформаційний процес. Кодування та декодування повідомлень
Политика информационной безопасности и частные политики. Тема 3
Элементы алгебры логики. Математические основы информатики. Информатика. 8 класс
Подготовка к ЕГЭ по информатике. Занятие 03
Кодирование информации (§5-8). 10 класс
Социальная сеть Instagram
Автоматизация делопроизводства
Решение задач по строкам
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},categories:{result:[{id:G,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:G,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:H,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:I,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:422902,name:k,category:H,count:77,jpg:"jpg\u002F422902",hits:I,download:b,h1:"Fullstack разработка. Использование блочной верстки. Лекция 4 презентация",meta:{h1:k,title:k,description:"Fullstack разработка. Использование блочной верстки. Лекция 4 презентация на тему, доклад, Информатика",keywords:"Fullstack разработка. Использование блочной верстки. Лекция 4, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Fullstack разработка. Использование блочной верстки. Лекция 4 из раздела Информатика. Презентация на заданную тему содержит 77 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EКроссбраузерная верстка\t\u003Cbr\u003E\u003Cp\u003EХак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.\u003Cbr\u003E\u003Cbr\u003EОсновной недостаток хаков - снижается универсальность кода.\u003Cbr\u003E\u003Cbr\u003E \u003Cp\u003EСлои\u003Cbr\u003E\u003Cp\u003E\tВ HTML4, HTML5 и XHTML слой — это элемент веб-страницы, созданный с помощью тега \u003Cdiv\u003E, к которому применяется стилевое оформление.\u003Cbr\u003E",file:"Fullstack-разработка.-Использование-блочной-верстки.-Лекция-4.pptx",texts:["\u003Cp\u003E\r\n«Fullstack» разработка\u003Cbr\u003E\u003Cp\u003EЛекция 4\u003Cbr\u003EИспользование блочной верстки\u003Cbr\u003E","\u003Cp\u003EКроссбраузерная верстка\t\u003Cbr\u003E\u003Cp\u003EХак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.\u003Cbr\u003EОсновной недостаток хаков - снижается универсальность кода.\u003Cbr\u003E","\u003Cp\u003EСлои\u003Cbr\u003E\u003Cp\u003E\tВ HTML4, HTML5 и XHTML слой — это элемент веб-страницы, созданный с помощью тега \u003Cdiv\u003E, к которому применяется стилевое оформление.\u003Cbr\u003E","\u003Cp\u003EИспользование тега \u003Cdiv\u003E\u003Cbr\u003E\u003Cp\u003E\tТег \u003Cdiv\u003E – это основа блочной вёрстки. Данный элемент выполняет роль фундамента, общий вид которого можно задавать широким набором свойств.\u003Cbr\u003E","\u003Cp\u003EСвойства, формирующие блочный элемент\u003Cbr\u003E","\u003Cp\u003EПоля (свойство padding)\u003Cbr\u003E\u003Cp\u003E\tПолем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.\u003Cbr\u003E","\u003Cp\u003EПоле сверху (padding-top)\u003Cbr\u003E\u003Cp\u003E\tУстанавливает значение поля от верхнего края содержимого элемента.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EПоле справа (padding-right)\u003Cbr\u003E\u003Cp\u003E\tУстанавливает значение поля от правого края содержимого элемента.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EПоле снизу (padding-bottom)\u003Cbr\u003E\u003Cp\u003E\tУстанавливает значение поля от нижнего края содержимого элемента.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EПоле слева (padding-left)\u003Cbr\u003E\u003Cp\u003E\tУстанавливает значение поля от левого края содержимого элемента.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EПоля (свойство padding)\r\n\u003Cbr\u003E\u003Cp\u003EСинтаксис:\u003Cbr\u003E","\u003Cp\u003EПорядок задания значений в свойствах padding, border, margin\u003Cbr\u003E\u003Cp\u003EЕсли установлено одно или четыре значения:\u003Cbr\u003E","\u003Cp\u003EПорядок задания значений в свойствах padding, border, margin\u003Cbr\u003E\u003Cp\u003EЕсли установлено два значения: \tЕсли установлено три значения:\u003Cbr\u003E","\u003Cp\u003EГраницы (border)\u003Cbr\u003E\u003Cp\u003E\tГраницы — это линии вокруг полей элемента.\u003Cbr\u003E\tУ каждой линии есть толщина, стиль и цвет.\u003Cbr\u003E\tСтиль начертания линий может быть индивидуален для каждой из сторон блока.\u003Cbr\u003E","\u003Cp\u003EТолщина границы (border-width)\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003EТри переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах.\u003Cbr\u003EРазрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.\u003Cbr\u003E","\u003Cp\u003EСтиль границы\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\u003Cbr\u003E\tВид рамки в зависимости от стиля границы элемента:\u003Cbr\u003E","\u003Cp\u003EЦвет границы (border-color)\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\ttransparent — устанавливает прозрачный цвет.\u003Cbr\u003E","\u003Cp\u003EУниверсальное свойство границ\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\tОдновременно устанавливает толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, возможно воспользоваться свойствами border-top, border-bottom, border-left, border-right.\u003Cbr\u003E","\u003Cp\u003EВсе свойства границ\u003Cbr\u003E","\u003Cp\u003EСкругленные уголки \r\n(свойство border-radius)\u003Cbr\u003E\u003Cp\u003E\tУстанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.\u003Cbr\u003E\tСинтаксис\u003Cbr\u003E","\u003Cp\u003EЗначения border-radius\u003Cbr\u003E","\u003Cp\u003EЭллиптические уголки\u003Cbr\u003E\u003Cp\u003E\tВ случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рисунке показана разница между обычным скругленным уголком и эллиптическим уголком.\u003Cbr\u003E","\u003Cp\u003EДругие свойства скруглённых уголков\u003Cbr\u003E","\u003Cp\u003EОтступы (margin)\u003Cbr\u003E\u003Cp\u003E\tОтступ — пустое пространство от внешнего края границы, полей или содержимого блока.\u003Cbr\u003E","\u003Cp\u003EОтступы (margin)\u003Cbr\u003E\u003Cp\u003E\tОсобенности:\u003Cbr\u003EОтступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока;\u003Cbr\u003EОтступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону;\u003Cbr\u003EДля отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой;\u003Cbr\u003EОтступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.\u003Cbr\u003E","\u003Cp\u003EОтступы (свойство margin)\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\tПорядок установки значений такой же, как и для padding и border. Возможно установить от 1 до 4 значений.\u003Cbr\u003E","\u003Cp\u003EОтступы на отдельных краях\u003Cbr\u003E\u003Cp\u003E\tКак и для свойств bottom и padding для отступов существуют специфические свойства, характерные только для определённых положений сверху, справа. снизу или слева: margin-top, margin-right, margin-bottom, margin-left.\u003Cbr\u003E","\u003Cp\u003EШирина\u003Cbr\u003E\u003Cp\u003E\tУстанавливает ширину контента в блоке.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E\tauto — устанавливает ширину исходя из типа и содержимого элемента.\u003Cbr\u003E","\u003Cp\u003EШирина блока\u003Cbr\u003E\u003Cp\u003E\tШирина блока это комплексная величина и складывается из нескольких значений свойств:\u003Cbr\u003Ewidth — ширина контента, т.е. содержимого блока;\u003Cbr\u003Epadding-left и padding-right — поле слева и справа от контента;\u003Cbr\u003Eborder-left и border-right — толщина границы слева и справа;\u003Cbr\u003Emargin-left и margin-right — отступ слева и справа.\u003Cbr\u003E","\u003Cp\u003EШирина блока\u003Cbr\u003E","\u003Cp\u003EШирина блока\u003Cbr\u003E\u003Cp\u003E\tПример:\u003Cbr\u003E\u003Cbr\u003E\tШирина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342px\u003Cbr\u003E","\u003Cp\u003EВысота блока\u003Cbr\u003E\u003Cp\u003E\tУстанавливает высоту контента в блоке.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E\tauto — устанавливает высоту исходя из типа и содержимого элемента.\u003Cbr\u003E","\u003Cp\u003EВысота блока\u003Cbr\u003E","\u003Cp\u003EСвойство overflow\u003Cbr\u003E\u003Cp\u003E\tУправляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E\tСвойства:\u003Cbr\u003Evisible — отображается все содержание элемента, даже за пределами установленной высоты и ширины;\u003Cbr\u003Ehidden — отображается только область внутри элемента, остальное будет скрыто;\u003Cbr\u003Escroll — всегда добавляются полосы прокрутки;\u003Cbr\u003Eauto — полосы прокрутки добавляются только при необходимости.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСхлопывание отступов\u003Cbr\u003E\u003Cp\u003E\tДля положительных значений отступов выбирается наибольшее значение из двух отступов, и оно устанавливается как расстояние между блоками.\u003Cbr\u003E","\u003Cp\u003EОтмены схлопывания\u003Cbr\u003E\u003Cp\u003E\tСхлопывание не срабатывает:\u003Cbr\u003Eдля элементов, у которых установлено свойство padding;\u003Cbr\u003Eдля элементов, у которых на стороне схлопывания задана граница;\u003Cbr\u003Eна элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;\u003Cbr\u003Eна плавающих элементах (для них свойство float задано как left или right);\u003Cbr\u003Eдля строчных элементов;\u003Cbr\u003Eдля \u003Chtml\u003E.\u003Cbr\u003E","\u003Cp\u003EПоток документа\u003Cbr\u003E\u003Cp\u003E\tПорядок вывода объектов на странице и называется «потоком».\u003Cbr\u003E","\u003Cp\u003EПозиционирование элементов\u003Cbr\u003E\u003Cp\u003E\tПозиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное.\u003Cbr\u003E","\u003Cp\u003EИспользование position\u003Cbr\u003E\u003Cp\u003E\tСвойство position задает позиционирование элемента относительно исходного положения или родителя.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EНормальное позиционирование\u003Cbr\u003E\u003Cp\u003E\tЕсли для элемента свойство position не задано или его значение static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.\u003Cbr\u003E","\u003Cp\u003EАбсолютное позиционирование\u003Cbr\u003E\u003Cp\u003E\tПри абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера.\u003Cbr\u003E","\u003Cp\u003EАбсолютное позиционирование\u003Cbr\u003E","\u003Cp\u003EСвойства top, right, bottom, left\u003Cbr\u003E","\u003Cp\u003EОтносительное позиционирование и вложенные слои\u003Cbr\u003E","\u003Cp\u003EФиксированное позиционирование\u003Cbr\u003E\u003Cp\u003E\tФиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.\u003Cbr\u003E\tНет полос прокрутки при нахождении за пределами видимой области.\u003Cbr\u003E","\u003Cp\u003EПлавающие элементы\u003Cbr\u003E\u003Cp\u003E\tПлавающими (обтекаемыми) называются такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом.\u003Cbr\u003E","\u003Cp\u003EИспользование плавающих элементов\u003Cbr\u003E\u003Cp\u003EИспользование:\u003Cbr\u003Eгалереи небольших фотографий;\u003Cbr\u003Eдвух и трехколоночные макеты;\u003Cbr\u003Eгоризонтальные меню;\u003Cbr\u003Eиллюстрации в тексте;\u003Cbr\u003Eмногоколоночный текст.\u003Cbr\u003E","\u003Cp\u003EСвойство float\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\tСвойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон.\u003Cbr\u003E","\u003Cp\u003EОбтекания нет\u003Cbr\u003E\u003Cp\u003E \t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u003Cbr\u003E","\u003Cp\u003EДля картинки установлено float: left\u003Cbr\u003E\u003Cp\u003E \t\t\tLorem ipsum dolor sit amet, consectetur \t\t\tadipisicing elit, sed do eiusmod tempor incididunt \t\tut labore et dolore magna aliqua. Ut enim ad \t\tminim veniam, quis nostrud exercitation ullamco \t\tlaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u003Cbr\u003E","\u003Cp\u003ELorem ipsum dolor sit amet, consectetur adipisicing \u003Cbr\u003Eelit, sed do eiusmod tempor incididunt ut labore \u003Cbr\u003Eet dolore magna aliqua. Ut enim ad minim veniam,\u003Cbr\u003E quis nostrud exercitation ullamco laboris nisi ut\u003Cbr\u003E aliquip ex ea commodo consequat. Duis aute irure \u003Cbr\u003Edolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u003Cbr\u003E\u003Cp\u003EДля картинки установлено float: right\u003Cbr\u003E","\u003Cp\u003EВлияние обтекания\u003Cbr\u003E\u003Cp\u003E\tПлавающие элементы не оказывают влияние на высоту блока, в котором они находятся.\u003Cbr\u003E","\u003Cp\u003EОтмена обтекания\u003Cbr\u003E\u003Cp\u003E\tШирина элемента\u003Cbr\u003E\tЕсли плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки.\u003Cbr\u003E","\u003Cp\u003EОтмена обтекания\u003Cbr\u003E\u003Cp\u003E\tШирина элемента\u003Cbr\u003E","\u003Cp\u003EОтмена обтекания\u003Cbr\u003E\u003Cp\u003E\tИспользование overflow\u003Cbr\u003E\tИспользование overflow со значением auto, scroll или hidden отменяет действие float.\u003Cbr\u003E","\u003Cp\u003EОтмена обтекания\u003Cbr\u003E\u003Cp\u003E\tСвойство clear\u003Cbr\u003E\tЗначения:\u003Cbr\u003Eleft — отменяет обтекание с левого края элемента (float: left);\u003Cbr\u003Eright — отменяет обтекание с правой стороны элемента (float: right);\u003Cbr\u003Eboth — отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.\u003Cbr\u003E","\u003Cp\u003EБлочные элементы\u003Cbr\u003E\u003Cp\u003E\tБлочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги \u003Caddress\u003E, \u003Cblockquote\u003E, \u003Cdiv\u003E, \u003Cfieldset\u003E, \u003Cform\u003E, \u003Ch1\u003E, ... ,\u003Ch6\u003E, \u003Chr\u003E, \u003Col\u003E, \u003Cp\u003E, \u003Cpre\u003E, \u003Ctable\u003E, \u003Cul\u003E и некоторые устаревшие.\u003Cbr\u003E","\u003Cp\u003EБлочные элементы\u003Cbr\u003E\u003Cp\u003EСвойство для определения блочного элемента: display: block.\u003Cbr\u003E","\u003Cp\u003EОсобенности блочных элементов\u003Cbr\u003E\u003Cp\u003EБлоки располагаются по вертикали друг под другом;\u003Cbr\u003EНа прилегающих сторонах элементов действует эффект схлопывания отступов;\u003Cbr\u003EЗапрещено вставлять блочный элемент внутрь строчного;\u003Cbr\u003EПо ширине блочные элементы занимают всё допустимое пространство;\u003Cbr\u003EЕсли задана ширина или высота контента (свойства width и height), то ширина блока складывается из значений width (height), полей, границ, отступов слева и справа (сверху и снизу);\u003Cbr\u003EВысота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.\u003Cbr\u003E","\u003Cp\u003EАнонимный блок\u003Cbr\u003E\u003Cp\u003E\tЕсли в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя.\u003Cbr\u003E","\u003Cp\u003EСтрочные элементы\u003Cbr\u003E\u003Cp\u003E\tСтрочными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги \u003Cimg\u003E, \u003Cspan\u003E, \u003Ca\u003E, \u003Cq\u003E, \u003Ccode\u003E и др.\u003Cbr\u003E\tИспользуются для изменения вида текста или его логического выделения.\u003Cbr\u003E","\u003Cp\u003EСтрочные элементы\u003Cbr\u003E\u003Cp\u003E\tСвойство для определения строчного элемента:\u003Cbr\u003E\tdisplay: inline.\u003Cbr\u003E","\u003Cp\u003EСвойства строчных элементов\u003Cbr\u003E\u003Cp\u003EВнутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено;\u003Cbr\u003EЭффект схлопывания отступов не действует;\u003Cbr\u003EСвойства, связанные с размерами (width, height) не применимы;\u003Cbr\u003EШирина равна содержимому плюс значения отступов, полей и границ;\u003Cbr\u003EНесколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;\u003Cbr\u003EМожно выравнивать по вертикали с помощью свойства vertical-align.\u003Cbr\u003E","\u003Cp\u003EАнонимный строчный элемент\u003Cbr\u003E\u003Cp\u003E\tСерым цветом на рисунке помечен текст внутри тега \u003Cspan\u003E , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.\u003Cbr\u003E","\u003Cp\u003EБлочно-строчные элементы\u003Cbr\u003E\u003Cp\u003E\tБлочно-строчный элемент – элемент, по структуре похожий на блочный, но обтекаемый остальными объектами, как строчный.\u003Cbr\u003E","\u003Cp\u003EБлочно-строчные элементы\u003Cbr\u003E\u003Cp\u003EВнутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы;\u003Cbr\u003EВысота элемента вычисляется браузером автоматически, исходя из содержимого блока;\u003Cbr\u003EШирина равна содержимому плюс значения отступов, полей и границ;\u003Cbr\u003EНесколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;\u003Cbr\u003EМожно выравнивать по вертикали с помощью свойства vertical-align;\u003Cbr\u003EРазрешено задавать ширину и высоту;\u003Cbr\u003EЭффект схлопывания отступов не действует.\u003Cbr\u003E","\u003Cp\u003EБлочно-строчные элементы\u003Cbr\u003E\u003Cp\u003E\tСвойство для определения блочно-строчного элемента: display: inline-block.\u003Cbr\u003E","\u003Cp\u003EСвойство display\u003Cbr\u003E\u003Cp\u003E\tМногоцелевое свойство, которое определяет, как элемент должен быть показан в документе.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EСвойство display\u003Cbr\u003E\u003Cp\u003E\tМногоцелевое свойство, которое определяет, как элемент должен быть показан в документе.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E\tСвойства:\u003Cbr\u003Eblock — элемент показывается как блочный;\u003Cbr\u003Einline — элемент показывается как строчный;\u003Cbr\u003EInline-block — это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу;\u003Cbr\u003Elist-item — элемент выводится как блочный и добавляется маркер списка;\u003Cbr\u003Enone — временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.\u003Cbr\u003E","\u003Cp\u003EСвойство vertical-align\u003Cbr\u003E\u003Cp\u003E\tВыравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.\u003Cbr\u003E\tСинтаксис:\u003Cbr\u003E","\u003Cp\u003EСвойство vertical-align\u003Cbr\u003E\u003Cp\u003Ebaseline — выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента;\u003Cbr\u003Ebottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех;\u003Cbr\u003Emiddle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента;\u003Cbr\u003Esub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется;\u003Cbr\u003Esuper — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним;\u003Cbr\u003Etop — выравнивание верхнего края элемента по верху самого высокого элемента строки.\u003Cbr\u003E","\u003Cp\u003EСвойство min-width\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\t\u003Cbr\u003E\tУстанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.\u003Cbr\u003E","\u003Cp\u003EСвойство max-width\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\t \u003Cbr\u003E\tУстанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.\u003Cbr\u003E","\u003Cp\u003EВычисление ширины\u003Cbr\u003E\u003Cp\u003E\tmin-width \u003C width \u003C max-width =\u003E width\u003Cbr\u003E\twidth \u003C max-width =\u003E width\u003Cbr\u003E\tmin-width \u003E width \u003E max-width =\u003E min-width\u003Cbr\u003E\tmin-width \u003E width \u003C max-width =\u003E min-width\u003Cbr\u003E","\u003Cp\u003EСвойство min-height\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\tЗадает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height.\u003Cbr\u003E","\u003Cp\u003EСвойство max-height\u003Cbr\u003E\u003Cp\u003E\tСинтаксис:\u003Cbr\u003E\tУстанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height.\u003Cbr\u003E","\u003Cp\u003EВычисление высоты\u003Cbr\u003E\u003Cp\u003E\tmin-height \u003C height \u003C max-height =\u003E height\u003Cbr\u003E\tmin-height \u003E height \u003E max-height =\u003E min-height\u003Cbr\u003E\tmin-height \u003E height \u003C max-height =\u003E min-height\u003Cbr\u003E\tmin-height \u003C height =\u003E height\u003Cbr\u003E\tmin-height \u003E height =\u003E min-height\u003Cbr\u003E\tmin-height \u003C max-height =\u003E max-height\u003Cbr\u003E"],href:"\u002Finformatika\u002Ffullstack-razrabotka-ispolzovanie-blochnoy-verstki-lektsiya",href_category:"\u002Finformatika",date:1659702871,related:[{id:200011,name:"Исследование по теме: Спутниковая связь и ее роль в жизни человека",href:"\u002Finformatika\u002Fissledovanie-po-teme-sputnikovaya-svyaz-i",jpg:"jpg\u002F200011"},{id:246977,name:"Програмне забезпечення Digitals",href:"\u002Finformatika\u002Fprogramne-zabezpechennya-digitals",jpg:"jpg\u002F246977"},{id:249396,name:"Компоненты процесса. Классификация процессов",href:"\u002Finformatika\u002Fkomponenty-protsessa-klassifikatsiya-protsessov",jpg:"jpg\u002F249396"},{id:367543,name:"Стандартные функции системы muLisp",href:"\u002Finformatika\u002Fstandartnye-funktsii-sistemy-mulisp",jpg:"jpg\u002F367543"},{id:393305,name:"Пристрої, що використовуються для роботи із повідомленнями",href:"\u002Finformatika\u002Fpristro-shcho-vikoristovuyutsya-dlya-roboti-z-1",jpg:"jpg\u002F393305"},{id:295636,name:"Устройство компьютера",href:"\u002Finformatika\u002Fustroystvo-kompyutera-29",jpg:"jpg\u002F295636"},{id:210966,name:"Языки программирования QBasic и Turbo Pascal 7.0",href:"\u002Finformatika\u002Fyazyki-programmirovaniya-qbasic-i-turbo-pascal",jpg:"jpg\u002F210966"},{id:214952,name:"TEPA Golden Rules modules presentation",href:"\u002Finformatika\u002Ftepa-golden-rules-modules-presentation",jpg:"jpg\u002F214952"},{id:467546,name:"Подготовка учащихся к ЕГЭ",href:"\u002Finformatika\u002Fpodgotovka-uchashchihsya-k-ege-2",jpg:"jpg\u002F467546"},{id:579445,name:"Организация обработки больших данных. Лекция 4",href:"\u002Finformatika\u002Forganizatsiya-obrabotki-bolshih-dannyh-lektsiya-4-5",jpg:"jpg\u002F579445"},{id:233926,name:"Школа::Кода Основы программирования на языке Python. 14 занятие",href:"\u002Finformatika\u002Fshkolakoda-osnovy-programmirovaniya-na-yazyke-python-1",jpg:"jpg\u002F233926"},{id:303298,name:"Состав объектов",href:"\u002Finformatika\u002Fsostav-obektov-8",jpg:"jpg\u002F303298"},{id:275869,name:"Язык программирования Паскаль",href:"\u002Finformatika\u002Fyazyk-programmirovaniya-paskal-6",jpg:"jpg\u002F275869"},{id:475768,name:"Компьютер - универсальная машина для работы с информацией",href:"\u002Finformatika\u002Fkompyuter-universalnaya-mashina-dlya-raboty-s-1",jpg:"jpg\u002F475768"},{id:436886,name:"Классификация информационных технологий",href:"\u002Finformatika\u002Fklassifikatsiya-informatsionnyh-tehnologiy-3",jpg:"jpg\u002F436886"},{id:123683,name:"Экспертные системы",href:"\u002Finformatika\u002Fekspertnye-sistemy-2",jpg:"jpg\u002F123683"},{id:406265,name:"Условный оператор. Решение задач",href:"\u002Finformatika\u002Fuslovnyy-operator-reshenie-zadach",jpg:"jpg\u002F406265"},{id:197284,name:"Аппаратное обеспечение работы компьютера",href:"\u002Finformatika\u002Fapparatnoe-obespechenie-raboty-kompyutera",jpg:"jpg\u002F197284"},{id:610488,name:"Программное обеспечение (Software)",href:"\u002Finformatika\u002Fprogrammnoe-obespechenie-software-1",jpg:"jpg\u002F610488"},{id:15963,name:"Сплайны - работа с элементами объектов. Autodesk 3ds max. Лекция №2",href:"\u002Finformatika\u002Fsplayny-rabota-s-elementami-obektov-autodesk",jpg:"jpg\u002F15963"},{id:439133,name:"Опрацювання даних як інформаційний процес. Кодування та декодування повідомлень",href:"\u002Finformatika\u002Fopratsyuvannya-danih-yak-nformatsyniy-protses-koduvannya",jpg:"jpg\u002F439133"},{id:287599,name:"Политика информационной безопасности и частные политики. Тема 3",href:"\u002Finformatika\u002Fpolitika-informatsionnoy-bezopasnosti-i-chastnye-politiki",jpg:"jpg\u002F287599"},{id:611710,name:"Элементы алгебры логики. Математические основы информатики. Информатика. 8 класс",href:"\u002Finformatika\u002Felementy-algebry-logiki-matematicheskie-osnovy-informatiki-19",jpg:"jpg\u002F611710"},{id:212096,name:"Подготовка к ЕГЭ по информатике. Занятие 03",href:"\u002Finformatika\u002Fpodgotovka-k-ege-po-informatike-zanyatie",jpg:"jpg\u002F212096"},{id:588273,name:"Кодирование информации (§5-8). 10 класс",href:"\u002Finformatika\u002Fkodirovanie-informatsii-5-8-10-klass",jpg:"jpg\u002F588273"},{id:3073,name:"Социальная сеть Instagram",href:"\u002Finformatika\u002Fsotsialnaya-set-instagram",jpg:"jpg\u002F3073"},{id:329049,name:"Автоматизация делопроизводства",href:"\u002Finformatika\u002Favtomatizatsiya-deloproizvodstva-1",jpg:"jpg\u002F329049"},{id:124772,name:"Решение задач по строкам",href:"\u002Finformatika\u002Freshenie-zadach-po-strokam",jpg:"jpg\u002F124772"}],navigation:{next:"\u002Fcherchenie\u002Fstadii-proektirovaniya-i-sostav-proektov-avtomatizatsii-1",next_name:"Стадии проектирования и состав проектов автоматизации. Виды и типы схем",prev:"\u002Fpedagogika\u002Fodnoklassniki-sverstniki-druzya-2",prev_name:"Одноклассники, сверстники, друзья"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Fullstack разработка. Использование блочной верстки. Лекция 4","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика",24,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Блочные элементы
Свойство для определения блочного элемента: display: block.

Особенности блочных элементов
Блоки располагаются по вертикали друг под другом;
На прилегающих сторонах элементов действует эффект схлопывания отступов;
Запрещено вставлять блочный элемент внутрь строчного;
По ширине блочные элементы занимают всё допустимое пространство;
Если задана ширина или высота контента (свойства width и height), то ширина блока складывается из значений width (height), полей, границ, отступов слева и справа (сверху и снизу);
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.

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

Строчные элементы
Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги
,
,
,
,
и др.
Используются для изменения вида текста или его логического выделения.

Строчные элементы
Свойство для определения строчного элемента:
display: inline.

Свойства строчных элементов
Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять
блочные элементы внутрь строчных запрещено;
Эффект схлопывания отступов не действует;
Свойства, связанные с размерами (width, height) не применимы;
Ширина равна содержимому плюс значения отступов, полей и границ;
Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;
Можно выравнивать по вертикали с помощью свойства vertical-align.

Анонимный строчный элемент
Серым цветом на рисунке помечен текст внутри тега
, а пунктиром
анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.

Блочно-строчные элементы
Блочно-строчный элемент – элемент, по структуре похожий на блочный, но обтекаемый остальными
объектами, как строчный.

Блочно-строчные элементы
Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы;
Высота элемента вычисляется
браузером автоматически, исходя из содержимого блока;
Ширина равна содержимому плюс значения отступов, полей и границ;
Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости;
Можно выравнивать по вертикали с помощью свойства vertical-align;
Разрешено задавать ширину и высоту;
Эффект схлопывания отступов не действует.

Блочно-строчные элементы
Свойство для определения блочно-строчного элемента: display: inline-block.

Свойство display
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис:

Свойство display
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис:
Свойства:
block —
элемент показывается как блочный;
inline — элемент показывается как строчный;
Inline-block — это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу;
list-item — элемент выводится как блочный и добавляется маркер списка;
none — временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

Свойство vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис:

Свойство vertical-align
baseline — выравнивает базовую линию текущего элемента по базовой линии родителя. Если
родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента;
bottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех;
middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента;
sub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется;
super — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним;
top — выравнивание верхнего края элемента по верху самого высокого элемента строки.

Свойство min-width
Синтаксис:
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной
минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

Свойство max-width
Синтаксис:
Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от
значений установленных свойств width, max-width и min-width.

Вычисление ширины
min-width < width < max-width => width
width < max-width => width
min-width >
width > max-width => min-width
min-width > width < max-width => min-width

Свойство min-height
Синтаксис:
Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от
установленных значений свойств height, max-height и min-height.

Свойство max-height
Синтаксис:
Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от
значений установленных свойств height, max-height и min-height.