Como trabalhar com o modelo de caixa básico em css3

Em CSS3, tudo o que você ver em uma página é em uma caixa. Essa caixa separa os objetos uns dos outros e faz com que seja possível criar vários efeitos especiais. Usando caixas torna possível posicionar do conteúdo na tela, preencher várias áreas com a cor, e criar os tipos de separações que os usuários esperam. As seções a seguir discutem o modelo de caixa básica em mais detalhes.

Como visualizar as caixas em CSS caixa modelo básico

o modelo de caixa básica na verdade, depende de uma série de quatro caixas de - cada um dos quais é colocado no interior da próxima.

Cada região ou caixa tem uma finalidade específica. Por exemplo, a margem serve para separar toda a região em caixa a partir de outras regiões enquadradas na página. Claro, você pode definir a margem de zero para que não há nenhuma separação, mas você pode fornecer o máximo de separação como necessária para obter a aparência desejada.

Fronteiras servem para fornecer separadores visuais entre os itens de conteúdo. Eles são usados ​​o tempo todo em páginas da web. Cada um dos lados de uma fronteira pode ser controlado separadamente. Você pode optar por exibir somente a borda direita e não a parte superior, inferior, ou para a esquerda quando se trabalha no painel esquerdo da página. A fronteira iria acabar parecendo uma linha em vez de uma caixa.

Preenchimento separa a borda a partir do conteúdo, quando a borda é exibida. Caso contrário, a fronteira eo conteúdo apareceria diretamente ao lado do outro e o conteúdo parece apertado em alguns casos. Isso seria um problema sério quando você está trabalhando com texto. Por outro lado, você pode realmente quer a fronteira junto a uma imagem para realçar a imagem e defini-lo fora em uma página.

O resultado de todas essas regiões é que você acaba com uma área de conteúdo que é um pouco menor do que a caixa como um todo a menos que você eliminar a margem, borda e preenchimento. O conteúdo está aninhado com segurança em sua caixa e apresenta informações para o usuário em uma forma que é tanto útil e esteticamente agradável.

Como trabalhar com o modelo de caixa em CSS3

O uso de uma fronteira é uma tal situação. Além disso, a configuração da margem para zero remove o espaço entre os elementos da tela. Não há nenhuma exigência para fazer uso do conteúdo. Um objeto na página pode proporcionar uma função visual também. O procedimento a seguir mostra algumas outras maneiras em que para trabalhar com a margem, borda, preenchimento e conteúdo usado para criar o modelo de caixa básica.

1. criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.

2. Abrir ExternalCSS.CSS.

3. 
   
   
   

   Alterar os estilos existentes, adicionando o código mostrado em negrito:

   p {font-family: cursiva-fonte de tamanho: grande cor: # 0000ff-cor de fundo: # ffff00-fronteira: início da fronteira de largura: de espessura-fronteira de raio: 6px; margem: 2px; padding: 5px; } h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; text-align: center-text-decoration: underline-color: # ff0000-background-color: # 00ffff-border-bottom-style: sulco-border-left; estilo: Cume -border-direita; style: cume-border-top-style: sulco-border-width: 15px; border-color: Gray-margin: 2px; padding: 6px;}

   Estas mudanças adicionar vários efeitos especiais ao texto. Você não iria realmente usar este muitos tipos diferentes de estilos em uma única página. É um pouco esmagadora.

   Observe que você pode fazer os cantos quadrados ou arredondados. A quantidade de arredondamento é especificado pela propriedade fronteira-raio. As fronteiras de largura e de fronteira propriedades tanto afectam o arredondamento bem. Alguns estilos de borda apoiar cantos arredondados melhor do que os outros fazem.

   É possível controlar a fronteira, a margem, e cada lado do estofamento individualmente. Este exemplo também mostra o efeito da combinação de estilos de borda para criar uma aparência particular. A fim de combinar estilos, você deve especificar cada lado separadamente.

4. Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   Video: Curso de HTML (aula 7) Iniciantes / básico - Trabalhando com Frames

   body {border: double-border-width: 20px; border-color: Azul Red Green Roxo-margin: 0-padding: 20px;}

   Muitos desenvolvedores se esqueça de que o documento tag é também uma tela objeto - e que sua aparência é controlável. Este exemplo adiciona uma borda ao redor de toda a área de conteúdo. Observe que a propriedade border-color é usado para adicionar uma cor diferente para cada lado: superior, direita, inferior e esquerda (nessa ordem).

5. Atualizar a página de teste.

   Você vê o efeito de fazer a mudança de estilo. Você nunca usaria isso muitos estilos juntos, exceto em um exemplo para fins de comparação.