CSS Hoogte en Breedte
De CSS heighten widtheigenschappen worden gebruikt om de hoogte en breedte van een element in te stellen.
De CSS- max-widtheigenschap wordt gebruikt om de maximale breedte van een element in te stellen.
CSS Hoogte en breedte instellen
De heighten widtheigenschappen worden gebruikt om de hoogte en breedte van een element in te stellen.
De eigenschappen height en width bevatten geen opvulling, randen of marges. Het bepaalt de hoogte/breedte van het gebied binnen de opvulling, rand en marge van het element.
CSS hoogte en breedte Waarden
De heighten widtheigenschappen kunnen de volgende waarden hebben:
auto- Dit is standaard. De browser berekent de hoogte en breedtelength- Definieert de hoogte/breedte in px, cm etc.%- Definieert de hoogte/breedte in procenten van het bevattende blokinitial- Stelt de hoogte/breedte in op de standaardwaardeinherit- De hoogte/breedte wordt overgenomen van de bovenliggende waarde
CSS hoogte en breedte Voorbeelden
Voorbeeld
Stel de hoogte en breedte van een <div> element in:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Voorbeeld
Stel de hoogte en breedte van een ander <div>-element in:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Opmerking: onthoud dat de eigenschappen heighten widthgeen opvulling, randen of marges bevatten! Ze bepalen de hoogte/breedte van het gebied binnen de opvulling, rand en marge van het element!
Max-breedte instellen
De max-widtheigenschap wordt gebruikt om de maximale breedte van een element in te stellen.
Het max-widthkan worden opgegeven in lengtewaarden , zoals px, cm, enz., of in procent (%) van het bevattende blok, of ingesteld op geen (dit is standaard. Dit betekent dat er geen maximale breedte is).
Het probleem met het <div>bovenstaande doet zich voor wanneer het browservenster kleiner is dan de breedte van het element (500px). De browser voegt vervolgens een horizontale schuifbalk toe aan de pagina.
In plaats daarvan zal het gebruik max-widthvan kleine vensters door de browser in deze situatie verbeteren.
Tip: Sleep het browservenster naar een breedte van minder dan 500px om het verschil tussen de twee divs te zien!
Opmerking: als u om de een of andere reden zowel de
widtheigenschap als de
max-widtheigenschap op hetzelfde element gebruikt en de waarde van de
widtheigenschap groter is dan de
max-widtheigenschap; de
max-widtheigenschap zal worden gebruikt (en de
widtheigenschap zal worden genegeerd).
Voorbeeld
Dit <div>-element heeft een hoogte van 100 pixels en een maximale breedte van 500 pixels:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Probeer het zelf - Voorbeelden
instellen Dit voorbeeld laat zien hoe u de hoogte en breedte van verschillende elementen instelt.
Dit voorbeeld laat zien hoe u de hoogte en breedte van een afbeelding instelt met een procentwaarde.
instellen Dit voorbeeld laat zien hoe u een minimale breedte en een maximale breedte van een element instelt met behulp van een pixelwaarde.
instellen Dit voorbeeld laat zien hoe u een minimale hoogte en een maximale hoogte van een element instelt met behulp van een pixelwaarde.
Alle CSS-dimensie-eigenschappen
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |