css — фон на блочных и встроенных элементах?
спросил
Изменено 13 лет, 2 месяца назад
Просмотрено 1к раз
На что ссылается фон в блочной модели (содержимое, отступы, границы и поля)?
Другими словами, какая часть блочной модели будет настроена на отображение цвета фона, если я установлю его на зеленый?
и это только блочные элементы (div, заголовок и т. д.), которые применяются к блочной модели? есть ли у встроенных элементов (span, text) отступы, границы и поля?
Полное заполнение элементов, не включая пространство, занятое полями. Вы можете проверить это с помощью следующей разметки/css:
.block { margin:5px; заполнение: 0; ширина: 25 пикселей; высота: 25 пикселей;
цвет фона: оранжевый; плыть налево; }
<дел>
<дел>
Визуализируйте это, и вы увидите в общей сложности 10 пикселей между оранжевыми прямоугольниками — наши поля.
У встроенных элементов также есть отступы и поля, но вы не всегда можете использовать их одинаково, поскольку они встроенные, а не блочные.
На этой небольшой диаграмме показано, как окно отображается в браузере: сама коробка и любой контент, который может ее окружать. Граница — это просто линия вокруг поля. Отступ — это пространство между краем блока и содержимым внутри блока. Любые установленные вами фоны будут заполнять всю рамку (внутри границ), сохраняя поля (пустое пространство) вокруг рамки.
Полагаю, почти каждый элемент может использовать поля, фон и границу. Однако некоторые элементы не поддерживают отступы, если только они не являются блочными, потому что это в основном то же самое, что и поля. Вы всегда можете протестировать разные стили, чтобы увидеть, что работает, а что нет, и как все перемещается в зависимости от настроенных вами стилей.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как добавить фоновый цвет для ширины текста вместо ширины всего элемента ширина всего элемента.
Вам также понадобятся свойства CSS.В следующем примере у нас есть заголовок в
, внутри которого мы добавляем встроенный элемент (
). Следующим шагом является установка цвета фона для элемента .Строковый элемент имеет такой же размер, как и его содержимое, и это решит проблему.
Пример установки цвета фона для ширины текста со встроенным элементом:
<голова>
<center><ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-1812626643144578"
data-ad-slot="8813674614"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>Название документа
<стиль>
ч2 {
выравнивание текста: по центру;
цвет: #fff;
}
h2 диапазон {
цвет фона: #43d9cf;
}
<тело>
Lorem Ipsum — это просто фиктивный текст
Попробуй сам »
Результат
Lorem Ipsum — просто фиктивный текст
Другой способ решить проблему — использовать для свойства отображения значение «таблица». Обратите внимание, что родительский элемент не требуется.
Пример установки цвета фона для ширины текста с отображением, установленным на «таблицу»:
<голова>
Название документа
<стиль>
ч2 {
дисплей: таблица;
поле: 0px авто 0px авто;
отступ: 3px;
размер шрифта: 24px;
цвет фона: #30cf52;
цвет: #fff;
}
<тело>
Lorem Ipsum — это просто фиктивный текст
Попробуй сам »
В следующем примере требуется родительский элемент, поэтому мы используем элемент
и выравнивание текста на «центр» для контейнера.
Пример установки цвета фона для ширины текста с отображением, установленным на «inline-flex»:
<голова>
Название документа
<стиль>
.контейнер {
выравнивание текста: по центру;
}
ч2 {
дисплей: встроенный гибкий;
отступ: 3px;
размер шрифта: 24px;
цвет фона: #4451b3;
цвет: #fff;
}
<тело>
<дел>
Lorem Ipsum — это просто фиктивный текст
Попробуй сам »
В следующем примере для отображения как контейнера, так и текста установлено значение «flex».
Для контейнера мы также используем свойство justify-content со значением «центр».
Пример установки цвета фона для ширины текста с отображением, установленным на «flex»:
<голова>
Название документа
<стиль>
.контейнер {
дисплей: гибкий;
выравнивание содержимого: по центру;
}
ч2 {
дисплей: гибкий;
отступ: 3px;
размер шрифта: 24px;
цвет фона: #000;
цвет: #fff;
}
<тело>
<дел>
Lorem Ipsum — это просто фиктивный текст
Попробуй сам »
Или вы также можете использовать значение «блок» свойства отображения. Здесь также требуется гибкий родительский контейнер.
Пример установки цвета фона для ширины текста с отображением, установленным на «блок»:
<голова>Название документа <стиль> .
