CSS bottom ominaisuus
- Edellinen sivu border-width
- Seuraava sivu box-decoration-break
Määrittely ja käyttö
bottom-ominaisuus määrittelee elementin alareunan reunan. Tämä ominaisuus määrittää sijoiteltavan elementin alareunan ulkoreunan ja sisältöalueen alareunan välinen etäisyys.
Huomautus:Jos "position"-ominaisuuden arvo on "static", "bottom"-ominaisuuden asettaminen ei aiheuta minkäänlaista vaikutusta.
Kuvaus
Static-elementeille auto; pituusarvoille vastaava absoluuttinen pituus; prosenttiarvoille määritetty arvo; muuten auto.
Suhteellisesti määritellyille elementeille, jos sekä bottom että top ovat auto, niiden laskettu arvo on 0; jos yksi niistä on auto, otetaan toisen arvon vastakohta; jos molemmat eivät ole auto, bottom ottaa top-arvon vastakohtana.
Lisäksi:
CSS-opetusohjelma:CSS-sijoittelu
HTML DOM -viittausoppikirja:bottom-ominaisuus
Esimerkki
Aseta kuvan alareuna 5 pikselin korkeuteen sisältävässä elementissä:
img { position:absolute; bottom:5px; }
CSS-kieli
bottom: auto|length|initial|inherit;
Ominaisuuden arvo
Arvo | Kuvaus |
---|---|
auto | Oletusarvo. Selain laskee alareunan sijainnin. |
% | Aseta elementin alareunan sijainti elementin sisällön prosenttiosuuden avulla. Voit käyttää negatiivisia arvoja. |
length | Aseta elementin alareunan sijainti pituusyksiköillä, kuten px, cm jne. Voit käyttää negatiivisia arvoja. |
inherit | Määritellään, että elementin bottom-ominaisuuden arvo tulisi perittää vanhemmalta elementiltä. |
Tekninen yksityiskohta
Oletusarvo: | auto |
---|---|
Perinnäisyys: | ei |
Versio: | CSS2 |
JavaScript-kieli: | object.style.bottom="50px" |
Lisää esimerkkejä
- Aseta kuvan alareuna pikseleiden avulla
- Tämä esimerkki näyttää, miten kuvan alareuna voidaan asettaa pikseleiden avulla.
- Aseta kuvan alareuna prosenttiosuuden avulla
- Tämä esimerkki näyttää, miten kuvan alareuna voidaan asettaa prosenttiosuuden avulla.
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka täysin tukee tätä ominaisuutta.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- Edellinen sivu border-width
- Seuraava sivu box-decoration-break