Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Глава 6. 2. 12. Баги и ограничения
Гриды, несмотря на относительную новизну технологии — отлично описанная система. Её реализовали и выпустили в современных браузерах в рекордные по меркам CSS срокам — за пару лет. Но, к сожалению, в браузерной реализации гридов есть и баги, которые пока не исправлены: 1. Про то, что gap не идеально работает с процентными значениями, мы рассказывали в материале про грид-интервалы. Для внешних и внутренних отступов грид-элементов также лучше не использовать размеры в процентах, так как браузеры их по-разному рассчитывают. 2. Элемент <fieldset> не может быть грид-контейнером в Google Chrome, и это большое упущение, так как вынуждает искать обходные пути при вёрстке. Кнопки <button> тоже не могут быть грид-контейнерами, но это может быть полезно реже. 3. Многострочное поле ввода <textarea> сворачивается до нулевого размера, когда в него вводят текст, правда, это происходит только в Google Chrome на MacOS. Полный список багов можно посмотреть здесь. Также пока что не везде работают subgrid: это возможность распространять влияние грида не только на дочерние элементы, но и на элементы более глубокой вложенности. Пример, в котором бы пригодился subgrid: <article class="grid"> <!-- это грид-контейнер --> <h1></h1> <!-- это грид-элемент -->
<ul> <!-- это грид-элемент --> <li></li> <!-- это уже не грид-элемент:(--> <li></li> <li></li> </ul>
<p></p> <!-- это грид-элемент --> </article> Если мы хотим сделать элементы списка <ul> грид-элементами, это не сработает: элементом грида будет только сам список как непосредственный дочерний элемент грид-контейнера. Свойство display: contents;, применённое для <ul> могло бы выступить в качестве решения этой проблемы, но у этого свойства пока что тоже есть проблемы с реализацией в браузерах.
Методика~ 43 минуты Глава 6.2.13. Методика построения сеток на гридах В методике мы рассмотрим алгоритм построения сеток, который подойдёт для вёрстки типового макета сайта с фиксированной шириной. Внутри общей сетки с фиксированной шириной часть рядов и столбцов могут также иметь фиксированные размеры, а часть — будут занимать всё оставшееся место или подстраиваться под размеры своего содержимого.
При построении модульных сеток в классической газетной и журнальной вёрстке используется подход «от общего к частному». Метод состоит в том, что сначала создаётся каркас страницы. Затем добавляются следующие в иерархии блоки и элементы. После этого снова идёт уточнение, доработка, детализация. И в завершении на странице появляются отдельные элементы. Подробнее про подход к созданию сетки в классической вёрстке Подход от общего к частому будем использовать и мы для построения сеток страниц сайта. Мы построим сетки каждого уровня детализации — крупные сетки, сетки для разделов, сетки для отдельных элементов. В методике мы рассмотрим наиболее часто встречающиеся варианты сеток. Разобранные приёмы можно сочетать с друг с другом. При проектировании сетки нужно сразу определить, что за интерфейс мы делаем. Будет ли он стараться поместиться в экран браузера по высоте целиком, как будто это браузерное приложение? Или же мы имеем дело с обычным контентным сайтом, который не ограничен по высоте, и в браузере может появляться полоса прокрутки при большом объёме контента? Рассмотрим оба этих варианта. Шаг 1. Создание общего контейнера для сетки В обоих случаях (приложение или контентный сайт) нам нужно первым делом создать общий контейнер, который будет ограничивать сетку по ширине и размещать её по центру страницы. Раскладка приложения В случае приложения, которое старается уместиться в доступную высоту экрана, мы будем делать один общий контейнер-центровщик. Им может выступать <div>, который идёт первым в <body> и оборачивает всю остальную разметку, или же сам <body> может выступать в роли такого контейнера-центровщика. <body class="container"> …</body>.container { width: 1440; margin: 0 auto;}
|
|||||
|
|
Последнее изменение этой страницы: 2021-01-14; просмотров: 91; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.220.160.216 (0.006 с.) |
Контейнер-центровщик ограничивает размер «рабочей области»
