CSS: n käyttö HTML-elementtien sijoittamiseen

• Huhtikuu 28, 2024

CSS-säännöt antavat sinulle mahdollisuuden sijoittaa HTML-elementtejä tarkalleen mihin haluat. Voit säätää, kuinka ne reagoivat muihin ympärillä oleviin elementteihin, tai jopa piilottaa ne kokonaan. Tässä on erittely CSS-sijoitteluominaisuuksista.

Näyttö: Tämä ominaisuus määrittelee elementin näyttötavan. Näytön asettaminen "ei mitään" piilottaa elementin kokonaan, kun taas muut arvot voivat muuttaa sitä, kuinka elementti reagoi muihin ominaisuuksiin ja elementteihin. Esimerkiksi div-yksiköt on asetettu näyttämään oletusarvoisesti "lohkona", tarkoittaen, että se toimii suorakaiteen muotoisena objektina, mutta voit käyttää "näyttö: inline" -painiketta pakottamaan div: n toimimaan kappaleena sen sijaan. Tai voit tehdä päinvastaisen ja käyttää "display: block" -painiketta pakottamaan kappaleen toimimaan kuten div.

Paikka: Määrittää, kuinka elementti reagoi sen ympärillä oleviin elementteihin. Elementit käyttävät oletusarvoisesti "sijainti: staattinen", eli ne näkyvät HTML-koodissa näkyvässä järjestyksessä. "Sijainti: suhteellinen" tarkoittaa, että elementin staattinen sijainti lasketaan ja korvataan sitten sillä, mitä ilmoitat "ylä" ja "vasen" ominaisuuksissa. Muut sivuelementit toimivat ikään kuin suhteellinen elementti olisi edelleen staattisessa paikassa. "Asento: absoluuttiset" elementit jättävät huomioimatta niiden staattisen sijainnin ja perustavat sijaintinsa yksinomaan ylemmän, vasemman, oikean ja alhaisen ominaisuuden arvoihin. Lisäksi muut elementit jättävät kyseisen elementin huomiotta (joten jos et ole varovainen, voit päätyä sotkuisiin päällekkäisyyksiin). "Sijainti: kiinteä" on samanlainen kuin "sijainti: ehdoton" paitsi, että elementti pitää paikkansa, vaikka vierailija vierittää sivua.

Näkyvyys: Päättää näkyykö elementti sivulla vai ei. Ero "näyttö: ei mitään" ja "näkyvyys: piilotettu" välillä on se, että ensimmäisessä tapauksessa muut sivuelementit käyttäytyvät ikään kuin näkymätöntä objektia ei ole; jälkimmäisessä, muut elementit pitävät paikan piilotetulle elementille. Oletusasetus on selvästi "näkyvä".

Kellua: Määrittää, kaskooidaanko elementti vasemmalle tai oikealle muille elementeille (vai eiko kaskadia ollenkaan, mikä on oletus). Tämä ominaisuus on erittäin hyödyllinen suhteellisten elementtien sijoittamisessa oikein. Jokaiselle kelluvalle elementille on asetettava leveys, muuten se ei näy oikein. Lisäksi, jos käytät kelluvuutta yhdelle elementille, haluat todennäköisesti asettaa ominaisuuden myös kaikille sitä ympäröiville elementeille.

Kirkas: Tämä ominaisuus toimii yhdessä kelluvan ominaisuuden kanssa. Se päättää, kuinka elementti antaa muiden elementtien kellua sen ympärillä - "tyhjennä: vasen" tarkoittaa, että mikään muu elementti ei voi kellua sen vasemmalle puolelle; "tyhjä: oikea" estää oikealta ja "tyhjennä: molemmat" tarkoittaa, että mikään elementti ei voi kellua kummallekin puolelle. Oletusasetus on "tyhjä: ei mitään" (tarkoittaa, että muut elementit voivat kellua molemmille puolille).

Video-Ohjeita: Top 5 CSS Best Practises (Huhtikuu 2024).