O layout começa sua jornada desde os tempos em queo código foi escrito em HTML e a marcação foi feita em tabelas. Com o tempo, isso mudou e a marcação foi mudada para CSS. Agora, existem várias formas de layout. Flex-box, Bootstrap toolbox e os Grids mais recentes, que oferecem grandes oportunidades aos criadores, podem ser considerados modernos. Uma das opções de transição no desenvolvimento da Web é o layout de blocos. Anteriormente usado para criar marcação para a página inteira, agora é considerado obsoleto, mas ainda é amplamente usado em casos especiais.
O que é layout de bloco?
Ela substituiu o obsoleto e imperfeitotabular. A página é composta das chamadas camadas ou blocos, e a tag de fechamento <div> serve como os blocos de construção para isso. É uma tag de bloco que abrange toda a largura do elemento pai e a altura para caber no conteúdo. Mais tarde, essa composição foi chamada de "maravilhosa". A base para a orientação da página são as chamadas classes.
No momento, esse tipo de layout é significativamenteestá obsoleto e a própria tag <div> só deve ser usada conforme o pretendido. Muitas tags semanticamente corretas apareceram, o que torna mais fácil navegar pelo código. Por exemplo, há uma tag <nav> especial para o menu de navegação.
Para maior clareza, um layout de bloco pode ser representado da seguinte forma:
<div class = "wrapper">
<div class = "element1"> conteúdo </div>
<div class = "element2"> conteúdo </div>
<div class = "element3"> conteúdo </div>
</div>
Div com wrapper de classe écontainer pai ou, em outras palavras, um wrapper. Elementos com a classe de elemento são os blocos de construção de nossa estrutura complexa. Observe que uma margem diferente da margem em comparação com o elemento pai é usada no código para maior clareza, para tornar mais fácil definir a estrutura e a hierarquia dos elementos.
Usando tabelas
O layout da tabela de sites tem sidouma dor de cabeça para todos os programadores. Após a mudança para o modelo de blocos de sites, o uso de tabelas em geral, mesmo para a finalidade pretendida, não foi incentivado por algum tempo.
Esta abordagem é certamenteinapropriado e até prejudicial. Ele força que coisas simples sejam feitas de maneiras mais complexas e inconvenientes. Agora, a tabela é usada apenas para exibir os dados relevantes. Em outras palavras, de acordo com sua finalidade direta.
Separação de funções
Se antes toda a construção era feita em HTML,o layout em blocos trouxe consigo uma separação completa de funções. No momento, o HTML serve apenas para marcação, formatação lógica e wireframe de página. Os estilos são completamente retirados e incluídos em um arquivo separado que está incluído no documento. CSS é usado para posicionar os elementos e criar um design atraente e responsivo. Para se referir ao bloco, são utilizadas classes, que recebem o nome do elemento. Por exemplo, para o bloco de cabeçalho, atribuiremos a classe de cabeçalho. Também torna mais fácil navegar no código. Hoje em dia, isso é parcialmente feito por tags especializadas que aparecem no HTML5.
Usando blocos <div>
Para layout de bloco, a tag é usada ativamente<div>. É semelhante a um tijolo de um edifício. Embora constitua a base, a estrutura do site, não é, no entanto, o único. Como portas, janelas, ventilação, varandas e semelhantes, outros elementos HTML são usados para o layout. São links, formulários, fotos, listas e tabelas.
Usar a tag <div> tornou o códigomais compacto e intuitivo. A transição para o layout de blocos permitiu livrar-se do html do desnecessário, ou seja, dos estilos. Deu a oportunidade de remover completamente o layout de mesa sobrecarregado e difícil de navegar.
Usa ativamente o layout de blocos CSS.Usando as ferramentas disponíveis, você pode criar qualquer construção de página com precisão de pixel. Este layout é chamado de pixel perfeito. Isso implica uma combinação perfeita do site com o layout. A foto acima mostra que o layout do bloco também não é tão simples. No início, era simplesmente impossível ficar sem mesas. Eles foram usados para criar a construção de página básica e os blocos foram aplicados a elementos individuais. Isso foi até que eles aprenderam como definir a altura dos blocos.
Vantagens
O layout de blocos do site tem as seguintes vantagens:
- Não há bordas transparentes na largura de um pixel, como era o caso do layout da mesa.
- Os blocos são fáceis de posicionar uns em relação aos outros.
- Os blocos podem ser redimensionados para criar designs responsivos.
- A capacidade de sobreposição não quebra o layout da página, mas permite adicionar efeitos interessantes.
Desenvolvimento adicional
Atualmente, o layout do bloco do div éobsoleto e encontra apenas uso limitado, apenas como um caso especial para certas situações. Ele foi substituído pelo posicionamento e envolvimento no layout. Eles tinham muitas deficiências, mas em geral permitiam mais do que o layout de blocos.
Em seguida, uma construção apareceu usandoelementos inline-block. Isso facilitou muito o trabalho dos programadores. Este método tem os benefícios de ambos os tipos de blocos e permite um design mais responsivo e responsivo. É importante destacar que todos esses métodos, de uma forma ou de outra, consistiam em um elemento div, que deu o nome de "layout maravilhoso".
Atualmente, para construir a páginausa flex-box e bootstrap. Eles reduzem significativamente o código e tornam mais rápido e fácil a criação de designs responsivos de alta qualidade. Permite mover blocos sem quebrar a página inteira.
Uma nova tecnologia está na vanguarda do progresso -Grids. Ele permite que você crie de forma rápida e fácil projetos de qualquer complexidade. E os blocos, o acondicionamento, o posicionamento, como acontecia com as tabelas no devido tempo, são usados apenas para o fim a que se destinam.
