Por padrão, autowidth é usado para elementos de bloco. Isso significa que o elemento será esticado horizontalmente exatamente na quantidade de espaço livre disponível. A altura padrão dos elementos do bloco é definida automaticamente, ou seja, o navegador estende a área de conteúdo verticalmente para exibir todo o conteúdo. Para definir dimensões personalizadas para a área de conteúdo de um elemento, você pode usar as propriedades de largura e altura.

A propriedade CSS width permite que você defina a largura da área de conteúdo do elemento, e a propriedade height a altura da área de conteúdo:

Observe que as propriedades de largura e altura determinam apenas o tamanho da área de conteúdo; para calcular a largura total de um elemento de bloco, você adiciona a largura da área de conteúdo, o preenchimento esquerdo e direito e a largura das bordas esquerda e direita. O mesmo vale para a altura total do elemento, apenas todos os valores são calculados verticalmente:

Para este parágrafo, definiremos apenas a largura e a altura.

Este parágrafo contém, além da largura e altura, preenchimento, borda e preenchimento.

Experimentar "

O exemplo mostra claramente que o segundo elemento ocupa mais espaço do que o primeiro. Se calcularmos de acordo com nossa fórmula, as dimensões do primeiro parágrafo são 150x100 pixels e as dimensões do segundo parágrafo são:

Altura Geral:	5px	+	10px	+	100px	+	10px	+	5px	\u003d 130px
	superior quadro, Armação		superior recuar		altura		mais baixo recuar		inferior quadro, Armação

ou seja, 180x130 pixels.

Transbordamento de elementos

Depois de definir a largura e a altura do elemento, vale a pena prestar atenção a um ponto importante - o conteúdo localizado dentro do elemento pode exceder o tamanho do bloco especificado. Nesse caso, parte do conteúdo irá além das bordas do elemento, para evitar esse momento desagradável, pode-se usar a propriedade overflow do CSS. A propriedade overflow informa ao navegador o que fazer se o conteúdo do bloco exceder seu tamanho. Essa propriedade pode assumir um de quatro valores:

• visível é o valor padrão usado pelo navegador. Definir esse valor terá o mesmo efeito que não definir a propriedade overflow.
• scroll - adiciona barras de rolagem verticais e horizontais ao elemento.
• auto - adiciona barras de rolagem conforme necessário.
• oculto - oculta parte do conteúdo que vai além dos limites do elemento de bloco.

Descrição

Define a altura do bloco ou dos elementos substituíveis (por exemplo, a tag ) A altura não inclui a espessura das bordas ao redor do elemento, preenchimento e margens.

Se o conteúdo do bloco exceder a altura especificada, a altura do elemento permanecerá inalterada e o conteúdo será exibido em cima dele. Esse recurso pode fazer com que o conteúdo dos elementos se sobreponha quando os elementos no código HTML são sequenciais. Para evitar que isso aconteça, adicione overflow: auto ao estilo do elemento.

Sintaxe

altura: valor | interesse | auto | herdar

Os valores

Quaisquer unidades de comprimento aceitas em CSS são aceitas como valores - por exemplo, pixels (px), polegadas (in), pontos (pt), etc. Ao usar a notação de porcentagem, a altura do elemento é calculada dependendo da altura do elemento pai. Se o pai não for especificado explicitamente, a janela do navegador será usada como pai. auto define a altura com base no conteúdo do elemento

HTML5 CSS2.1 IE Cr Op Sa Fx

O resultado deste exemplo é mostrado na Fig. 1

Figura: 1. Aplicando a propriedade de altura

Modelo de Objeto

document.getElementById ("elementID") .style.height

Navegadores

O Internet Explorer 6 não define corretamente a altura como altura mínima.

No modo peculiar, o Internet Explorer até e incluindo 8.0 calcula incorretamente a altura do elemento sem adicionar valores de preenchimento, margem e borda a ele.

O Internet Explorer 7.0 ou posterior não oferece suporte ao valor de herança.

Olá queridos leitores do blog. Hoje vamos falar sobre como você pode definir as dimensões para a área de conteúdo usando altura e largura e como ajustar a exibição deste conteúdo se for maior do que pode caber no espaço alocado para ele (regra de overflow css com valores ocultos, rolar, auto).

Texto do primeiro parágrafo

Texto do segundo

Porque largura e altura não são especificadas para esses parágrafos, então, por padrão, o navegador os calcula com base em seu próprio entendimento do valor Auto. Como resultado, os parágrafos ocupam todo o espaço disponível para eles em largura e correspondem em altura à altura do conteúdo entre eles.

Vamos agora fazer a primeira alteração e codificar a largura do primeiro parágrafo (largura: 50px):

O texto do primeiro

Texto do segundo

