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

CSS -zelfstudie

CSS HOME CSS-introductie CSS-syntaxis CSS-kiezers CSS-handleiding CSS-opmerkingen CSS-kleuren
kleuren RGB HEX HSL
CSS-achtergronden
Achtergrond kleur Achtergrond afbeelding achtergrond herhaling Achtergrondbijlage Achtergrond steno
CSS-randen
grenzen Grensbreedte Rand kleur Rand Zijkanten Grens steno Afgeronde randen
CSS-marges
Marges Margin Collapse
CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-tekst
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-lettertypen
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-pictogrammen CSS-links CSS-lijsten CSS-tabellen
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS-weergave CSS Max-breedte CSS-positie CSS Z-index CSS-overloop CSS zweven
Float Clear Float Examples
CSS Inline-blok CSS uitlijnen CSS-combinaties CSS Pseudo-klasse CSS Pseudo-element CSS-dekking CSS-navigatiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-dropdownmenu's CSS-afbeeldingengalerij CSS-afbeeldingssprites CSS Attr-kiezers CSS-formulieren CSS-tellers CSS-websitelay-out CSS-eenheden CSS-specificiteit CSS !belangrijk CSS wiskundige functies

CSS Geavanceerd

CSS afgeronde hoeken CSS-randafbeeldingen CSS-achtergronden CSS-kleuren CSS-kleurzoekwoorden CSS-verlopen
Linear Gradients Radial Gradients Conic Gradients
CSS-schaduwen
Shadow Effects Box Shadow
CSS-teksteffecten CSS-weblettertypen CSS 2D-transformaties CSS 3D-transformaties CSS-overgangen CSS-animaties CSS-tooltips Afbeeldingen in CSS-stijl CSS-beeldreflectie CSS-object-fit CSS-objectpositie CSS-maskering CSS-knoppen CSS-Paginering CSS Meerdere kolommen CSS-gebruikersinterface CSS-variabelen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Grootte van CSS-box CSS-mediaquery's CSS MQ-voorbeelden CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsief

RWD Intro RWD-kijkpoort RWD-rasterweergave RWD-mediaquery's RWD-afbeeldingen RWD-video's RWD-frameworks RWD-sjablonen

CSS- raster

Rasterintro Rastercontainer Rasteritem

CSS SASS

SASS-zelfstudie

CSS- voorbeelden

CSS-sjablonen CSS-voorbeelden css-quiz CSS-oefeningen CSS-certificaat

CSS- referenties

CSS-referentie CSS-kiezers CSS-functies CSS Referentie Auditief CSS webveilige lettertypen CSS animeerbaar CSS-eenheden CSS PX-EM-converter CSS-kleuren CSS-kleurwaarden CSS-standaardwaarden Ondersteuning voor CSS-browser

CSS -lay-out - Overloop

❮ Vorig Volgende ❯

De CSS overflow-eigenschap bepaalt wat er gebeurt met inhoud die te groot is om in een gebied te passen.

Deze tekst is erg lang en de hoogte van de container is slechts 100 pixels. Daarom is er een schuifbalk toegevoegd om de lezer te helpen bij het scrollen door de inhoud. De pijn zelf is de liefde Daarom is het voor de minste die komt, wie onze normale praktijk verdraagt ​​om te profiteren van de gevolgen De pijn van de pijn in het bureau op de Olympische Spelen, of de pijn in het bureau op de Olympische Spelen, hij wil een ergernis zijn voor de gevolgen, of hij lijdt onder de pijn van het eu-immuunsysteem bij de waarheid, de eros en de consument, en de reguliere haat tegen de zzril. Voor een vrije tijd waarin we verlost zijn van onze tieners is geen keuze Typen hebben geen inherente duidelijkheidHet is het gebruik van de lezer in degenen die hun duidelijkheid scheppen.

CSS-overloop

De overfloweigenschap geeft aan of de inhoud moet worden geknipt of dat er schuifbalken moeten worden toegevoegd wanneer de inhoud van een element te groot is om in het opgegeven gebied te passen.

De overfloweigenschap heeft de volgende waarden:

  • visible- Standaard. De overloop is niet afgekapt. De inhoud wordt buiten het vak van het element weergegeven
  • hidden - De overloop wordt afgekapt en de rest van de inhoud is onzichtbaar
  • scroll - De overloop is afgekapt en er is een schuifbalk toegevoegd om de rest van de inhoud te zien
  • auto- Gelijk aan scroll, maar het voegt alleen schuifbalken toe als dat nodig is

Opmerking: de overfloweigenschap werkt alleen voor blokelementen met een opgegeven hoogte.

Opmerking: in OS X Lion (op Mac) zijn schuifbalken standaard verborgen en worden ze alleen weergegeven wanneer ze worden gebruikt (zelfs als "overflow:scroll" is ingesteld).

overloop: zichtbaar

Standaard is de overloop visible, wat betekent dat deze niet wordt afgekapt en buiten het vak van het element wordt weergegeven:

U kunt de overloopeigenschap gebruiken als u meer controle over de lay-out wilt hebben. De overloopeigenschap specificeert wat er gebeurt als inhoud het vak van een element overloopt.

Voorbeeld

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

overloop verborgen

Met de hiddenwaarde wordt de overloop afgekapt en wordt de rest van de inhoud verborgen:

Voorbeeld

div {
  overflow: hidden;
}

overloop: scrollen

Als u de waarde instelt op scroll, wordt de overloop afgekapt en wordt er een schuifbalk toegevoegd om in het vak te scrollen. Merk op dat dit zowel horizontaal als verticaal een schuifbalk zal toevoegen (zelfs als je het niet nodig hebt):

U kunt de overloopeigenschap gebruiken als u meer controle over de lay-out wilt hebben. De overloopeigenschap specificeert wat er gebeurt als inhoud het vak van een element overloopt.

Voorbeeld

div {
  overflow: scroll;
}

overloop: automatisch

De autowaarde is vergelijkbaar met scroll, maar er worden alleen schuifbalken toegevoegd als dat nodig is:

U kunt de overloopeigenschap gebruiken als u meer controle over de lay-out wilt hebben. De overloopeigenschap specificeert wat er gebeurt als inhoud het vak van een element overloopt.

Voorbeeld

div {
  overflow: auto;
}

overloop-x en overloop-y

De eigenschappen overflow-xen overflow-yspecificeren of de overloop van inhoud alleen horizontaal of verticaal (of beide) moet worden gewijzigd:

overflow-xspecificeert wat te doen met de linker-/rechterranden van de inhoud.
overflow-yspecificeert wat te doen met de boven-/onderranden van de inhoud.

U kunt de overloopeigenschap gebruiken als u meer controle over de lay-out wilt hebben. De overloopeigenschap specificeert wat er gebeurt als inhoud het vak van een element overloopt.

Voorbeeld

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

Test jezelf met oefeningen

Oefening:

Forceer een schuifbalk naar het <div>-element met 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>

Alle CSS-overloopeigenschappen

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


❮ Vorig Volgende ❯