Четвёртое домашнее задание по курсу ШРИ: Модель отображения.
Задание состоит из пяти задач, последние две из них повышенной сложности и помечены «звездочкой». В первых трех задачах необходимо придумать или найти максимальное число решений, а также нужно объяснить чем решения различаются и в каких ситуациях их стоит/не стоит применять. Задачи повышенной сложности нужно просто решить
Реализуйте трёхколоночную резиновую разметку страницы вида 1-2-1 (25%–50%–25%).
У вас есть абсолютно спозиционированный блок с каким-то содержимым. Необходимо поместить его в центре:
- По ширине страницы, если
- Блок имеет фиксированную ширину
- Блок имеет ширину, которая подстраивается под размер содержимого
- По высоте страницы, если
- Блок имеет фиксированную высоту
- Блок имеет высоту, которая подстраивается под размер содержимого (не забудьте скролл ;)
Всё это разные варианты окружения, сооответственно каждое имеет несколько решений.
Реализуйте прибитый подвал. Т.е подвал, который всегда прибит к нижней границе viewport'а, если высота содержимого меньше высоты viewport'а, и находится под содержимым, в случае если высота содержимого больше высоты viewport'а
Реализуйте разметку, указанную на картинке:
Нужно реализовать такое поведение трех элементов интерфейса (например, кнопок) при котором каждая кнопка занимает примерно треть пространства. И, если уменьшая браузер
одна из кнопок достигает своего минимального размера, то остальные кнопки тоже перестают уменьшаться по ширине. Схематически задание можно изобразить так:
- Спецификация CSS - Боксовая модель
- Спецификация CSS - Схемы позиционирования
- MDN - здесь всегда очень хорошие описания спецификации человеческим языком, в том числе поддержка свойств и особенности реализации
- Хабрахабр - Подробно о flaot
- Хабрахабр - То что вам никто не говорил про z-index
- Troubleshooting CSS (или можно почитать перевод на Хабре [http://habrahabr.ru/post/189118/](Проблемы CSS))
- Принципы работы современных браузеров
- Учебник Вани Сагалаева