Em geral, o esperado aconteceu - o tamanho horizontal diminuiu para o valor especificado em largura: 50px, bem, e a altura do parágrafo ainda é formada graças a altura: auto (o valor padrão). Como resultado, passou a conter todo o texto.

Mas agora vamos limitar também a altura do contêiner com altura: 15px.

Como resultado, descobrimos que o texto não cabe mais em nosso contêiner de parágrafo pequeno e, portanto, ele ultrapassou com segurança a área de seu vizinho. É precisamente para controlar o comportamento do conteúdo em tais situações que ele serve regra de estouro.

Overflow significa estouro ou em outras palavras, estouro de conteúdo. Diz o que deve acontecer com o conteúdo se ele não couber na área (contêiner) que foi alocada a ele.

Overflow tem vários valores válidos, mas o padrão é visível (mostrar):

É por isso que, em nosso último exemplo, o texto do parágrafo superior ultrapassou o inferior (por padrão, overflow: visible foi usado - para mostrar o conteúdo que não cabia no contêiner). Poderíamos usar o outro extremo - overflow: hidden... Então, tudo que não couber dentro do contêiner não seria mostrado na página da web:

Os outros dois valores dessa propriedade CSS permitem a rolagem de conteúdo que não cabe no container (já vimos algo semelhante quando estudamos). Portanto, a rolagem exibirá barras de rolagem vertical e horizontalmente, mesmo se o conteúdo se encaixar bem no contêiner designado:

Mas seria muito mais lógico usar o valor Auto para Overflow se você precisar fazer barras de rolagem. Nesse caso, o próprio navegador calculará quando exibi-los e ao longo de quais eixos.

Por exemplo, no caso de usar overflow: auto, seremos capazes de rolar apenas ao longo do eixo onde o conteúdo não cabe dentro dos limites do contêiner:

O texto do primeiro

Texto do segundo

Resumindo, podemos dizer que o Overflow permite bastante configurar opções de forma flexível para exibir conteúdo no caso de ele sair de seu contêiner. Você será capaz de mostrar o conteúdo verificado (visível), não mostrar (cortar - oculto), ou fazer a rolagem obrigatória (rolagem) ou rolagem conforme necessário (automático).

Existem também opções para escrever esta regra relacionadas ao CSS3, mas que são suportadas por todos os navegadores, o que significa que podem ser usadas com segurança. Estou falando sobre as opções overflow-x e overflow-y, que permitem definir ou não a rolagem ao longo de eixos individuais (x - horizontal, y - vertical).

Se, por exemplo, você precisa se certificar de que a rolagem nunca aparece horizontalmente, mas só aparece verticalmente quando necessário (se o conteúdo não couber), então para o elemento Html você precisará escrever overflow-x: hidden e overflow-y: auto ... É isso, o problema estará resolvido, pois este truque com orelhas é suportado por todos os navegadores.

Altura e largura em porcentagens - por que você precisa de um doctype

Agora vamos falar sobre como a largura percentual é calculada. Lembre-se, no início do artigo, prometi chamar a atenção para isso. Bem, na verdade, a regra de largura CSS não é exceção aqui, e assim como o preenchimento e a margem, é calculada como uma porcentagem do tamanho horizontal do contêiner de conteúdo.

A situação é um pouco mais confusa com a altura percentual da área de conteúdo. Seria lógico supor que é o mesmo - da altura do contêiner. Mas aqui você e eu começamos a enfrentar o dualismo (dois modelos de comportamento) - como fizemos antes e como eles fazem agora de acordo com os padrões aceitos. A este respeito, devemos mais uma vez tocar no tópico dos modos de exibição e que discutimos anteriormente.

Historicamente, após a adoção dos padrões, ainda havia um grande número de documentos formados de acordo com as antigas regras da linguagem Html pura e algo tinha que ser feito com eles. Ao mesmo tempo, ele também se desenvolveu (a linguagem de marcação de estilo se destacou e algumas tags e atributos estavam desatualizados), então era necessário de alguma forma mostrar ao navegador exatamente quais padrões ele precisaria para analisar esse código.

Para separar os novos documentos (que levavam em conta todos os padrões emergentes) e os antigos (que muitas vezes não levam em conta nada além do Html puro), Melkosoft sugeriu usar um pequeno recurso da linguagem XML que acabava de aparecer. Este recurso era serviço e agora é chamado de declaração doctype.

Pode parecer diferente (leia mais sobre isso no artigo mencionado acima), mas esta opção sempre funcionará:

Assim, o navegador recebeu um marcador de quais padrões ele deve analisar o documento. Se o doctype estiver afixado, ele entrará no modo standarts. Se o navegador não o encontrar no código do documento em sua primeira linha doctype (ou se ele não for escrito corretamente, o que é idêntico à sua ausência), ele vai para o chamado modo de truque (modo peculiaridades).

