CSS Hoogte en Breedte
Die CSS heighten widtheienskappe word gebruik om die hoogte en breedte van 'n element te stel.
Die CSS max-width-eienskap word gebruik om die maksimum breedte van 'n element te stel.
CSS Stel hoogte en breedte in
Die heighten widtheienskappe word gebruik om die hoogte en breedte van 'n element te stel.
Die hoogte- en breedte-eienskappe sluit nie opvulling, grense of kantlyne in nie. Dit stel die hoogte/breedte van die area binne die vulling, grens en marge van die element.
CSS hoogte en breedte Waardes
Die heighten widtheiendomme kan die volgende waardes hê:
auto- Dit is verstek. Die blaaier bereken die hoogte en breedtelength- Definieer die hoogte/breedte in px, cm ens.%- Definieer die hoogte/breedte in persentasie van die inhoudblokinitial- Stel die hoogte/breedte na sy verstekwaardeinherit- Die hoogte/breedte sal van sy ouerwaarde geërf word
CSS hoogte en breedte Voorbeelde
Voorbeeld
Stel die hoogte en breedte van 'n <div>-element:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Voorbeeld
Stel die hoogte en breedte van 'n ander <div>-element:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Let wel: Onthou dat die heighten widtheienskappe nie opvulling, grense of kantlyne insluit nie! Hulle stel die hoogte/breedte van die area binne die vulling, grens en marge van die element in!
Stel maksimum breedte in
Die max-widtheienskap word gebruik om die maksimum breedte van 'n element te stel.
Die max-widthkan gespesifiseer word in lengtewaardes , soos px, cm, ens., of in persent (%) van die blok wat bevat, of op geen gestel word nie (dit is verstek. Beteken dat daar geen maksimum breedte is nie).
Die probleem met <div>bogenoemde kom voor wanneer die blaaiervenster kleiner is as die breedte van die element (500px). Die blaaier voeg dan 'n horisontale skuifbalk by die bladsy.
Deur max-widtheerder in hierdie situasie te gebruik, sal die blaaier se hantering van klein vensters verbeter.
Wenk: Sleep die blaaiervenster tot kleiner as 500px breed, om die verskil tussen die twee divs te sien!
Let wel: As jy om een of ander rede beide die
widtheiendom en die
max-widtheiendom op dieselfde element gebruik, en die waarde van die
widtheiendom is groter as die
max-widtheiendom; die
max-widtheiendom sal gebruik word (en die
widtheiendom sal geïgnoreer word).
Voorbeeld
Hierdie <div>-element het 'n hoogte van 100 pixels en 'n maksimum breedte van 500 pixels:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Probeer dit self - voorbeelde
Hierdie voorbeeld demonstreer hoe om die hoogte en breedte van verskillende elemente in te stel.
Hierdie voorbeeld demonstreer hoe om die hoogte en breedte van 'n prent te stel deur 'n persentasiewaarde te gebruik.
Hierdie voorbeeld demonstreer hoe om 'n minimum breedte en 'n maksimum breedte van 'n element te stel deur 'n pixelwaarde te gebruik.
Hierdie voorbeeld demonstreer hoe om 'n minimum hoogte en 'n maksimum hoogte van 'n element te stel deur 'n pixelwaarde te gebruik.
Alle CSS-dimensie-eienskappe
| 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 |