Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Второй признак: «Независимость или зависимость размера элементов от содержания»
Размер элементов в крупной сетке не зависит от содержания, а задаётся фиксируется согласно макета. Например, ширина колонок всегда берётся из макета и принимается как данность. Дизайнер подбирает эту ширину так, чтобы в колонку помещалось, к примеру, три товара. Но вне зависимости от того, сколько в итоге товаров будет на странице, один или десять, ширина колонки останется постоянной. Размер элементов в микросетке наоборот, чаще всего, зависит от содержания. Например, ширина пунктов меню зависит от конкретного текста каждого пункта. Но при этом иногда ширина может быть фиксированной, например, у карточек товаров. В методике мы разберём, как построить крупную сетку и сделаем «скелет» для микросетки. Также мы предусмотрим разные варианты «переполнения» сетки. Это когда содержимого в прямоугольнике сетки становится больше, чем предполагалось в дизайне, либо когда в сетке меняется количество колонок. Сетка при этом должна гибко подстроиться под новые условия и не ломаться. Прежде чем приступить к построению сеток, нам нужно разобраться, что такое поток документа. Поток документа определяет как именно элементы отрисовываются на странице и как этот порядок отрисовки соотносится с HTML-кодом. Вот пример HTML-кода: <body> <header> </header> <main> <div class="column1"></div> <div class="column2"></div> <div class="column3"></div> </main> <footer> </footer></body>Схема того, как этот код отображается на странице:
Все элементы расположены ровно в том же порядке, в котором они были в коде. Теги в потоке документа «видят» друг друга, а если быть точнее, то каждый последующий тег «видит» предыдущий (но не наоборот). Теги друг друга отталкивают. Если расположенный выше элемент увеличить по высоте, то он оттолкнёт все нижележащие элементы. Мы можем управлять потоком с помощью различных CSS-свойств, изменять размеры элементов или даже изменять направление течения потока. Рассмотрим другой вариант потока для этой же разметки. Поток «течёт» как обычно сверху вниз, потом «поворачивает» слева направо, а потом снова идёт вниз:
Те же самые элементы можно выстроить в поток с тремя колонками:
Мы получили три варианта потока, а при этом исходный HTML-код не менялся. Управление потоком Для управления потоком в нашем распоряжении есть две группы CSS-свойств. Разделение достаточно условное, но можно сказать, что первая группа меняет поведение элементов в потоке, а вторая группа свойств меняет размеры самих элементов. К первой группе относятся свойства display, float. По вторую группу входят свойства width, height, margin, padding, border, box-sizing.
Теория~ 7 минут
|
||||
|
|
Последнее изменение этой страницы: 2021-01-14; просмотров: 90; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.59.187 (0.005 с.) |
Сетка страницы
Другой вариант сетки страницы
Другой вариант сетки страницы