Um documento que não possui um doctype aparecerá no navegador como se fosse muito antigo (antigo). Se você adicionar uma declaração ao mesmo documento, o navegador já terá perdido sua pátina de antiguidade e começará a trabalhar com o código do documento de acordo com todos os padrões aceitos atualmente.

Mas o conceito de antiguidade é muito diferente. O que, por exemplo, o popular navegador Google Chrome, que apareceu apenas em 2008, pode ter antiguidade? O IE, é claro, tem uma história rica. Portanto, todos os navegadores de qualquer versão exibirão o documento sem uma declaração (no modo quirks ou truques) da mesma forma que o antigo faria, porque esta versão é considerada básica.

Por que eu falei sobre os modos de exibição do navegador por tanto tempo? Mas porque para esses dois modos, definir a altura (altura) da área de conteúdo em porcentagem é muito diferente em relação ao cálculo dessa mesma altura.

Definir a altura (em porcentagem) da área de conteúdo no modo standarts (quando o doctype correto é escrito no início do documento) não será possível, a menos que a altura do contêiner que contém este conteúdo (especificado por você em porcentagem da altura será ignorada).

Se removermos a declaração doctype do código do documento, veremos a seguinte imagem:

Para o modo dos seguintes padrões (uma declaração é escrita no início do documento), você deve primeiro definir a altura do contêiner (no nosso caso, para o Div, a tag Body servirá como o contêiner), e só então o navegador trabalhará corretamente a altura: 100%:

Como resultado, temos duas abordagens completamente diferentes ao definir a altura da área de conteúdo como uma porcentagem, portanto, para evitar problemas, aconselho-o sem falta especificar doctype correto no início de todos os seus documentos (páginas da web). Há outro exemplo onde a diferença entre um regime de seguir padrões e um regime de truques será enorme.

Se você definir para qualquer elemento Html a altura e largura da área de conteúdo, e também especificar o preenchimento e a largura da borda para esta tag, então no modo quirks em navegadores diferentes isso é tudo pode ser interpretado de maneiras diferentes.

No navegador IE 5.5 antigo, o preenchimento e a largura da borda serão contados internamente a partir das dimensões especificadas por meio de altura e largura. Essa. o tamanho geral do elemento corresponderá ao que está especificado nessas propriedades CSS (este é um esquema obsoleto que não é usado atualmente).

Em outros navegadores modernos, o preenchimento e a largura da borda serão adicionados às dimensões especificadas na altura e na largura. Essa. neste caso (modo de truque sem doctype), as dimensões originalmente especificadas da área de conteúdo serão expandidas pela quantidade de preenchimento e borda.

Bem, se você escrever uma diretiva no documento, em todos os navegadores modernos e antigos esses problemas com a dualidade de abordagem já podem ser facilmente evitados. Nesse caso, e no IE 5.5, a quantidade de preenchimento e a largura da borda serão adicionadas ao tamanho da área de conteúdo, conforme exigido pelos padrões CSS modernos. Portanto, a fim de evitar sempre prescrever doctype.

Boa sorte para você! Te vejo em breve nas páginas do blog

Você pode estar interessado

Posição (absoluta, relativa e fixa) - formas de posicionar elementos Html em CSS (regras esquerda, direita, superior e inferior)
Flutuar e limpar em CSS - ferramentas de layout de bloco
Preenchimento, margem e borda - definimos margens internas e externas em CSS, bem como bordas para todos os lados (superior, inferior, esquerda, direita)
Posicionamento com índice Z e regra do cursor CSS para alterar o cursor do mouse
Para que serve CSS, como conectar folhas de estilo em cascata a um documento Html e os fundamentos da sintaxe desta linguagem
Seletores de tag, classe, ID e genéricos, bem como seletores de atributo em CSS moderno Estilo diferente para links internos e externos via CSS
Prioridades e reforço de CSS com importante, combinação e agrupamento de seletores, estilos personalizados e de autor
Exibir (bloco, nenhum, embutido) em CSS - defina o tipo de exibição de elementos Html na página da web
Unidades de dimensão (Pixels, Em e Ex) e herança de regras CSS

Este longo artigo tutorial enfocará tópicos importantes, cuja tarefa é organizar os métodos de trabalho com elementos de bloco, explicar ao leitor para que é usado alterar o modelo para calcular a largura e altura dos elementos, como gerenciar o estouro de elementos de bloco e como trabalhar com o mínimo e tamanhos máximos de elementos.

Ao explorar o modelo de caixa CSS, descobrimos que as propriedades de largura e altura definem a largura e altura da área interna de um elemento ( área de conteudo), que pode conter texto, imagens e outros elementos.

