HTML и CSS. Таблицы. Блочная модель документа float & clear display: inline-block презентация

Сергей Скубида
Инструктор IT Education Academy
Front-end developer в X Project
КОНТАКТНЫЕ ДАННЫЕ
[e-mail]
Фото
инструктора
www.itea.ua

План Занятия
Таблицы
Блочная модель документа
float & clear
display: inline-block
www.itea.ua

Таблицы
www.itea.ua

Таблицы
www.itea.ua
- таблица
- строка таблицы
- ячейка внутри строки
Слайд 6
Таблицы
www.itea.ua
атрибут border=""
Слайд 7
Таблицы
www.itea.ua
Двойные рамки
border-collapse: collapse;
Слайд 8
Таблицы
www.itea.ua
Внешние отступы
Атрибут cellspacing="5"
Свойство border-spacing: 5px;
Слайд 9
Таблицы
www.itea.ua
Внутренние отступы
padding: 5px;
Слайд 10
Таблицы
www.itea.ua
- Заголовок таблицы
caption {
caption-side: bottom;
text-align:right;
}
Слайд 11
Таблицы
www.itea.ua
- название столбцов
Слайд 12
Таблицы структура
www.itea.ua
…
…
…
…
Слайд 13
Таблицы
www.itea.ua
Атрибут colspan для растягивания ячейки по горизонтали
Слайд 14
Таблицы
www.itea.ua
Атрибут rowspan служит для растягивания ячейки по вертикали
Слайд 15
Таблицы
www.itea.ua
выравнивание по горизонтали
text-align:
left
center
right
Слайд 16
Таблицы
www.itea.ua
выравнивание по вертикали
vertical-align:
top
middle
bottom.
Слайд 17
Блочная модель документа
www.itea.ua
Слайд 18
Блочные элементы
www.itea.ua
Блочные элементы – занимают всю ширину родительского контейнера или экрана. Высота
зависит от содержания
Слайд 19
Строчные элементы
www.itea.ua
Ширина и высота зависит от содержания
Слайд 20
width & height
www.itea.ua
.element {
width: 100px;
height: 100px;
}
Слайд 21
Блочные элементы
www.itea.ua
Значения высоты и ширины
по-умолчанию - auto
selector {
width: auto;
height: auto
}
Слайд 22
Строчные элементы
www.itea.ua
Не будут реагировать на свойства
width & height
Слайд 23
Внутренние отступы
www.itea.ua
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
Слайд 24
Внешние отступы
www.itea.ua
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
Слайд 25
Центрирование
www.itea.ua
.wrap {
width: 1280px;
margin: 0 auto;
}
Слайд 26
Рамки
www.itea.ua
border: 1px solid #000;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000;
Слайд 27
Рамки
www.itea.ua
border-top: 1px solid #000;
border-right: 1px dashed #000;
border-left: 1px dotted #000;
border-bottom: 1px double
#000;
Слайд 28
Блочная модель
www.itea.ua
Область, занимаемая блочным элементом, состоит из его ширины и высоты содержания,
внутренних и внешних отступов, ширины рамок.
Слайд 29
Блочные элементы
www.itea.ua
Можно задавать
margin
padding
border
width
height
Слайд 30
Строчные элементы
www.itea.ua
Можно задавать
margin только по горизонтали
padding* по горизонтали. По вертикали работает с
особенностями
border* работает по всем сторонам. *Сверху и снизу не увеличивают занимаемое место
Слайд 31
Особенности блочной модели
www.itea.ua
1. padding между двумя соседними блоками всегда равен сумме padding’ов
Слайд 32
Особенности блочной модели
www.itea.ua
2. margin по горизонтали между двумя соседними блоками всегда равен
сумме margin’ов
Слайд 33
Особенности блочной модели
www.itea.ua
3. Схлопывание вертикальных margino’в
У первого блока margin-bottom: 20px;
У второго блока
margin-top: 30px;
Расстояние между ними = 30px
максимальному margin одного из них
Слайд 34
Особенности блочной модели
www.itea.ua
4. Выпадение margino’в
Если внутри родительского блока расположить блок и задать
ему margin-top, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента. Так же произойдет с
margin-bottom
Слайд 35
Особенности блочной модели
www.itea.ua
4. Выпадение margino’в
Если у родительского элемента тоже был задан внешний
отступ, то выберется максимальный отступ между собственным и «выпавшим».
Слайд 36
Особенности блочной модели
www.itea.ua
4. Выпадение margino’в
Чтобы избавиться от эффекта выпадения, можно задать родительскому
элементу padding-top или border-top
Слайд 37
width
www.itea.ua
Задает только ширину содержания
Слайд 38
width:auto;
www.itea.ua
Если у блока есть внутренние отступы или рамки, то его ширина содержания
автоматически уменьшается, а общая ширина остаётся равной ширине родителя.
Слайд 39
width:100%;
www.itea.ua
В этом случае ширина содержания блока равна ширине родительского блока. Если блоку
добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.
Слайд 40
www.itea.ua
.element {
width: 500px;
padding: 20px;
border: 10px solid #000;
}
Ширина такого блока будет равна 560px
Слайд 41
box-sizing:border-box;
www.itea.ua
Теперь ширина элемента будет состоять из width, border и padding
Слайд 42
box-sizing - наследуемое
www.itea.ua
content-box — значение по умолчанию.
border-box — изменяет режим расчёта ширины.
Теперь padding & border включены в width
Слайд 43
www.itea.ua
.element {
width: 500px;
padding: 20px;
border: 10px solid #000;
box-sizing: border-box;
}
Ширина такого блока будет равна
500px
Слайд 44
display
www.itea.ua
display:
block – блок будет блочный
inline – блок будет строчный
none – невидимый блок
Слайд 45
Как управлять потоком?
www.itea.ua
table
float
inline-block
flexbox
grid
Слайд 46
www.itea.ua
Float
Слайд 47
Float - обтекание
www.itea.ua
left — прижимает элемент к левому краю родителя, другие элементы
обтекают его справа;
Слайд 48
Float - обтекание
www.itea.ua
right — прижимает элемент к правому краю родителя, другие элементы
обтекают его слева;
Слайд 49
Float - обтекание
www.itea.ua
none — отключает режим обтекания и возвращает элементу нормальное поведение.
Слайд 50
Float
www.itea.ua
Ширина блока со свойством float
Равна ширине его содержимого
При этом можно задавать
width, height, margin, padding, border
Слайд 51
Float
www.itea.ua
Строчный блок со свойством float
Начинает вести себя как блочный
Слайд 52
Float
www.itea.ua
Блочные элементы не видят элементы с флоатом, но текст внутри блочных элементов
обтекает элементы с float.
Слайд 53
Float
www.itea.ua
Если у блоков идущих один за другим есть float, тогда они видят
друг друга и выстраиваются в ряд.
Благодаря такому свойству float его стали применять для создания сеток
Слайд 54
clear
www.itea.ua
clear запрещает обтекание элемента другими элементами. Значения:
left — запрещено обтекание слева;
right —
запрещено обтекание справа;
both — запрещено с обеих сторон;
none — обтекание разрешено
Слайд 55
clear
www.itea.ua
Если после элемента c float расположен элемент с clear:both; , то последний
опускается под флоатный.
Слайд 56
www.itea.ua
inline-block
Слайд 57
display: inline-block
www.itea.ua
блочно-строчный элемент.
По-умолчанию блоков с таким свойством нет.
Любому блоку можно указать
display:
inline-block;
Слайд 58
Особенности inline-block
www.itea.ua
Можно задавать margin, padding, border,
width, height (т.е все то что можно
задавать блочным элементам)
Слайд 59
Особенности inline-block
www.itea.ua
Ширина по умолчанию зависит от содержания
Слайд 60
Особенности inline-block
www.itea.ua
располагаться на одной строке, друг за другом, пока помещаются в контейнер,
после переносятся в следующий ряд
Слайд 61
Особенности inline-block
www.itea.ua
Их можно вертикально выравнивать vertical-align;
Слайд 62
Особенности inline-block
www.itea.ua
Реагируют на горизонтальное выравнивание, text-align, заданное у родителя.
Слайд 63
inline-block & float
www.itea.ua
Inline-block не может зацепится за другой блок.
Высота строк у inline-block
рассчитывается по максимальному элементу.
Слайд 64
inline-block ведет себя как текст
www.itea.ua
Между двумя соседними inline-block есть пустое место –
это пробел. Потому что элемент со свойством inline-block ведет себя как текст
Слайд 65
inline-block ведет себя как текст
www.itea.ua
Один из нескольких способов решить эту проблему –
указать font-size:0 родителю таких элементов
Слайд 66
Полезные ссылки
https://habr.com/ru/post/137588/ Взвешиваем селекторы CSS
https://www.w3.org/TR/CSS22/propidx.html Список наследуемых свойств
https://validator.w3.org/ (Валидатор кода)
www.itea.ua
Имя файла: HTML-и-CSS.-Таблицы.-Блочная-модель-документа-float-&-clear-display:-inline-block.pptx
Количество просмотров: 68
Количество скачиваний: 0
Скачать
- Предыдущая
Методы рекрутинга. График постов, шаблоны
Следующая -
Дистанционное банковское обслуживание физических лиц и его совершенствование (на примере организации ОО Россельхозбанк)
Похожие презентации
Мистерия Игры Богов – I. Квадрант Инициации
Урок Внутренние устройства ПК
Цифровые образовательные инструменты для школьников, студентов и в профессиональном образовании
Методи та системи паралельного програмування
Базы данных и информационные системы
What would you like to invent
Программирование на языке Си#. Тема 8. Массивы (двумерные)
Квантовий комп'ютер
Медиапаспорт печатного и интернет-издания Русский репортер
A Tutorial to DirectShow
Урок информатики Множества
Описание ситуаций, возникающих при работе с приложением
Алгоритми. Контейнери в STL. (Лекція 2)
Инструментальные средства верификации и тестирования
Программирование задач с использованием функций
HTML. The standard markup language for creating Web pages
База данных SQL
Самотестирование BIOS
Презентация учащихся 8-го класса Жизнь без интернета
Конкурс Своя игра
Структуризация сетей
Объектно-ориентированное программирование в Python
Презентация Алфавитный подход
Interactiunea intre procese
Основы языка SQL
Кодирование информации (§13-15). 10 класс
Програма провідник. Робота з об’єктами
Робота з програмами на розвиток логічного мислення
Обратная связь
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){return {data:{meta:{result:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,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:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E}},categories:{result:[{id:F,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:F,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:G,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:24,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:204189,name:l,category:G,count:67,jpg:"jpg\u002F204189",hits:68,download:b,h1:"HTML и CSS. Таблицы. Блочная модель документа float & clear display: inline-block презентация",meta:{h1:l,title:l,description:"HTML и CSS. Таблицы. Блочная модель документа float & clear display: inline-block презентация на тему, доклад, Информатика",keywords:"HTML и CSS. Таблицы. Блочная модель документа float & clear display: inline-block, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему HTML и CSS. Таблицы. Блочная модель документа float & clear display: inline-block из раздела Информатика. Презентация на заданную тему содержит 67 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EСергей Скубида\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003EИнструктор IT Education Academy\u003Cbr\u003EFront-end developer в X Project\u003Cbr\u003E\u003Cp\u003EКОНТАКТНЫЕ ДАННЫЕ\u003Cbr\u003E\u003Cbr\[e-mail]\u003Cbr\u003E\u003Cp\u003EФото\u003Cbr\u003Eинструктора\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E \u003Cp\u003EПлан Занятия\u003Cbr\u003E\u003Cp\u003EТаблицы\u003Cbr\u003E",file:"HTML-и-CSS.-Таблицы.-Блочная-модель-документа-float-&-clear-display:-inline-block.pptx",texts:["\u003Cp\u003EWWW.ITEA.UA\u003Cbr\u003E\u003Cp\u003EHTML & CSS\u003Cbr\u003E\u003Cp\u003EIT Education\u003Cbr\u003EAcademy\u003Cbr\u003E","\u003Cp\u003EСергей Скубида\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003EИнструктор IT Education Academy\u003Cbr\u003EFront-end developer в X Project\u003Cbr\u003E\u003Cp\u003EКОНТАКТНЫЕ ДАННЫЕ\u003Cbr\[e-mail]\u003Cbr\u003E\u003Cp\u003EФото\u003Cbr\u003Eинструктора\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E","\u003Cp\u003EПлан Занятия\u003Cbr\u003E\u003Cp\u003EТаблицы\u003Cbr\u003EБлочная модель документа\u003Cbr\u003Efloat & clear\u003Cbr\u003Edisplay: inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E \t- таблица\u003Cbr\u003E\u003Ctr\u003E \t\t- строка таблицы\u003Cbr\u003E\u003Ctd\u003E\t\t- ячейка внутри строки\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003Eатрибут border=\"\"\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EДвойные рамки\u003Cbr\u003Eborder-collapse: collapse;\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EВнешние отступы\u003Cbr\u003EАтрибут cellspacing=\"5\"\u003Cbr\u003EСвойство border-spacing: 5px; \u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EВнутренние отступы \u003Cbr\u003Epadding: 5px;\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E\u003Ccaption\u003E - Заголовок таблицы\u003Cbr\u003Ecaption {\u003Cbr\u003E\tcaption-side: bottom;\u003Cbr\u003E\ttext-align:right;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cth\u003E - название столбцов\u003Cbr\u003E","\u003Cp\u003EТаблицы структура\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E\u003Cbr\u003E \u003Ccaption\u003E…\u003C\u002Fcaption\u003E\u003Cbr\u003E \u003Cthead\u003E…\u003C\u002Fthead\u003E\u003Cbr\u003E \u003Ctfoot\u003E…\u003C\u002Ftfoot\u003E\u003Cbr\u003E \u003Ctbody\u003E…\u003C\u002Ftbody\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EАтрибут colspan для растягивания ячейки по горизонтали \u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EАтрибут rowspan служит для растягивания ячейки по вертикали\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eвыравнивание по горизонтали\u003Cbr\u003Etext-align:\u003Cbr\u003E left\u003Cbr\u003E center\u003Cbr\u003E right\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eвыравнивание по вертикали\u003Cbr\u003Evertical-align:\u003Cbr\u003E top\u003Cbr\u003E middle \u003Cbr\u003E bottom.\u003Cbr\u003E","\u003Cp\u003EБлочная модель документа\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EБлочные элементы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EБлочные элементы – занимают всю ширину родительского контейнера или экрана. Высота зависит от содержания\u003Cbr\u003E","\u003Cp\u003EСтрочные элементы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EШирина и высота зависит от содержания\u003Cbr\u003E","\u003Cp\u003Ewidth & height\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E.element {\u003Cbr\u003E width: 100px;\u003Cbr\u003E height: 100px;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EБлочные элементы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EЗначения высоты и ширины\u003Cbr\u003Eпо-умолчанию - auto\u003Cbr\u003Eselector {\u003Cbr\u003E\twidth: auto;\u003Cbr\u003E\theight: auto\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСтрочные элементы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EНе будут реагировать на свойства\u003Cbr\u003Ewidth & height\u003Cbr\u003E","\u003Cp\u003EВнутренние отступы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Epadding: 10px;\u003Cbr\u003Epadding: 10px 20px;\u003Cbr\u003Epadding: 10px 20px 30px;\u003Cbr\u003Epadding: 10px 20px 30px 40px;\u003Cbr\u003E","\u003Cp\u003EВнешние отступы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Emargin: 10px;\u003Cbr\u003Emargin: 10px 20px;\u003Cbr\u003Emargin: 10px 20px 30px;\u003Cbr\u003Emargin: 10px 20px 30px 40px;\u003Cbr\u003E","\u003Cp\u003EЦентрирование\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E.wrap {\u003Cbr\u003E width: 1280px;\u003Cbr\u003E margin: 0 auto;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EРамки\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eborder: 1px solid #000;\u003Cbr\u003Eborder-top-width: 1px;\u003Cbr\u003Eborder-top-style: dotted;\u003Cbr\u003Eborder-top-color: #000;\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EРамки\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eborder-top: 1px solid #000;\u003Cbr\u003Eborder-right: 1px dashed #000;\u003Cbr\u003Eborder-left: 1px dotted #000;\u003Cbr\u003Eborder-bottom: 1px double #000;\u003Cbr\u003E","\u003Cp\u003EБлочная модель\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EОбласть, занимаемая блочным элементом, состоит из его ширины и высоты содержания, внутренних и внешних отступов, ширины рамок.\u003Cbr\u003E","\u003Cp\u003EБлочные элементы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EМожно задавать\u003Cbr\u003Emargin\u003Cbr\u003Epadding\u003Cbr\u003Eborder\u003Cbr\u003Ewidth\u003Cbr\u003Eheight\u003Cbr\u003E","\u003Cp\u003EСтрочные элементы\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EМожно задавать\u003Cbr\u003Emargin \tтолько по горизонтали\u003Cbr\u003Epadding* \tпо горизонтали. По вертикали \t\tработает с особенностями\u003Cbr\u003Eborder*\tработает по всем сторонам. *Сверху и снизу не увеличивают занимаемое место\u003Cbr\u003E","\u003Cp\u003EОсобенности блочной модели\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E1. padding между двумя соседними блоками всегда равен сумме padding’ов\u003Cbr\u003E","\u003Cp\u003EОсобенности блочной модели\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E2. margin по горизонтали между двумя соседними блоками всегда равен сумме margin’ов\u003Cbr\u003E","\u003Cp\u003EОсобенности блочной модели\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E3. Схлопывание вертикальных margino’в\u003Cbr\u003EУ первого блока margin-bottom: 20px;\u003Cbr\u003EУ второго блока margin-top: 30px;\u003Cbr\u003EРасстояние между ними = 30px\u003Cbr\u003Eмаксимальному margin одного из них\u003Cbr\u003E","\u003Cp\u003EОсобенности блочной модели\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E4. Выпадение margino’в\u003Cbr\u003EЕсли внутри родительского блока расположить блок и задать ему margin-top, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента. Так же произойдет с \u003Cbr\u003Emargin-bottom\u003Cbr\u003E","\u003Cp\u003EОсобенности блочной модели\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E4. Выпадение margino’в\u003Cbr\u003EЕсли у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим».\u003Cbr\u003E","\u003Cp\u003EОсобенности блочной модели\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E4. Выпадение margino’в\u003Cbr\u003EЧтобы избавиться от эффекта выпадения, можно задать родительскому элементу padding-top или border-top\u003Cbr\u003E","\u003Cp\u003Ewidth\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EЗадает только ширину содержания\u003Cbr\u003E","\u003Cp\u003Ewidth:auto;\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EЕсли у блока есть внутренние отступы или рамки, то его ширина содержания автоматически уменьшается, а общая ширина остаётся равной ширине родителя.\u003Cbr\u003E","\u003Cp\u003Ewidth:100%;\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EВ этом случае ширина содержания блока равна ширине родительского блока. Если блоку добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.\u003Cbr\u003E","\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E.element {\u003Cbr\u003E\twidth: 500px;\u003Cbr\u003E\tpadding: 20px;\u003Cbr\u003E\tborder: 10px solid #000;\u003Cbr\u003E}\u003Cbr\u003EШирина такого блока будет равна 560px\u003Cbr\u003E","\u003Cp\u003Ebox-sizing:border-box;\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EТеперь ширина элемента будет состоять из width, border и padding\u003Cbr\u003E","\u003Cp\u003Ebox-sizing - наследуемое\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Econtent-box — значение по умолчанию.\u003Cbr\u003Eborder-box — изменяет режим расчёта ширины. Теперь padding & border включены в width\u003Cbr\u003E","\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E.element {\u003Cbr\u003E\twidth: 500px;\u003Cbr\u003E\tpadding: 20px;\u003Cbr\u003E\tborder: 10px solid #000;\u003Cbr\u003E\tbox-sizing: border-box;\u003Cbr\u003E}\u003Cbr\u003EШирина такого блока будет равна 500px\u003Cbr\u003E","\u003Cp\u003Edisplay\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Edisplay:\u003Cbr\u003Eblock – блок будет блочный\u003Cbr\u003Einline – блок будет строчный\u003Cbr\u003Enone – невидимый блок\u003Cbr\u003E","\u003Cp\u003EКак управлять потоком?\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Etable\u003Cbr\u003Efloat\u003Cbr\u003Einline-block\u003Cbr\u003Eflexbox\u003Cbr\u003Egrid\u003Cbr\u003E","\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EFloat\u003Cbr\u003E","\u003Cp\u003EFloat - обтекание\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eleft — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;\u003Cbr\u003E","\u003Cp\u003EFloat - обтекание\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eright — прижимает элемент к правому краю родителя, другие элементы обтекают его слева;\u003Cbr\u003E","\u003Cp\u003EFloat - обтекание\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Enone — отключает режим обтекания и возвращает элементу нормальное поведение.\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EШирина блока со свойством float \u003Cbr\u003EРавна ширине его содержимого\u003Cbr\u003EПри этом можно задавать width, height, margin, padding, border\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EСтрочный блок со свойством float \u003Cbr\u003EНачинает вести себя как блочный\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EБлочные элементы не видят элементы с флоатом, но текст внутри блочных элементов обтекает элементы с float.\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EЕсли у блоков идущих один за другим есть float, тогда они видят друг друга и выстраиваются в ряд.\u003Cbr\u003EБлагодаря такому свойству float его стали применять для создания сеток\u003Cbr\u003E","\u003Cp\u003Eclear\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eclear запрещает обтекание элемента другими элементами. Значения:\u003Cbr\u003Eleft — запрещено обтекание слева;\u003Cbr\u003Eright — запрещено обтекание справа;\u003Cbr\u003Eboth — запрещено с обеих сторон;\u003Cbr\u003Enone — обтекание разрешено\u003Cbr\u003E","\u003Cp\u003Eclear\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EЕсли после элемента c float расположен элемент с clear:both; , то последний опускается под флоатный.\u003Cbr\u003E","\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Einline-block\u003Cbr\u003E","\u003Cp\u003Edisplay: inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eблочно-строчный элемент.\u003Cbr\u003EПо-умолчанию блоков с таким свойством нет.\u003Cbr\u003EЛюбому блоку можно указать \u003Cbr\u003Edisplay: inline-block; \u003Cbr\u003E","\u003Cp\u003EОсобенности inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EМожно задавать margin, padding, border,\u003Cbr\u003Ewidth, height (т.е все то что можно задавать блочным элементам)\u003Cbr\u003E","\u003Cp\u003EОсобенности inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EШирина по умолчанию зависит от содержания\u003Cbr\u003E","\u003Cp\u003EОсобенности inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Eрасполагаться на одной строке, друг за другом, пока помещаются в контейнер, после переносятся в следующий ряд\u003Cbr\u003E","\u003Cp\u003EОсобенности inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EИх можно вертикально выравнивать vertical-align;\u003Cbr\u003E","\u003Cp\u003EОсобенности inline-block\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EРеагируют на горизонтальное выравнивание, text-align, заданное у родителя.\u003Cbr\u003E","\u003Cp\u003Einline-block & float\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EInline-block не может зацепится за другой блок.\u003Cbr\u003EВысота строк у inline-block рассчитывается по максимальному элементу.\u003Cbr\u003E","\u003Cp\u003Einline-block ведет себя как текст\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EМежду двумя соседними inline-block есть пустое место – это пробел. Потому что элемент со свойством inline-block ведет себя как текст\u003Cbr\u003E","\u003Cp\u003Einline-block ведет себя как текст\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003EОдин из нескольких способов решить эту проблему – указать font-size:0 родителю таких элементов\u003Cbr\u003E","\u003Cp\u003EПолезные ссылки\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fhabr.com\u002Fru\u002Fpost\u002F137588\u002F Взвешиваем селекторы CSS\u003Cbr\u003Ehttps:\u002F\u002Fwww.w3.org\u002FTR\u002FCSS22\u002Fpropidx.html Список наследуемых свойств\u003Cbr\u003Ehttps:\u002F\u002Fvalidator.w3.org\u002F (Валидатор кода)\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ewww.itea.ua\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E\t\t\t\u003Cbr\u003E","\u003Cp\u003EITEA\u003Cbr\u003E\r\nЖК “Smart House”, ул. Машиностроительная, 41 (м.Берестейская)\u003Cbr\u003E \u003Cbr\u003EЖК «Корона» улица Срибнокильская,1\r\nм. Позняки\u003Cbr\u003E+38 [phone]\u003Cbr\u003Efacebook.com\u002FItea\u003Cbr\[e-mail]\u003Cbr\u003Eitea.ua\u003Cbr\u003E \u003Cbr\u003E\u003Cp\u003EКОНТАКТНЫЕ \r\nДАННЫЕ\u003Cbr\u003E"],href:"\u002Finformatika\u002Fhtml-i-css-tablitsy-blochnaya-model",href_category:"\u002Finformatika",date:1633881383,related:[{id:144236,name:"Мистерия Игры Богов – I. Квадрант Инициации",href:"\u002Finformatika\u002Fmisteriya-igry-bogov--i-kvadrant-1",jpg:"jpg\u002F144236"},{id:536138,name:"Урок Внутренние устройства ПК",href:"\u002Finformatika\u002Furok-vnutrennie-ustroystva-pk",jpg:"jpg\u002F536138"},{id:172892,name:"Цифровые образовательные инструменты для школьников, студентов и в профессиональном образовании",href:"\u002Finformatika\u002Ftsifrovye-obrazovatelnye-instrumenty-dlya-shkolnikov-studentov",jpg:"jpg\u002F172892"},{id:214984,name:"Методи та системи паралельного програмування",href:"\u002Finformatika\u002Fmetodi-ta-sistemi-paralelnogo-programuvannya-1",jpg:"jpg\u002F214984"},{id:369133,name:"Базы данных и информационные системы",href:"\u002Finformatika\u002Fbazy-dannyh-i-informatsionnye-sistemy-3",jpg:"jpg\u002F369133"},{id:200008,name:"What would you like to invent",href:"\u002Finformatika\u002Fwhat-would-you-like-to-invent-1",jpg:"jpg\u002F200008"},{id:611870,name:"Программирование на языке Си#. Тема 8. Массивы (двумерные)",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-si-tema-8",jpg:"jpg\u002F611870"},{id:88575,name:"Квантовий комп'ютер",href:"\u002Finformatika\u002Fkvantoviy-kompyuter",jpg:"jpg\u002F88575"},{id:319225,name:"Медиапаспорт печатного и интернет-издания Русский репортер",href:"\u002Finformatika\u002Fmediapasport-pechatnogo-i-internet-izdaniya-russkiy",jpg:"jpg\u002F319225"},{id:402649,name:"A Tutorial to DirectShow",href:"\u002Finformatika\u002Fa-tutorial-to-directshow",jpg:"jpg\u002F402649"},{id:459116,name:"Урок информатики Множества",href:"\u002Finformatika\u002Furok-informatiki-mnozhestva",jpg:"jpg\u002F459116"},{id:231460,name:"Описание ситуаций, возникающих при работе с приложением",href:"\u002Finformatika\u002Fopisanie-situatsiy-voznikayushchih-pri-rabote-s",jpg:"jpg\u002F231460"},{id:231604,name:"Алгоритми. Контейнери в STL. (Лекція 2)",href:"\u002Finformatika\u002Falgoritmi-konteyneri-v-stl-lektsya-2",jpg:"jpg\u002F231604"},{id:606937,name:"Инструментальные средства верификации и тестирования",href:"\u002Finformatika\u002Finstrumentalnye-sredstva-verifikatsii-i-testirovaniya",jpg:"jpg\u002F606937"},{id:273309,name:"Программирование задач с использованием функций",href:"\u002Finformatika\u002Fprogrammirovanie-zadach-s-ispolzovaniem-funktsiy",jpg:"jpg\u002F273309"},{id:89574,name:"HTML. The standard markup language for creating Web pages",href:"\u002Finformatika\u002Fhtml-the-standard-markup-language-for",jpg:"jpg\u002F89574"},{id:2065,name:"База данных SQL",href:"\u002Finformatika\u002Fbaza-dannyh-sql",jpg:"jpg\u002F2065"},{id:185215,name:"Самотестирование BIOS",href:"\u002Finformatika\u002Fsamotestirovanie-bios",jpg:"jpg\u002F185215"},{id:492889,name:"Презентация учащихся 8-го класса Жизнь без интернета",href:"\u002Finformatika\u002Fprezentatsiya-uchashchihsya-8-go-klassa-zhizn",jpg:"jpg\u002F492889"},{id:513561,name:"Конкурс Своя игра",href:"\u002Finformatika\u002Fkonkurs-svoya-igra",jpg:"jpg\u002F513561"},{id:352206,name:"Структуризация сетей",href:"\u002Finformatika\u002Fstrukturizatsiya-setey-1",jpg:"jpg\u002F352206"},{id:332053,name:"Объектно-ориентированное программирование в Python",href:"\u002Finformatika\u002Fobektno-orientirovannoe-programmirovanie-v-python",jpg:"jpg\u002F332053"},{id:518121,name:"Презентация Алфавитный подход",href:"\u002Finformatika\u002Fprezentatsiya-alfavitnyy-podhod",jpg:"jpg\u002F518121"},{id:299556,name:"Interactiunea intre procese",href:"\u002Finformatika\u002Finteractiunea-intre-procese-1",jpg:"jpg\u002F299556"},{id:293713,name:"Основы языка SQL",href:"\u002Finformatika\u002Fosnovy-yazyka-sql-1",jpg:"jpg\u002F293713"},{id:588736,name:"Кодирование информации (§13-15). 10 класс",href:"\u002Finformatika\u002Fkodirovanie-informatsii-13-15-10-klass",jpg:"jpg\u002F588736"},{id:379107,name:"Програма провідник. Робота з об’єктами",href:"\u002Finformatika\u002Fprograma-provdnik-robota-z-obktami",jpg:"jpg\u002F379107"},{id:416729,name:"Робота з програмами на розвиток логічного мислення",href:"\u002Finformatika\u002Frobota-z-programami-na-rozvitok-logchnogo",jpg:"jpg\u002F416729"}],navigation:{next:"\u002Finformatika\u002Fdistantsionnoe-bankovskoe-obsluzhivanie-fizicheskih-lits-i",next_name:"Дистанционное банковское обслуживание физических лиц и его совершенствование (на примере организации ОО Россельхозбанк)",prev:"\u002Fmarketing\u002Fmetody-rekrutinga-grafik-postov-shablony",prev_name:"Методы рекрутинга. График постов, шаблоны"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:H,SITE_HOST:"mypreza.com",SITE_LANG:I,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:H,short_name:a,description:a,lang:I,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:J,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:J,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,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:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",13,"h3","#d53032","#ffffff","HTML и CSS. Таблицы. Блочная модель документа float & clear display: inline-block","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images","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,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) зависит от содержания

Таблицы
www.itea.ua
атрибут border=""

Таблицы
www.itea.ua
Двойные рамки
border-collapse: collapse;

Таблицы
www.itea.ua
Внешние отступы
Атрибут cellspacing="5"
Свойство border-spacing: 5px;

Таблицы
www.itea.ua
Внутренние отступы
padding: 5px;

Таблицы
www.itea.ua

Таблицы
www.itea.ua

Таблицы структура
www.itea.ua
…
…
…
…

Таблицы
www.itea.ua
Атрибут colspan для растягивания ячейки по горизонтали

Таблицы
www.itea.ua
Атрибут rowspan служит для растягивания ячейки по вертикали

Таблицы
www.itea.ua
выравнивание по горизонтали
text-align:
left
center
right

Таблицы
www.itea.ua
выравнивание по вертикали
vertical-align:
top
middle
bottom.

Блочная модель документа
www.itea.ua

Блочные элементы
www.itea.ua
Блочные элементы – занимают всю ширину родительского контейнера или экрана. Высота зависит от содержания

Строчные элементы
www.itea.ua
Ширина и высота зависит от содержания

width & height
www.itea.ua
.element {
width: 100px;
height: 100px;
}

Блочные элементы
www.itea.ua
Значения высоты и ширины
по-умолчанию - auto
selector {
width: auto;
height: auto
}

Строчные элементы
www.itea.ua
Не будут реагировать на свойства
width & height

Внутренние отступы
www.itea.ua
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;

Внешние отступы
www.itea.ua
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;

Центрирование
www.itea.ua
.wrap {
width: 1280px;
margin: 0 auto;
}

Рамки
www.itea.ua
border: 1px solid #000;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000;

Рамки
www.itea.ua
border-top: 1px solid #000;
border-right: 1px dashed #000;
border-left: 1px dotted #000;
border-bottom: 1px double #000;

Блочная модель
www.itea.ua
Область, занимаемая блочным элементом, состоит из его ширины и высоты содержания, внутренних и внешних отступов, ширины рамок.

Блочные элементы
www.itea.ua
Можно задавать
margin
padding
border
width
height

Строчные элементы
www.itea.ua
Можно задавать
margin только по горизонтали
padding* по горизонтали. По вертикали работает с особенностями
border* работает по всем сторонам. *Сверху и снизу не увеличивают занимаемое место

Особенности блочной модели
www.itea.ua
1. padding между двумя соседними блоками всегда равен сумме padding’ов

Особенности блочной модели
www.itea.ua
2. margin по горизонтали между двумя соседними блоками всегда равен сумме margin’ов

Особенности блочной модели
www.itea.ua
3. Схлопывание вертикальных margino’в
У первого блока margin-bottom: 20px;
У второго блока margin-top: 30px;
Расстояние между ними = 30px
максимальному margin одного из них

Особенности блочной модели
www.itea.ua
4. Выпадение margino’в
Если внутри родительского блока расположить блок и задать ему margin-top, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента. Так же произойдет с
margin-bottom

Особенности блочной модели
www.itea.ua
4. Выпадение margino’в
Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим».

Особенности блочной модели
www.itea.ua
4. Выпадение margino’в
Чтобы избавиться от эффекта выпадения, можно задать родительскому элементу padding-top или border-top

width
www.itea.ua
Задает только ширину содержания

width:auto;
www.itea.ua
Если у блока есть внутренние отступы или рамки, то его ширина содержания автоматически уменьшается, а общая ширина остаётся равной ширине родителя.

width:100%;
www.itea.ua
В этом случае ширина содержания блока равна ширине родительского блока. Если блоку добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.

www.itea.ua
.element {
width: 500px;
padding: 20px;
border: 10px solid #000;
}
Ширина такого блока будет равна 560px

box-sizing:border-box;
www.itea.ua
Теперь ширина элемента будет состоять из width, border и padding

box-sizing - наследуемое
www.itea.ua
content-box — значение по умолчанию.
border-box — изменяет режим расчёта ширины. Теперь padding & border включены в width

www.itea.ua
.element {
width: 500px;
padding: 20px;
border: 10px solid #000;
box-sizing: border-box;
}
Ширина такого блока будет равна 500px

display
www.itea.ua
display:
block – блок будет блочный
inline – блок будет строчный
none – невидимый блок

Как управлять потоком?
www.itea.ua
table
float
inline-block
flexbox
grid

www.itea.ua
Float

Float - обтекание
www.itea.ua
left — прижимает элемент к левому краю родителя, другие элементы обтекают его справа;

Float - обтекание
www.itea.ua
right — прижимает элемент к правому краю родителя, другие элементы обтекают его слева;

Float - обтекание
www.itea.ua
none — отключает режим обтекания и возвращает элементу нормальное поведение.

Float
www.itea.ua
Ширина блока со свойством float
Равна ширине его содержимого
При этом можно задавать width, height, margin, padding, border

Float
www.itea.ua
Строчный блок со свойством float
Начинает вести себя как блочный

Float
www.itea.ua
Блочные элементы не видят элементы с флоатом, но текст внутри блочных элементов обтекает элементы с float.

Float
www.itea.ua
Если у блоков идущих один за другим есть float, тогда они видят друг друга и выстраиваются в ряд.
Благодаря такому свойству float его стали применять для создания сеток

clear
www.itea.ua
clear запрещает обтекание элемента другими элементами. Значения:
left — запрещено обтекание слева;
right — запрещено обтекание справа;
both — запрещено с обеих сторон;
none — обтекание разрешено

clear
www.itea.ua
Если после элемента c float расположен элемент с clear:both; , то последний опускается под флоатный.

www.itea.ua
inline-block

display: inline-block
www.itea.ua
блочно-строчный элемент.
По-умолчанию блоков с таким свойством нет.
Любому блоку можно указать
display: inline-block;

Особенности inline-block
www.itea.ua
Можно задавать margin, padding, border,
width, height (т.е все то что можно задавать блочным элементам)

Особенности inline-block
www.itea.ua
Ширина по умолчанию зависит от содержания

Особенности inline-block
www.itea.ua
располагаться на одной строке, друг за другом, пока помещаются в контейнер, после переносятся в следующий ряд

Особенности inline-block
www.itea.ua
Их можно вертикально выравнивать vertical-align;

Особенности inline-block
www.itea.ua
Реагируют на горизонтальное выравнивание, text-align, заданное у родителя.

inline-block & float
www.itea.ua
Inline-block не может зацепится за другой блок.
Высота строк у inline-block рассчитывается по максимальному элементу.

inline-block ведет себя как текст
www.itea.ua
Между двумя соседними inline-block есть пустое место – это пробел. Потому что элемент со свойством inline-block ведет себя как текст

inline-block ведет себя как текст
www.itea.ua
Один из нескольких способов решить эту проблему – указать font-size:0 родителю таких элементов

Полезные ссылки
https://habr.com/ru/post/137588/ Взвешиваем селекторы CSS
https://www.w3.org/TR/CSS22/propidx.html Список наследуемых свойств
https://validator.w3.org/ (Валидатор кода)
www.itea.ua