Explicação do Código CSS
1. Box Model - Propriedade `box-sizing`
A propriedade box-sizing define como as larguras e alturas dos elementos são calculadas, incluindo o padding e a borda no cálculo do tamanho do elemento.
No código fornecido, o estilo para a classe .box está usando o valor border-box, o que significa que o padding será incluído no cálculo da largura e altura do elemento.
.box {
box-sizing: border-box;
padding: 1rem;
width: 800px;
}
Ou seja, o box-sizing: border-box; faz com que o padding e a borda do elemento não aumentem sua largura total.
2. Formatação de Imagens - Propriedade `shape-outside`
A propriedade shape-outside é usada para definir uma forma de contorno que a imagem ou o conteúdo pode seguir, permitindo que o texto flua ao redor dela de maneira interessante.
No exemplo abaixo, a classe .svgs define uma imagem e a utiliza como forma para o texto fluir ao redor dela. Isso é útil para criar layouts mais dinâmicos e interessantes:
.svgs {
width: 200px;
height: 240px;
float: left;
shape-outside: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
background-size: 100px 100px;
}
A forma é determinada pela URL da imagem fornecida no shape-outside, fazendo com que o conteúdo se adapte à forma dessa imagem.
3. Propriedade `background-image`
A propriedade background-image é usada para definir uma imagem de fundo para um elemento. Ela é útil para adicionar imagens ao fundo de uma página, sem que elas se sobreponham ao conteúdo.
No código, a propriedade é aplicada ao elemento body da página:
body {
background-image: url("https://www.dtbps3games.com/wp-content/uploads/2019/01/Ninja-Gaiden-3-ps3-pkg.jpg");
color: #555;
font-family: Arial, sans-serif;
}
Isso adiciona uma imagem de fundo à página inteira, criando uma estética interessante.
4. Layout de Tabela - Propriedade `display: table` e `table-cell`
O uso de display: table e display: table-cell é uma maneira de criar um layout de tabela sem usar a tag <table> diretamente. É uma técnica útil para criar layouts de duas ou mais colunas.
No exemplo abaixo, a classe .conteudo é configurada como uma tabela e as classes .imagem e .texto são configuradas como células de tabela:
.conteudo {
display: table;
}
.imagem {
display: table-cell;
float: left;
}
.texto {
display: table-cell;
float: left;
width: 540px;
margin-left: 20px;
}
Esse tipo de layout cria uma divisão entre a imagem e o texto, tornando o conteúdo mais organizado e fluido.
5. Propriedade `position: absolute`
A propriedade position: absolute permite que um elemento seja posicionado em relação ao seu contêiner mais próximo com position: relative.
No código fornecido, a imagem e o texto dentro da classe .container são posicionados absolutamente dentro de seu contêiner:
.container {
position: relative;
}
#image {
position: absolute;
}
#texto {
position: absolute;
font-size: 12px;
left: 100px;
top: 535px;
color: red;
font-family: Verdana;
}
Isso garante que os elementos dentro do contêiner sejam posicionados de maneira precisa, independentemente do fluxo normal da página.
Post a Comment