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

Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS
Colori RGB ESADECIMALE HSL
Sfondi CSS
Colore di sfondo Immagine di sfondo Ripetizione dello sfondo Allegato di sfondo Stenografia di sfondo
Confini CSS
frontiere Larghezza del bordo Colore del bordo Lati di confine Stenografia di confine Bordi arrotondati
Margini CSS
margini Margin Collapse
Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Testo CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Font CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante
Float Clear Float Examples
CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS
Navbar Vertical Navbar Horizontal Navbar
Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS
Linear Gradients Radial Gradients Conic Gradients
Ombre CSS
Shadow Effects Box Shadow
Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Layout CSS - Overflow

❮ Precedente Prossimo ❯

La proprietà CSS overflowcontrolla cosa succede al contenuto troppo grande per essere inserito in un'area.

Questo testo è molto lungo e l'altezza del suo contenitore è di soli 100 pixel. Pertanto, viene aggiunta una barra di scorrimento per aiutare il lettore a scorrere il contenuto. Il dolore stesso è l'amore Ecco perché è il minimo a venire, che la nostra pratica normale sopporta per trarne vantaggio Il dolore dell'ufficio alle Olimpiadi, o il dolore dell'ufficio alle Olimpiadi, vuole essere un fastidio per le conseguenze, o soffre del dolore del sistema immunitario dell'UE in verità, l'eros e il consumatore, e l'odio regolare degli zzril. Per il tempo libero quando siamo liberati dai nostri adolescenti non c'è scelta I tipi non hanno chiarezza intrinseca

Overflow CSS

La overflowproprietà specifica se ritagliare il contenuto o aggiungere barre di scorrimento quando il contenuto di un elemento è troppo grande per rientrare nell'area specificata.

La overflowproprietà ha i seguenti valori:

  • visible- Predefinito. L'overflow non è tagliato. Il contenuto viene visualizzato al di fuori del riquadro dell'elemento
  • hidden - L'overflow viene ritagliato e il resto del contenuto sarà invisibile
  • scroll - L'overflow viene ritagliato e viene aggiunta una barra di scorrimento per visualizzare il resto del contenuto
  • auto- Simile a scroll, ma aggiunge barre di scorrimento solo quando necessario

Nota: la overflowproprietà funziona solo per elementi di blocco con un'altezza specificata.

Nota: in OS X Lion (su Mac), le barre di scorrimento sono nascoste per impostazione predefinita e visualizzate solo quando vengono utilizzate (anche se è impostato "overflow:scorrimento").

troppopieno: visibile

Per impostazione predefinita, l'overflow è visible, il che significa che non viene ritagliato e viene visualizzato al di fuori del riquadro dell'elemento:

È possibile utilizzare la proprietà di overflow quando si desidera avere un migliore controllo del layout. La proprietà overflow specifica cosa succede se il contenuto supera il box di un elemento.

Esempio

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

overflow: nascosto

Con il hiddenvalore, l'overflow viene ritagliato e il resto del contenuto viene nascosto:

Esempio

div {
  overflow: hidden;
}

overflow: scorrere

Impostando il valore su scroll, l'overflow viene ritagliato e viene aggiunta una barra di scorrimento per scorrere all'interno della casella. Nota che questo aggiungerà una barra di scorrimento sia orizzontalmente che verticalmente (anche se non ne hai bisogno):

È possibile utilizzare la proprietà di overflow quando si desidera avere un migliore controllo del layout. La proprietà overflow specifica cosa succede se il contenuto supera il box di un elemento.

Esempio

div {
  overflow: scroll;
}

overflow: automatico

Il autovalore è simile a scroll, ma aggiunge barre di scorrimento solo quando necessario:

È possibile utilizzare la proprietà di overflow quando si desidera avere un migliore controllo del layout. La proprietà overflow specifica cosa succede se il contenuto supera il box di un elemento.

Esempio

div {
  overflow: auto;
}

overflow-x e overflow-y

Le proprietà overflow-xe overflow-yspecificano se modificare l'overflow del contenuto solo orizzontalmente o verticalmente (o entrambi):

overflow-xspecifica cosa fare con i bordi sinistro/destro del contenuto.
overflow-yspecifica cosa fare con i bordi superiore/inferiore del contenuto.

È possibile utilizzare la proprietà di overflow quando si desidera avere un migliore controllo del layout. La proprietà overflow specifica cosa succede se il contenuto supera il box di un elemento.

Esempio

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

Mettiti alla prova con gli esercizi

Esercizio:

Forza una barra di scorrimento sull'elemento <div> con 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>

Tutte le proprietà di overflow 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


❮ Precedente Prossimo ❯