Questão FC373516
Um programador desenvolveu a página web abaixo. <!DOCTYPE html> <html> <head> <style> div.caixa { box-sizing: border-box; width: 50%; border: 5px solid #000; float: left; text-alig
Desenvolvimento Web
FCC · 2019
Um programador desenvolveu a página web abaixo.
<!DOCTYPE html>
<html>
<head>
<style>
div.caixa {
box-sizing: border-box;
width: 50%;
border: 5px solid #000;
float: left;
text-align:center
}
</style>
</head>
<body>
<div class="caixa">Caixa do lado esquerdo</div>
<div class="caixa">Caixa do lado direito</div>
</body>
</html>
Se o programador trocar o valor da propriedade box-sizing de border-box para content-box os contêineres com class="caixa" provavelmente
- não terão bordas, permanecendo apenas seus conteúdos.
- diminuirão de tamanho e haverá uma margem entre eles.
- permanecerão um ao lado do outro, um à esquerda e um à direita.
- serão colocados um dentro do outro.
- serão posicionados um abaixo do outro.
Mostrar resposta e comentário
Gabarito
Errado
Comentário do professor
Ao usar box-sizing: content-box, a propriedade width (50%) passa a definir apenas a área de conteúdo. Ou seja, border e padding são acrescentados fora dessa largura.
No exemplo cada div.caixa tem width: 50% e border: 5px. Com content-box cada caixa ocupa na prática \(50\% + 2\times5px\). Duas caixas lado a lado somam \(100\% + 4\times5px\), ultrapassando a largura do contêiner.
Como as caixas estão com float: left, o navegador tenta colocá‑las horizontalmente; ao não caberem, a segunda é empurrada para a linha seguinte. Portanto, ao trocar para content-box, as caixas provavelmente serão posicionadas uma abaixo da outra.
Conteúdo do catálogo FC Concursos · Atualizado em