Почему мой первый фон div не красный
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
div.main {background-color:red;} <div>
<div class = "main">
<div class = "green"></div>
<div class = "cyan"></div>
<div class = "blue"></div>
</div>
</div>Мой фон div должен быть красным, но он этого не делает. Я сделал ошибку или что-то в этом роде, потому что я буквально понятия не имею, почему background-color: red; не работает?
Ответы 4
Совет: попробуйте использовать Инспектор, чтобы узнать, действительно ли он работает или нет.
background-color: red;
работает нормально, если вы отключите background-color для остальных, вы увидите, что он красный, но другие div и их фон мешают красному.
также вы определили, что каждый div имеет размер 100 пикселей * 100 пикселей, это включает ваш основной div, поэтому он не меньше других, даже если он содержит все остальные.
Какой браузер вы используете? В настоящее время в большинстве из них есть встроенный режим разработчика. Если вы используете Chrome, щелкните правой кнопкой мыши свое поле и «проверьте», тогда вы увидите элементы страницы и вкладку «стиль», где вы можете редактировать и включать / отключать стили для элементов.
В каждом крупном браузере (включая Edge и Safari) есть инструменты разработчика, которые в основном включают в себя инспектор DOM, горячая клавиша в окнах предназначена для большинства браузеров: F12 Или щелкните правой кнопкой мыши и выберите «проверить», как указал @Rup.
Он работает, но вы столкнулись с проблема переполнения, потому что вы установили фиксированный width / height для все в div. Таким образом, главный div равен по высоте своему первому дочернему элементу. Измените его высоту на авто, чтобы избежать этого, и вы увидите красный цвет.
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
div.main {
background-color: red;
height:auto;
}<div>
<div class = "main">
<div class = "green"></div>
<div class = "cyan"></div>
<div class = "blue"></div>
</div>
</div>Вы также можете удалить лишний div и вернуть элемент .main в блок с автоматической шириной:
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
div.main {
background-color: red;
height: auto;
width:auto;
display:block;
}<div class = "main">
<div class = "green"></div>
<div class = "cyan"></div>
<div class = "blue"></div>
</div>требуется высота и ширина
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
.main {
background-color:red;
width:auto;
height:auto
}
Вы также должны указать высоту для класса main, чтобы была определена рабочая область класса div. при использовании height:auto; он автоматически фиксировал высоту класса. Вы также можете использовать высоту в px или %. Также, если вы хотите показать класс div в той же строке, используйте либо display:block;, либо display:flex;.
body {
background-color: #FFFFFF;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.blue {
background-color: hsl(240, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
div.main {
background-color:red;
height: auto;
width: auto;
}
<div>
<div class = "main">
<div class = "green"></div>
<div class = "cyan"></div>
<div class = "blue"></div>
</div>
</div>
Не могли бы вы объяснить мне, что означает «инспектор»?