Como usar a tag div em HTML para criar blocos de interface
Neste artigo, mostrarei como usar a tag div e algumas propriedades CSS relacionadas. Assim, você saberá como criar blocos na interface de um site.
A tag div desempenha um papel muito importante, ela é usada para criar uma capa para uma posição ( block ) na interface. Anteriormente, quando não havia tags de cabeçalho, rodapé, artigo .., os programadores usavam tags div para criar blocos de interface no cabeçalho e no rodapé. Agora é diferente, você pode usar tags div ou as tags recém-adicionadas.
Mas no final, esses novos cartões não são nada de especial. É essencialmente o mesmo que a tag div, apenas dando um novo nome para olhar o layout HTML que se pode julgar sua posição exata na interface.
Mục lục
Propriedades de tags div em HTML
A tag div em HTML é uma tag normal, exibida por padrão como um bloco. Portanto, costumamos usá-lo para criar blocos na interface do site.
O comprimento padrão de uma tag div é 100% , o que significa que ela se estende da esquerda para a direita, o domínio é limitado pela quantidade de espaço que as tags HTML externas compõem. A tag div não possui um atributo para ajustar a exibição, que devemos combinar com CSS para alterar, se necessário.
A sintaxe da tag div é a seguinte :
<div> ... Nội dung bên trong </div>Você também pode criar várias tags div aninhadas como esta :
<div> <div> <div> ... Nội dung bên trong </div> </div> </div>É claro que o uso excessivo de tags HTML em um tema afetará a velocidade de carregamento da página, SEO .. e muitos outros fatores. Portanto, para pessoas de frontend experientes, elas serão muito limitadas ao usar muitos níveis de HTML.
Como criar um bloco div na interface HTML
Para usá-lo fluentemente, você deve saber como combinar com propriedades CSS para personalizar a exibição padrão de tags div.
Alterar o plano de fundo para a tag div .
De forma bem simples, só precisamos usar a propriedade background no CSS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Definir altura e largura para a tag div .
Usando as propriedades height e width , podemos alterar a altura e a largura da tag div.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background:white; height: 300px; width: 400px; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Criar borda para tag div .
Para criar uma borda, usamos a propriedade border em CSS.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red }Altere o espaço entre o conteúdo e a borda
Execute os exemplos acima e você verá o conteúdo dentro da tag div próximo à borda. Agora vou usar a propriedade padding no CSS para criar espaço entre eles.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; }Definir a centralização da tela para a tag div .
Se você quiser que a tag div seja exibida centralizada em relação às margens, use o atributo margin.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; margin: 0px auto; }Onde 0px é a distância na parte superior e inferior e auto é a distância automática entre a esquerda e a direita. Porque eu defino auto, ele será centralizado automaticamente. Vamos executar o exemplo para ver os resultados.
Mover para a esquerda ou direita com float
A propriedade float em CSS nos ajudará a alinhar à esquerda ou à direita para essa tag div.
- float:left => alinhar à esquerda
- float:right => alinhamento direito
ASA esquerda
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:left }Certo
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:right }É simples demais, não é? Neste artigo, quero apenas apresentar a tag div e algumas das operações mais usadas. Nos próximos artigos, vou aplicá-lo aos layouts de construção.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
