CSS breedte Eiendom
Voorbeeld
Stel die breedte van drie <div>-elemente:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die width
eienskap stel die breedte van 'n element.
Die breedte van 'n element sluit nie opvulling, grense of kantlyne in nie!
Let wel: Die min-breedte- en
maksimum-breedte- eienskappe oorheers die width
eiendom.
Standaard waarde: | outo |
---|---|
Geërf: | geen |
Animateerbaar: | ja. Lees oor animeerbaar |
Weergawe: | CSS1 |
JavaScript-sintaksis: | voorwerp .style.width="500px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS-sintaksis
width: auto|value|initial|inherit;
Eiendomswaardes
Value | Description | Play it |
---|---|---|
auto | Default value. The browser calculates the width | |
length | Defines the width in px, cm, etc. Read about length units | |
% | Defines the width in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelde
Voorbeeld
Stel die breedte van 'n <img>-element met 'n persentasiewaarde:
img {
width: 50%;
}
Voorbeeld
Stel die breedte van 'n <input type="text"> element op 100px. Wanneer dit egter fokus kry, maak dit 250px breed:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
Verwante bladsye
CSS-tutoriaal: CSS-hoogte en -breedte
CSS handleiding: CSS Box model
CSS verwysing: hoogte eiendom
HTML DOM verwysing: breedte eiendom