Свойството за ширина на CSS определя ширината на областта на съдържанието на елемента. Тази област е пространството между границата на елемента, подложката и полето. Освен това свойството ширина на CSS със стойността „ годно съдържание ” ще коригира ширината на елемента според съдържанието.
Това проучване ще обясни свойството ширина на CSS със стойността fit-content.
Как да използвам свойство CSS width със стойност на fit-content?
За целите на използването на свойство за ширина на CSS със стойност за fit-content, проверете дадения синтаксис:
ширина: подходящо съдържание
Пример
В HTML добавете три елемента div с едно и също име на клас „ кутия 'и три различни класа' цвят-1 ”, “ цвят-2 ', и ' цвят-3 ”, съответно. Добавете
елемент във всеки div, за да добавите съдържание към уеб страницата:
< див клас = 'кутия цвят-1' >
< стр > CSS съдържание за прилягане на ширината стр >
див >
< див клас = 'кутия цвят-2' >
< стр > Здравей свят ! стр >
див >
< див клас = 'кутия цвят-3' >
< стр > Работата в екип започва с изграждане на доверие. Ние работим в екип за обща мисия. стр >
див >
Ето резултата от HTML кода:
Досега обсъждахме HTML страницата. Сега, в следващия раздел, ще приложим различни CSS стилове към HTML елементите, за да изглеждат по-добре. В текущия пример ще проверим поведението на „ ширина „имот със стойност“ годно съдържание ” в CSS.
Стил „кутия“ div
.кутия {ширина: fit-content;
височина: 50px;
цвят: ghostwhite;
подложка: 6px;
поле: 2px;
размер на шрифта: 18px;
}
„ .кутия ” се отнася до кутията на клас div. По-долу са свойствата, които се прилагат към него:
-
- “ ширина ' свойство със стойност ' годно съдържание ” използва наличното пространство, но няма да надхвърли съдържанието.
- “ височина ” е свойството, което определя височината на елемента.
- “ цвят ” определя цвета на шрифта на елемента.
- “ подплата ” Свойството създава пространство вътре в границата на елемента или около съдържанието.
- “ марж ” определя пространството около елемента.
- “ размер на шрифта ” свойството определя размера на шрифта.
Стил “цвят-1” div
.color- 1 {Цвят на фона: #00ABB3;
}
„ Цвят на фона ” е зададено на „ .цвят-1 ” div.
Стил 'цвят-2' div
.color- 2 {Цвят на фона: #083AA9;
}
Стил 'цвят-3' div
Цвят на фона: #4C6793;
}
Може да се види, че ширината на елемента е зададена равна на съдържанието:
Това е страхотно! Успешно се научихме да използваме CSS “ ширина ' свойство със стойност ' годно съдържание ”.
Заключение
Свойството ширина на CSS ни позволява да използваме няколко стойности. Тези стойности са в проценти, пиксели или повече. За да го настроите според съдържанието, „ годно съдържание ” може да се зададе стойност. Тази публикация описва свойството ширина на CSS със стойността fit-content с практическа демонстрация.