HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial de CSS

CSS INÍCIO Introdução CSS Sintaxe CSS Seletores CSS CSS Como fazer Comentários CSS Cores CSS
Cores RGB HEX HSL
Planos de fundo CSS
Cor de fundo Imagem de fundo fundo de repetição Anexo de fundo Abreviação de fundo
Bordas CSS
Fronteiras Largura da borda Cor da borda Lados da borda Abreviação de borda Bordas arredondadas
Margens CSS
Margens Margin Collapse
Preenchimento CSS CSS Altura/Largura Modelo de caixa CSS Esboço CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fontes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ícones CSS Links CSS Listas CSS Tabelas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Exibição CSS Largura máxima do CSS Posição CSS Índice Z CSS Estouro de CSS CSS flutuante
Float Clear Float Examples
Bloco CSS Inline Alinhamento CSS Combinadores CSS Pseudoclasse CSS Pseudoelemento CSS Opacidade CSS Barra de navegação CSS
Navbar Vertical Navbar Horizontal Navbar
Listas suspensas de CSS Galeria de imagens CSS Sprites de imagem CSS Seletores de atributos CSS Formulários CSS Contadores CSS Layout do site CSS Unidades CSS Especificidade CSS CSS !importante Funções matemáticas CSS

CSS Avançado

Cantos arredondados CSS Imagens de borda CSS Planos de fundo CSS Cores CSS Palavras-chave de cores CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efeitos de texto CSS Fontes da Web CSS Transformações CSS 2D Transformações CSS 3D Transições CSS Animações CSS Dicas de CSS Imagens de estilo CSS Reflexão de imagem CSS Ajuste de objeto CSS posição do objeto CSS Mascaramento CSS Botões CSS Paginação CSS CSS Múltiplas Colunas Interface de usuário CSS Variáveis ​​CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionamento da caixa CSS Consultas de mídia CSS Exemplos de CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo a CSS

Introdução ao RWD Janela de visualização RWD Visualização de Grade RWD Consultas de mídia RWD Imagens RWD Vídeos RWD Estruturas RWD Modelos RWD

Grade CSS

Introdução à grade Contêiner de Grade Item de grade

CSS SASS

Tutorial SASS

Exemplos de CSS

Modelos CSS Exemplos de CSS teste css Exercícios de CSS Certificado CSS

Referências CSS

Referência CSS Seletores CSS Funções CSS Aural de referência CSS Fontes CSS seguras para a Web CSS Animatable Unidades CSS CSS PX-EM Converter Cores CSS Valores de cores CSS Valores padrão de CSS Suporte ao navegador CSS

Layout CSS - Estouro

❮ Anterior Próximo ❯

A propriedade CSS overflowcontrola o que acontece com o conteúdo grande demais para caber em uma área.

Este texto é muito longo e a altura de seu contêiner é de apenas 100 pixels. Portanto, uma barra de rolagem é adicionada para ajudar o leitor a rolar o conteúdo. A dor em si é o amor É por isso que é para o mínimo que vem, quem nossa prática normal suporta para tirar proveito das consequências A dor da dor no Bureau nas Olimpíadas, ou a dor no Bureau nas Olimpíadas, ele quer ser um aborrecimento para as consequências, ou ele está sofrendo com a dor do sistema imunológico da UE com a verdade, o eros e o consumidor, e o ódio regular ao zzril. Para um tempo livre quando estamos livres de nossos adolescentes não há escolha Os tipos não têm clareza inerenteÉ o uso do leitor naqueles que criam sua clareza.

Estouro de CSS

A overflowpropriedade especifica se o conteúdo deve ser recortado ou adicionado barras de rolagem quando o conteúdo de um elemento for muito grande para caber na área especificada.

A overflowpropriedade tem os seguintes valores:

  • visible- Padrão. O estouro não é cortado. O conteúdo é renderizado fora da caixa do elemento
  • hidden - O estouro é cortado e o restante do conteúdo ficará invisível
  • scroll - O estouro é cortado e uma barra de rolagem é adicionada para ver o restante do conteúdo
  • auto- Semelhante a scroll, mas adiciona barras de rolagem apenas quando necessário

Nota: A overflowpropriedade só funciona para elementos de bloco com uma altura especificada.

Nota: No OS X Lion (no Mac), as barras de rolagem ficam ocultas por padrão e são exibidas apenas quando usadas (mesmo que "overflow:scroll" esteja definido).

estouro: visível

Por padrão, o estouro é visible, o que significa que não é recortado e renderizado fora da caixa do elemento:

Você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. A propriedade overflow especifica o que acontece se o conteúdo transbordar da caixa de um elemento.

Exemplo

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

estouro: oculto

Com o hiddenvalor, o estouro é cortado e o restante do conteúdo fica oculto:

Exemplo

div {
  overflow: hidden;
}

estouro: rolar

Definindo o valor como scroll, o estouro é cortado e uma barra de rolagem é adicionada para rolar dentro da caixa. Observe que isso adicionará uma barra de rolagem horizontal e verticalmente (mesmo que você não precise):

Você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. A propriedade overflow especifica o que acontece se o conteúdo transbordar da caixa de um elemento.

Exemplo

div {
  overflow: scroll;
}

estouro: automático

O autovalor é semelhante a scroll, mas adiciona barras de rolagem apenas quando necessário:

Você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. A propriedade overflow especifica o que acontece se o conteúdo transbordar da caixa de um elemento.

Exemplo

div {
  overflow: auto;
}

estouro-x e estouro-y

As propriedades overflow-xand overflow-yespecificam se o estouro do conteúdo deve ser alterado apenas horizontalmente ou verticalmente (ou ambos):

overflow-xespecifica o que fazer com as bordas esquerda/direita do conteúdo.
overflow-yespecifica o que fazer com as bordas superior/inferior do conteúdo.

Você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. A propriedade overflow especifica o que acontece se o conteúdo transbordar da caixa de um elemento.

Exemplo

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Teste-se com exercícios

Exercício:

Force uma barra de rolagem para o elemento <div> com class="intro".

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

Todas as propriedades de estouro de CSS

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


❮ Anterior Próximo ❯