Отображение элементов в CSS

25 просмотров Время на прочтение: 2 минут(ы)

Блочные, встроенные и невидимые элементы HTML.

Блочный элемент занимает всю строку, встроенный – ограничен своим содержимым, а невидимый вообще не отображается и не занимает места.

Пример 1

Значение “block” свойства “display” отображает встроенный HTML элемент “b” как блочный. Значение “inline” свойства “display” отображает блочные элементы “ul” и “li” как встроенные. Значение “none” свойства “display” полностью скрывает элемент “i”.

Пример 2

Свойство “background-color” задаёт большому прямоугольнику зелёный цвет, а маленьким, которые внутри большого, задаёт красный цвет. Значение “inline-block” свойства “display” позволяет внутренней части вести себя как блочному элементу, а внешней – как встроенному. Поэтому маленькие прямоугольники имеют указанные размеры как блочные элементы и переносятся на новые строки внутри большого прямоугольника как встроенные элементы.

Таблицы

Пример

Значение “table” свойства “display” указывает, что элемент “div” с классом “mytable” является таблицей. Также значения “table-row” и “table-cell” этого свойства определяют элементы с классами “myrow” и “mycell” как строки и ячейки таблицы. Свойство “border” задаёт зелёную рамку вокруг ячеек. Значение “collapse” свойства “border-collapse” указывает на слияние ближних рамок вокруг ячеек в одну. Свойство “padding” задаёт отступ между рамкой и содержимым ячеек в 30 пикселов.

РубрикиCSS

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru