30. Модель компоновки css - боксы, границы, поля, заполнение

В лекции рассказывается о свойствах CSS, которые управляют компоновкой элементов HTML, включая их границы, поля, и многое другое.

Введение

На первый взгляд, модель компоновки CSS является простым делом. Боксы, границы и поля являются достаточно простыми объектами, а синтаксис CSS предоставляет простой способ описания их характеристик.

Однако процессоры визуализации браузеров следуют длинному списку правил, изложенных в Рекомендации CSS 2.1, и некоторым своим собственным. В связи с этим имеется множество деталей, которые необходимо понимать, прежде чем добавлять в набор используемых средств стилиста более развитые методы.

В этой лекции мы познакомимся со свойствами CSS, которые управляют компоновкой элементов HTML, включая их границы, поля, и многое другое. Будут также рассмотрены некоторые упомянутые выше правила. Развитая столбцовая компоновка и сеточно-ориентированные методы будут рассмотрены в последующих лекциях, которые исследуют компоновку форм, обтекание, очистку, и позиционирование более подробно. Будет рассмотрено много связанных с лекцией примеров кода для демонстрации обсуждаемых методов.

Лекция имеет следующее содержание:

• Изменение композиции: поля, границы и заполнение CSS

  • Размещение пробелов вокруг объекта: свойства margin-top, margin-right, margin-bottom, margin-left, и margin

    • Автоматические поля

    • Отрицательные поля

    • Сжатие полей

    • Пример 1

  • Добавление к объекту границы: свойства границ

    • Свойства border-width

    • Свойства border-color

    • Сокращенное свойство border и его четыре родственника, более подробно

    • Создание правил: обоснование пяти свойств сокращения border … вместо одного

    • …И зачем так много свойств? Они же просто границы, не так ли?

    • Пример 2

  • Когда одних полей недостаточно: свойства заполнения

    • Пример 3

• Работа с шириной и высотой элемента

  • Основы ширины и высоты

  • min-width, max-width, min-height, и max-height

    • Пример 4

  • Переполнение: ограничение в контенте, или задание свободным

    • Результаты четырех значений переполнения

• Боксовые модели CSS: подгонка друг к другу

  • Выбор подходящих единиц измерения для компоновки

    • Основное правило задания размеров элементов: смешивайте пропорциональные и статические единицы измерения с осторожностью, или вообще не смешивайте!

    • Выбор для компоновки подходящих единиц измерения: преимущества и недостатки

  • Компоненты боксовой модели

  • Боксовая модель W3C: все является аддитивным

    • Пропорциональные поля и заполнение в боксовой модели W3C

• Работа с потоком документа

  • Типы элементов и свойство display

    • Пример 5

  • Обтекание элементами других элементов: свойство float

    • Пример 6

  • Размещение элементов ниже своих плавающих предшественников: свойство clear

• Заключение

• Дополнительное чтение

• Контрольные вопросы