No modelo de caixa CSS, há uma diferença entre os valores de largura e altura que você especifica para um elemento e a quantidade de espaço que o navegador reserva para exibi-lo. A largura e altura totais dos elementos é a área da janela do navegador, que consiste na largura e altura do preenchimento, bordas e valores personalizados especificados para eles.

A largura total do elemento é calculada usando a fórmula:

div (largura: 150px; / * definir a largura do elemento * / altura: 150px; / * definir a altura do elemento * / preenchimento: 10px; / * definir o preenchimento do elemento * / borda: 5px; / * definir as bordas do elemento * / }

No nosso caso, isso salva a situação, e não temos que fazer nenhum cálculo, e no futuro eles têm medo de quaisquer alterações que possam ser necessárias para os nossos elementos. Vamos deixar esses cálculos desnecessários do lado do navegador e olhar o resultado do nosso exemplo:

Para uma compreensão final deste modelo para calcular a largura e altura dos elementos, iremos consolidar o conhecimento adquirido com o seguinte exemplo:

O valor da propriedade content-box é o padrão e calcula a largura e a altura totais do elemento de acordo com o esquema clássico. Por exemplo, largura:

150 pixels (largura personalizada) + 10 pixels (preenchimento esquerdo) + 10 pixels (preenchimento direito) + 10 pixels (borda esquerda) + 10 pixels (borda direita) \u003d 190 pixels.

Para o segundo elemento, ao qual aplicamos uma propriedade com um valor de caixa de borda, a largura e a altura personalizadas do elemento já incluem o conteúdo, a borda e o preenchimento do elemento. Na maioria dos casos, usar uma propriedade com um valor de caixa de borda é preferível nas páginas, pois torna as dimensões finais do elemento óbvias e evita algumas das situações inesperadas discutidas acima.

O resultado do nosso exemplo:

Controle de estouro de elementos de bloco

No processo de layout, você encontrará situações em que o conteúdo de um elemento será exibido fora das bordas do elemento. Por padrão, o navegador renderiza esse conteúdo (o elemento transborda), o que em alguns casos leva a erros visuais. A propriedade overflow CSS é responsável por este comportamento do navegador. Vamos considerar seus valores possíveis:

Vamos dar uma olhada no seguinte exemplo:

Neste exemplo, colocamos quatro blocos de largura e altura fixas, para os quais são especificados diferentes valores da propriedade CSS overflow:

• Primeiro bloco (valor visível) - o conteúdo está fora dos limites do elemento (valor padrão).
• Segundo bloco (valor oculto) - O conteúdo que ultrapassa o elemento é recortado.
• Terceiro bloco (valor de rolagem) - O estouro é cortado, mas a barra de rolagem é adicionada.
• Quarto bloco (valor automático) - como acontece com o valor de rolagem, apenas a barra de rolagem será adicionada automaticamente se um bloco estourar ao longo de um eixo específico ( x - horizontal, ou y - vertical), em vez de exibido permanentemente na página.

O resultado do nosso exemplo.

Descrição

Os atributos de altura e largura são fornecidos para redimensionar imagens usando HTML. Valores em pixels ou porcentagens são permitidos. Se uma porcentagem for definida, as dimensões da imagem são calculadas em relação ao elemento pai - o contêiner onde a tag está localizada ... Na ausência de um container pai, é a janela do navegador. Em outras palavras, largura \u003d "100%" significa que a imagem será esticada para a largura total da página da web. Adicionar apenas um atributo de largura ou altura preserva a proporção e proporção da imagem. O navegador então espera que a imagem seja totalmente carregada para determinar sua altura e largura iniciais.

Certifique-se de dimensionar todas as imagens na página da web. Isso torna o carregamento da página um pouco mais rápido, pois o navegador não precisa calcular o tamanho de cada imagem após recebê-la. Esta afirmação é especialmente importante para imagens colocadas dentro de uma mesa.

A largura e a altura da imagem podem ser alteradas para cima e para baixo. No entanto, isso não afeta a velocidade de carregamento da imagem, uma vez que o tamanho do arquivo permanece o mesmo. Portanto, tome cuidado ao reduzir a imagem, pois pode causar confusão entre os leitores porque um desenho tão pequeno demora tanto para carregar. Mas aumentar o tamanho leva ao efeito oposto - o tamanho da imagem é grande, mas o arquivo é carregado mais rápido em relação à imagem do mesmo tamanho. Mas a qualidade do desenho se deteriora.

Sintaxe

Html
XHTML

Os valores

Qualquer número inteiro positivo em pixels ou porcentagem.

Valor padrão

A largura original da imagem.

HTML5 IE Cr Op Sa Fx