USER-MASTER.ORG

Блочная модель в CSS

Оцените материал
(1 Голосовать)

По умолчанию каждый элемент HTML отображается в браузере в виде прямоугольника. Размеры этого прямоугольника динамичны: они меняются в зависимости от содержимого данного элемента. Вы можете рассматривать эти прямоугольники как жидкость, изменяющую свою форму, чтобы соответствовать содержимому.

Это потому, что веб-страница является живым элементом: просто измените размер окна браузера и увидите, как большинство элементов адаптируется автоматически в пределах доступного пространства.

Это поведение по умолчанию веб-страницы. Но поскольку дизайн веб-страницы часто требует закрепить элементы на месте, с заданными размерами, CSS позволяет поменять или даже отменить это поведение жидкости.

Блочный элемент, такой как абзац, будет занимать всё пространство по горизонтали, которым по умолчанию является ширина вашего браузера. Вертикально этот абзац будет адаптировать свою высоту к размеру содержимого.

При расчёте учитываются многие параметры: размер содержимого, используемый шрифт, его размер, интервалы, отступы, границы, позиционирование.

  • Фон в CSS
    • background-color
    • background-image
    • Разница между <img> и фоновыми изображениями
    • Градиенты
    • background-position
    • background-repeat
  • display в CSS
    • Почему бы не использовать строчные элементы, такие как <span>?
    • display: block
    • display: inline
    • display: list-item
    • display: none
    • visibility: hidden
  • Высота и ширина в CSS
    • Одновременная установка высоты и ширины
    • overflow
    • Опасайтесь фиксированных размеров
  • Граница в CSS
    • Единственная граница
    • Сокращённые комбинации
  • padding в CSS
  • margin в CSS
    • Объединение вертикальных margin
      • Это странно!
    • Выбор между margin и padding

Дополнительная информация

  • Автор: Джереми Томас
  • Название книги: Блочная модель в CSS
  • Количество страниц: 17
  • Формат файла: PDF
  • Размер файла: 737 КБ
  • Скачать: Гугл.Диск
Прочитано 14 раз
Другие материалы в этой категории: « Текст в CSS Продвинутые уроки по HTML и CSS »

Добавить комментарий

Защитный код
Обновить

Поиск