Por que eu deveria usar um recipiente div em HTML?

votos
60

Atualmente, estou aprendendo html / css, e tenho notado uma técnica comum é colocar uma div contêiner genérico na raiz da tag body:

<html>
  <head>
    ...
  </head>
  <body>
    <div id=container>
      ...
    </div>
  </body>
</html>

Existe uma razão válida para fazer isso? Por que não pode o css referência apenas a tag corpo?

Publicado 10/12/2008 em 01:34
fonte usuário
Em outras línguas...                            


9 respostas

votos
58

O div recipiente, e às vezes o conteúdo div, são quase sempre usados ​​para permitir mais sofisticado estilo CSS. A tag corpo é especial em alguns aspectos. Browsers não tratá-lo como um div normais; a sua posição e as dimensões estão vinculados a janela do navegador.

Mas um recipiente div é apenas um div e você pode denominá-lo com margens e fronteiras. Você pode dar-lhe uma largura fixa, e você pode centralizá-lo com margin-left: auto; margin-right: auto.

Além disso, o conteúdo, como um aviso de direitos autorais, por exemplo, pode ir do lado de fora do recipiente div, mas não pode ir na parte externa do corpo, permitindo que o conteúdo do lado de fora de uma fronteira.

Respondeu 10/12/2008 em 01:40
fonte usuário

votos
10

Este método permite que você tenha mais flexibilidade de modelar o conteúdo inteiro. Effectivly criando dois recipientes que você pode estilo. A tag HTML corpo que serve como plano de fundo, eo div com um id de recipiente que contém o seu conteúdo.

Isso, então, permite posicionar o seu conteúdo dentro da página, ao estilo de um fundo ou outros efeitos sem problema. Pense nisso como um "quadro" para o conteúdo.

Respondeu 10/12/2008 em 01:38
fonte usuário

votos
2

Este é um dos maiores maus hábitos perpetrados por codificadores de front-end.

Todas as respostas acima de mim estão errados. O corpo leva uma largura, margens, bordas, etc, devem agir como seu recipiente inicial. O elemento html deve agir como plano de fundo "tela" como foi planejado. Em dezenas de sites que eu fiz eu só tive que usar um div recipiente uma vez.

Eu estaria disposto a ser que esses mesmos programadores que utilizam divs de contêiner também estão sujando sua marcação com divs dentro de divs - em toda a parte.

Não há de fazê-lo. Use divs com moderação e apontar para marcação magra.

- = - = - ATUALIZAÇÃO - Não sei o que há de errado com isso porque eu posso editar esta resposta a partir de 5 anos atrás, mas eu não pode responder aos comentários que diz que eu preciso de 50 Rep antes que eu possa fazê-lo. Assim, vou acrescentar a minha resposta às respostas que recebeu aqui. - = - = -

Eu só descobri isso, anos após a minha resposta, e ver que há algum acompanhamento respostas. E, certamente, você está brincando?

O site de espaço reservado instalado você encontrou para o meu domínio, que eu nunca dizia ser minha marcação ou estilo, ou mesmo mencionado no meu post, foi muito claramente um CMS instalação básica com não uma palavra de conteúdo (ele disse isso na página inicial). Isso não foi minha marcação e estilo. Esse foi o modelo padrão Silverstripe. E eu tomar nenhum crédito por isso. É, no entanto, talvez um dos dois únicos exemplos que eu posso pensar que seria necessário um div container.

Exemplo 1: Um modelo genérico concebido para acomodar incógnitas. Neste caso você estava vendo um modelo CMS padrão que tinha divs dentro de divs dentro de divs.

O horror.

Exemplo 2: Um layout de três colunas para obter o rodapé para limpar adequadamente (acho que isso foi provavelmente o cenário que eu tinha que precisava de uma div recipiente, difícil de lembrar, porque isso foi há anos.)

Eu fiz apenas construir (nem mesmo terminado ainda) um tema para o meu domínio e começou a carregar o conteúdo. Para este exemplo facilmente alcançado de marcação semântica, clique no link.

http://www.bitbeyond.com

Francamente, estou perplexo que as pessoas pensam que você realmente precisa de um div recipiente e começar com um antes de sequer tentar apenas um corpo. O corpo, como ouvi explicou uma vez por um dos autores originais da especificação CSS, foi concebido como o "container inicial".

Markup devem ser adicionados conforme necessário, não porque isso é apenas a maneira que você viu-lo feito.

Respondeu 17/06/2010 em 22:30
fonte usuário

votos
1

Eu sei que isto é uma questão de idade, mas eu enfrentei esta questão me redesenhar um website. Troy Dalmasso me fez pensar. Ele faz um bom ponto. Então, eu comecei a ver se eu poderia fazê-lo funcionar sem um div container.

Eu poderia quando eu definir a largura do corpo. No meu caso para 960px.

Este é o css que eu uso:

html {
  text-align:center;
}

body {
  margin: 0 auto;
  width: 960px;
}

Esta muito bem centra os inline-blocos que também têm uma largura fixa.

Espero que este seja de utilidade para ninguém.

Respondeu 30/01/2013 em 15:03
fonte usuário

votos
1

Alguns navegadores (<tosse> Internet Explorer) não suportam determinadas propriedades no corpo, nomeadamente widthe max-width.

Respondeu 17/06/2010 em 22:44
fonte usuário

votos
1

As razões mais comuns para mim são de modo que:

  1. O layout pode ter uma largura fixa (sim, eu sei, eu faço um monte de trabalho para os designers que gostam de larguras fixas), e
  2. Assim, o layout pode ser centrada através da aplicação text-align: center para o corpo e, em seguida, margin: auto à esquerda e à direita da div container.
Respondeu 10/12/2008 em 01:44
fonte usuário

votos
0

Bem,

O div recipiente é muito bom ter, porque se você deseja que o site centrado, você simplesmente não pode fazê-lo apenas com o corpo ou html ... mas você pode, com divs. Por recipiente? Geralmente é usado, só porque o código itselve tem que ser limpo e legível. Assim que é recipiente ... Ele contém todas website, no caso de você querer mexer com ele ao redor :)

Boa sorte

Respondeu 28/09/2015 em 08:44
fonte usuário

votos
0

tags div são usados ​​para estilizar a página da Web para que ele olhar visualmente atraente para os usuários ou audiência do site. usando recipiente div em html vai tornar o site olhar mais profissional e atraente e, portanto, mais pessoas vão querer explorar sua página.

Respondeu 16/09/2015 em 21:35
fonte usuário

votos
-2

A maioria do navegador estão tomando tamanho da página web por padrão. Então, em algum momento página não será exibido mesmo no navegador diferente. Assim, usando o usuário pode mudar para o elemento HTML específico. Por exemplo, o utilizador pode adicionar margem, tamanho, largura, altura, etc. de tag de HTML específica.

Respondeu 04/02/2017 em 20:41
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more