kelluvat rajat. Float ja clear ovat CSS-ominaisuuksia kelluville elementeille lohkoasettelussa. Kuinka Flexbox toimii

Jokaisella attribuutilla, loogisia arvoja lukuun ottamatta, on arvo, joka on jokin seuraavista tyypeistä: avainsana, merkkijono, osoite, numero, prosenttiosuus, kielikoodi. Nämä eivät ole kaikkia tyyppejä, mutta yleisimpiä.

avainsana

Joillakin määritteillä on varattuja arvoja, joita kutsutaan "avainsanoiksi". Esimerkiksi elementin tyyppi-attribuutin arvo määrittää lomakeelementin tyypin. Kohteen alla luo painikkeen.

Avainsanat ovat määrittelyn alaisia, niiden arvoluettelo on rajoitettu eikä sitä voi muuttaa mielivaltaisesti.

Linja

Merkkijono on tekstiä, joka on suljettu lainausmerkkeihin tai yksittäisiin lainausmerkkeihin.

Lainausmerkki määrittää merkkijonon alun ja lopun, joten samoja lainausmerkkejä ei voida lisätä merkkijonon sisään. Esimerkiksi seuraava rivi käyttää väärää lainausmerkkiyhdistelmää.

Sisäisillä lainausmerkeillä varustetun merkkijonon kirjoittamiseksi oikein on useita vaihtoehtoja.

1. Sisemmän lainausmerkin poistaminen näin - \". Tässä tapauksessa selain ei enää näe sitä lainausmerkkinä, vaan sitä pidetään merkinä.

2. Käytä yhden ja kaksoislainausmerkkien yhdistelmää.

Tässä otsikkomääritteen merkkijono on suljettu lainausmerkkeihin, joten voimme turvallisesti kirjoittaa kaksoislainausmerkkien sisään.

Kaikki tämä toimii samalla tavalla yksittäisillä lainausmerkeillä.

Osoite

Osoite on polku asiakirjaan, kuten grafiikkatiedostoon. Osoitetta tarvitaan silloin, kun linkki tehdään sivustolle, toiselle verkkosivulle tai ladataan tietty tiedosto. Esimerkiksi elementissä osoitetta käytetään src-attribuutin arvona, se määrittää polun kuvatiedostoon.

Erota absoluuttiset ja suhteelliset osoitteet.

Absoluuttiset osoitteet

Tällaiset osoitteet toimivat kaikkialla ja kaikkialla riippumatta sen sivuston tai verkkosivun nimestä, jolla osoite on annettu, ja alkavat aina tiedonsiirtoprotokollalla. Web-sivuilla tämä on yleensä HTTP (HyperText Transfer Protocol), joten absoluuttiset osoitteet alkavat http://-avainsanalla. Esimerkki 1 näyttää linkin, joka käyttää absoluuttista osoitetta.

Esimerkki 1: Absoluuttisen osoitteen käyttäminen linkissä

Linkki

Google

HTTP-protokollan lisäksi käytössä on myös suojattu HTTPS-protokolla. Aina ei ole selvää, mitä protokollaa sivustolla käytetään, joten se voidaan jättää linkin osoitteesta kokonaan pois. Tässä tapauksessa osoite kirjoitetaan seuraavasti:

Google

Absoluuttisia osoitteita käytetään ensisijaisesti osoittamaan toiseen verkkoresurssiin, ja niitä käytetään harvoin sisäisiin linkkeihin.

Suhteelliset osoitteet

Suhteelliset osoitteet määritetään sivuston tai nykyisen asiakirjan juuresta. Esimerkiksi koodi tarkoittaa pic.png-nimisen grafiikkatiedoston lataamista, joka sijaitsee samassa kansiossa kuin itse web-sivu. Katsotaanpa joitain esimerkkejä tällaisista osoitteista.

/
Osoite osoittaa yleensä index.html-tiedostoon, joka sijaitsee sivuston juuressa. Jos index.html-tiedostoa ei ole, selain näyttää yleensä luettelon kyseisen hakemiston tiedostoista. Tiedoston nimen ei tarvitse olla index.html, tämä parametri muutetaan verkkopalvelimen asetuksista - tämä on ohjelman nimi, joka analysoi selaimesta tulevat pyynnöt ja lähettää sille näytettävät asiakirjat käyttäjälle.

/images/pic.png
Osoitteen edessä oleva viiva (/) osoittaa, että osoitus alkaa sivuston juuresta. Linkki johtaa pic.png-tiedostoon, joka sijaitsee kuvakansiossa. Ja se puolestaan sijaitsee sivuston juuressa.

../help/me.html
Nimen edessä olevat kaksi pistettä käskevät selaimen siirtymään yhden tason ylöspäin sivustokansioiden luettelossa ja sieltä "haku" ohjekansiosta tiedostoa nimeltä me.html.

manual/info.html
Jos kansion nimen edessä ei ole muita merkkejä, kuten pisteitä tai viivoja, kansio sijaitsee nykyisen kansion sisällä ja info.html-tiedosto on jo siinä.

Sivuston juureen liittyvät URL-osoitteet, kuten /demo/, toimivat vain verkkopalvelimen hallinnassa, eivätkä ne sovellu paikalliseen tietokoneeseen.

Linkit

Katso valokuvaani!

Kuinka ottaa sama kuva?

Joskus voit löytää osoitteita muodossa ./file/doc.html. Piste edessä tarkoittaa, että lähtölaskenta on nykyisestä kansiosta. Tällainen merkintä on tarpeeton ja voidaan lyhentää muotoon file/doc.html.

Numerot

Numerot koostuvat numeroista 0-9; Negatiivisten lukujen eteen laitetaan tarvittaessa miinusmerkki (-45). Esimerkki 3 näyttää numeroiden käytön attribuuttiarvoina.

Esimerkki 3: Numeroiden käyttö

Numerot

Veden lämpötila

Matala Normaali kuuma Kiehuvaa vettä

Kokonaislukujen lisäksi on sallittua käyttää desimaalilukuja, kun taas kokonaisluku ja murto-osa erotetaan toisistaan pisteellä - 36,6, kuten esimerkissä 4 näkyy.

Esimerkki 4. Murtoluvut

input, max attribuutti

Kiinnostuksen kohde

Prosenttimerkinnän avulla voit sitoutua pääelementin kokoon ja asettaa koon suhteessa siihen. Oletetaan, että meillä on seuraava koodi:

Elementti sijaitsee sisällä

Siksi elementti

tulee olemaan vanhempi . Päinvastoin on myös totta - elementti on lapsi

Vastaavasti tässä tapauksessa kuvan leveys prosentteina lasketaan pääkappaleesta, joka oletusarvoisesti vie ikkunan koko vapaan tilan leveydeltä.

Selain ymmärtää, että puhumme prosenteista, jos %-symboli lisätään numeron perään, esimerkiksi: width="40%" .

Esimerkki 5 näyttää verkkosivun koodin, jossa kuvan leveys ilmoitetaan prosentteina.

Esimerkki 5. Kuvan mitat prosentteina

Kuva

Tämän esimerkin tulos on esitetty kuvassa. 1. Kuvan leveydeksi on asetettu 100 %, joten se vie selainikkunan koko leveyden. Korkeutta ei ole määritetty, ja selain laskee sen automaattisesti.

Riisi. 1. Kuvan koko prosentteina

Prosenttimerkinnän etuna on, että kuvan koko muuttuu selainikkunan leveyden mukaan, eikä pysy staattisena. Haittoja ovat kuvanlaadun heikkeneminen, kun sitä venytetään voimakkaasti.

Kielikoodi

Elämme globalisaation aikakautta, jolloin verkkosivut sisältävät tekstiä eri kielillä. Näyttää hakukoneet, millä kielellä teksti on kirjoitettu ja määritä asetukset eri kieliä(esimerkiksi lainaustyypit) ja tekstin kieli ilmoitetaan koodina. Attribuuttia lang käytetään kielen asettamiseen (esimerkki 6).

Esimerkki 6: lang-attribuutin käyttö

Kieli

Sana ranskaksi

Je n "ai pas mange depuis kuusi päivää

Tässä esimerkissä koko sivu on venäjäksi ja lang-attribuutti on ru . Sen osoittamiseksi, että kieli koskee koko sivua, elementtiin lisätään attribuutti . Ranskankielisessä tekstissä elementtiin lisätään lang-attribuutti, jonka arvo on fr

lang-attribuutin kelvolliset arvot löytyvät tältä sivulta.

Kuvaus

Määrittää, kummalle puolelle elementti kohdistuu, kun muut elementit kiertyvät sen ympärille toisilla puolilla. Kun float-ominaisuuden arvo on none , elementti hahmonnetaan sivulla normaalisti, samalla kun yksi rivitystekstirivi voi olla samalla rivillä itse elementin kanssa.

Syntaksi

kellua: vasen | oikea | ei yhtään | periä

Arvot

vasen Tasaa elementin vasemmalle ja kaikki muut elementit, kuten teksti, kiertää sen ympäri oikealle. oikea Tasaa elementin oikealle ja kaikki muut elementit kiertävät sen ympäri vasemmalle. none Elementin rivitystä ei ole asetettu. inherit Perii vanhemman arvon.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

kellua

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum falisi nulla zzril delenit doloare te gue feuga.

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Kelluvan ominaisuuden käyttäminen

Objekti malli

document.getElementById("elementID").style.styleFloat

document.getElementById("elementID ").style.cssFloat

Selaimet

Internet Explorer 6:ssa on virhe, joka kaksinkertaistaa pääelementtien sisällä sisäkkäisten kelluvien elementtien vasemman tai oikean täyttöarvon. Vanhemman sivun vieressä oleva pehmuste on kaksinkertainen. Ongelma ratkaistaan yleensä lisäämällä näyttö: inline kelluvaan elementtiin. Tämä selain lisää myös 3px-täytön (ns. "kolmen pikselin virhe") float-arvon määräämään suuntaan.

Internet Explorer 7.0 asti ei tue periytymisarvoa.

Pitkä saaga artikkelin kirjoittamisesta "float"-ominaisuudesta on ohi. Vaikka se vei paljon aikaa, uskon onnistuneeni yhdistämään mahdollisimman selkeästi tämän voimakkaan ja hieman oudon ominaisuuden kaikki erilaiset käyttäytymismuodot yhdeksi yhteiseksi järjestelmäksi.

Lisäksi tämä artikkeli sisältää ennätysmäärän kuvituksia koko "Oppikirjan" joukossa :-)

CSS:n "float"-ominaisuuden kohtalo on hieman samanlainen kuin HTML:n "table"-tunnisteen kohtalo: kumpaakaan ei ollut tarkoitettu lainkaan sarakkeiden luomiseen ja elementtien yleiseen asettamiseen. Kuitenkin tiettyjen asemointimekanismin epätäydellisyyksien vuoksi kellukkeita käytetään laajalti tähän tarkoitukseen. Ja se, että se on keksitty toista varten, ilmenee usein erilaisina ei-ilmeisinä vaikutuksina. Ennen kuin näytän niitä, kerron kuitenkin sinulle, kuinka float on Voi hakea layoutia.

Heti alussa - pieni huomautus ehdoista. Tälle instrumentille ei ole tunnettua termiä venäjäksi (ainakaan vielä). Siksi kirjoitan sen mieluummin alkuperäisellä kirjoitusasullaan - "kelluke". Se lukee jotain "float" (sinun ei tarvitse rikkoa poskipäätäsi ääntämällä "float"). Samalla pyydän sinua välittömästi antamaan minulle anteeksi sellaiset vapaudet kuin "kelluta" sitä, "kelluta" poikasta jne. :-)

Toimintaperiaate

Kuten paikannusta, kelluketta käytetään laatikoiden siirtämiseen. Mutta toisin kuin sijoittelu, joka voi siirtää laatikoita lähes mielivaltaisesti, kelluke voi vain siirtää elementin jommallekummalle puolelle virtausta, oikealle tai vasemmalle.

Samaan aikaan itse laatikko ja sitä streamissa seuraavat saavat mielenkiintoisen käyttäytymisen:

Float" Laatikko kelluu vaakasuunnassa ja tarttuu emolevynsä toiselle puolelle.
Float" mutteroitua laatikkoa ei enää jaeta koko ylätason säilölaatikon leveydelle (kuten se tapahtuu virran lohkojen kanssa). Kun sen vapaata puolta ei ole painettu ylätason laatikkoon, ilmaantuu vapaata tilaa.
hänen perässään lohko laatikot vedetään ylös ja asettuvat paikalleen, ikään kuin kellukelaatikko ei olisi virrassa.
Pienet kirjaimet ylöspäin siirtyneiden lohkojen sisällä olevat laatikot alkavat virrata kellukelaatikon ympäri vapaalta puolelta.

Haluan vielä kerran korostaa asiaa, joka ei ole heti ilmeinen: itse kelluvan lohkon laatikko ryömi sen alle ja vie koko virran leveyden, mutta tämän lohkon sisällä oleva teksti siirtyy sivuun ja kiertyy kellua.

Lisäksi on mielenkiintoista, miten yhteen suuntaan menevät float "laatikot käyttäytyvät peräkkäin. Tällöin seuraava laatikko yrittää mahtua edellisen kylkeen, sen vapaalle puolelle. Ja vain jos ei ole tarpeeksi tilaa, se siirtyy alas ja yrittää mahtua jo sinne.

On vielä yksi pieni tekninen näkökohta, joka ei ole välttämätön koko "mekaniikan" ymmärtämiseksi. Voit kelluttaa sekä lohkolaatikoita että tekstin sisäisiä laatikoita. Samalla tekstin sisäisistä laatikoista tulee välittömästi automaattisesti lohkolaatikoita, eli näytön kirjoittaminen: block; floatille ei tarvita.

Kahdesta kuvatusta float "s:n ominaisuudesta - reunaan painaminen ja toistensa viereen kiinnittäminen - seuraa niiden kaksi pääsovellusta asettelussa:

jakaa sivu sarakkeisiin
vaakasuuntaiset valikot

kaiuttimet

Sarakkeet ovat, kun tekstilohkot ovat vierekkäin ja niillä on sama korkeus.

Harkitsen kaikkia sarakeasetteluja seuraavassa yksinkertaisessa HTML-koodissa, jossa on kaksi lohkoa:

...

On heti sanottava, että pylväiden tekeminen leveyteen venyvään astiaan on vaikeampaa kuin tietyllä leveydellä. On olemassa kaksi pohjimmiltaan erilaista lähestymistapaa, jotka sopivat eri tapauksiin.

Suhteellinen leveys

Jos haluat sarakkeiden leveyden muuttuvan suhteessa sivun leveyden muuttuessa, lähestymistapa on seuraava:

#sisältö ( kellua:oikea; leveys:70%; ) #sivupalkki ( float:vasen; leveys:30%; )

Eli kaksi kelluvaa lohkoa ovat vierekkäin eri suuntiin ja niiden leveys on jaettu haluttuun prosenttiosuuteen.Tällä menetelmällä on helppo vaihtaa sarakkeita - yksinkertaisesti muuttamalla oikean ja vasemman arvoja.

Vain yhtä saraketta venytetään

Jos sinun on muutettava vain pääsarakkeen leveyttä, edellinen menetelmä ei sovellu. Tosiasia on, että CSS:ssä se on valitettavasti mahdotonta suoraan muotoilla sellainen asia kuin "kaikki käytettävissä oleva leveys miinus tietty numero".

Siirrytään nyt yhteen aiemmista artikkeleista, joissa kerroin lohkoista, joissa mainitsin yhden niiden hyödyllisistä ominaisuuksista, jotka sopivat automaattisesti päälaatikon leveyteen. Eli jos eteenpäinvirtauksen lohkolle annetaan esimerkiksi vasen marginaali, sen leveys pienenee vastaavasti. Ja tämä on juuri se käyttäytyminen, jonka halusimme saavuttaa yhdestä sarakkeesta.

Joten haluamamme tehosteen saavuttamiseksi annamme päälohkolle vasemman marginaalin, jotta se kutistuu oikealle ja sivupalkki kelluu paikalleen:

#sivupalkki ( float:vasen; leveys: 200px; ) #content (marginaali-vasen:200px; )

Mutta toisella menetelmällä on yksi erittäin vakava haittapuoli. Huomaa, että alkuperäisessä HTML:ssä "sivupalkki" menee ennen estä "sisältö" pääsisällöllä. Ei tarvitse ajatella, että se tapahtui vahingossa :-). Tämä tehtiin tarkoituksella, koska muuten tämä aivan toinen menetelmä, jossa sarakepeitto on marginaalin päällä, ei toimisi.

Kuten artikkelin alussa kirjoitin, kellukkeet liikkuvat vain sivulle ja tekevät tilaa seuraaville ylöspäin liikkuville lohkoille. Siksi on tärkeää, että "sivupalkki" on jo ylhäällä ja sitten päälohko ajaa Jos "sivupalkki" tulee päälohkon jälkeen, se pysyy alempana, eikä se näytä miltään sarakkeelta.

Tämä on todella huono asia, koska se heikentää yhtä CSS:n pääajatuksista: tyylin erottaminen sisällöstä. Kävi ilmi, että halusimme vain muuttaa suunnittelua, ja jos lohkot sijaitsevat "väärin", meidän on myös mentävä HTML-malleihin. Lisäksi rakenteen kannalta voi olla hyviä syitä järjestää lohkot tavalla eikä toisin. Esimerkiksi, jotta käyttäjä voi aloittaa sivun päätekstin lukemisen odottamatta navigoinnin latautumista.

kiinteä leveys

Asiat yksinkertaistuvat dramaattisesti, kun pylväät mahtuvat kiinteän leveyden säiliöön. Tässä tapauksessa on parasta käyttää ensimmäistä menetelmää (float" kaikki sarakkeet), ja leveys voidaan jo asettaa paitsi prosentteina, myös haluamallasi tavalla, koska se voidaan laskea tarkasti.

Kaiuttimen korkeus

Jälleen, ei ollut kaikkea muuta kuin sattumaa, että "leikkasin" kuvien lohkojen alaosan :-). Muuten ne eivät näyttäisi ollenkaan sarakkeilta, koska, kuten näet, jos käytät antamiani CSS-fragmentteja ja värjäät sarakkeet eri väreillä, niiden korkeus osoittautuu erilaiseksi. Se riippuu näiden lohkojen sisällön määrästä.

Tämä ruma vaikutus voidaan kiertää useilla tavoilla.

Ensimmäinen menetelmä on nimeltään "Faux columns", joka julkaistiin arvovaltaisessa verkkolehdessä A List Apart syyskuussa 2004 ja on siitä lähtien ollut erittäin suosittu. Suosittelen kaikkia lukemaan joko alkuperäisen tai venäjänkielisen käännöksen. Jos et kuitenkaan halua napsauttaa tänään, tässä on lyhyt yhteenveto sen olemuksesta.

Sen sijaan, että sarakkeille määritettäisiin tausta, ne jätetään läpinäkyviksi, mutta niiden säilölle määritetään taustakuva, joka on koko säilön leveä ja toistuu pystysuunnassa. Tämän kuvan osat, jotka sijaitsevat eri sarakkeiden alla, on maalattu eri värejä ja toistettaessa se antaa halutun visuaalisen tehosteen.

Väärissä sarakkeissa on hienoa, että sinun ei tarvitse rajoittua taustakuvan yhtenäisiin väreihin. Voit esimerkiksi piirtää siihen varjoefektin sarakkeiden väliin, toistaen vaakajuovia taustana, koristeen reunoilla.

Tämän menetelmän haittapuolena on, että koska taustakuvalla on vain yksi koko, sitä ei voida käyttää suhteellisesti venyttäviin sarakkeisiin, koska kuva ei veny. Mutta siinä tapauksessa, että yksi sarakkeista on kiinteä leveys, taustaa voidaan säätää (tätä tapausta ei muuten oteta huomioon "Faux-sarakkeissa").

Tarkoitus on sijoittaa taustakuva vain sen sarakkeen alle, jonka leveys on tiedossa. Loput tilasta on taustalla väri kontti, ei kuva.

Otetaan esimerkkimme ja tehdään oikeanpuoleisesta "sivupalkin" sarakkeesta 200 pikseliä leveä, ja annetaan "sisällön" venyä. "Sivupalkkia" varten valmistamme kuvan, jonka mitat ovat 200x1, esimerkiksi tasainen sininen sävy. Ja "sisällön" alla otamme kellertävän.

Tyylinä se näyttää tältä:

#sivupalkki ( float:oikea; leveys: 200px; ) #content ( margin-right: 200px; ) body ( background:url(bg.png) #FFD oikea ylhäällä toista-y; )

Ainoa säilön (rungon) sääntö määrittää kaiken taustalla tapahtuvan toiminnan:

määritä kuvan URL-osoite (bg.png)
taustaväri paikoissa, joissa sitä ei ole (#FFD)
kuvan paikka painettuna oikeaan reunaan (oikea yläreuna)
toista kuva alas (toista-y)

SISÄÄN todellinen esimerkki CSS:ssä oli myös pari sääntöä kirjainten värille ja reunusten käsittelylle, jotka ovat nyt merkityksettömiä.

Toinen tapa tasata sarakkeiden korkeutta oliäskettäin kuvattu ja jo hyvin tunnettu mukavuutensa vuoksi.

Sen taustalla on ideana piilottaa sarakkeiden epätasaiset korkeudet laajentamalla niitä uskomattoman alaspäin siten, että niiden päät ovat sivun todellisen sisällön ulkopuolella. He saavuttavat tämän tekemällä ensin erittäin suuren sisennyksen (täytön) sarakkeisiin, jotka maalataan taustavärillä. Ja jotta muu sisältö ei siirry liian pitkälle, sarakkeet määritetään negatiivinen samankokoinen reuna (marginaali):

Outo luku johtuu siitä, että tämä on enimmäismäärä, jonka Safari-selain voi sallia. Se ei itse asiassa ole niin outoa. Kaikille, jotka ihmettelevät, tämä on suurin etumerkillinen kokonaisluku, kun sitä edustaa 16 bittiä.

Tämän seurauksena kaikki sarakkeiden jälkeinen siirtyy ja sijaitsee suoraan pisimmän sisällön alapuolella, ja sarakkeet pidennetään alaspäin. Yksi asia on ruma - pitkien sarakkeiden takia itse sivusta tulee yhtä pitkä. Tämän estämiseksi sinun on asetettava ylivuoto:hidden-ominaisuus heidän säiliöön, mikä pakottaa säiliön yksinkertaisesti katkaisemaan ja olemaan näyttämättä, mikä ylittää sen rajojen.

Omassa esimerkissäni, jonka otin heti alussa, on kuitenkin yksi puute. Siellä pylväät ovat aivan rungossa. Ja jos runko on asetettu overflow:hidden -tilaan, selaimet peruuttavat sivun vierityksen kokonaan. Vaikka todellinen sisältö on ikkunan yläpuolella. Siksi sarakkeet on käärittävä toiseen elementtiin, kuten div . Mutta rehellisyyden nimissä on sanottava, että käytännössä pylväät on jo kääritty johonkin.

Väijytys

Missä ilman sitä :-). Kuten alussa ei erityisen läpinäkyvästi vihjannut, koska kellukkeita ei keksitty pylväiden luomiseen, tästä tulee varmasti jotain rumaa ja tulee takaisin kummittelemaan analginin kulutuksen lisääntymistä (jotkut pitävät tempalginista tai parasetamolista) .

Ja "pois" - varsinaisessa merkityksessä. Siirretään "paljas" esimerkkimme hieman lähemmäs todellisuutta lisäämällä sarakkeiden yläpuolelle otsikko ja alle tekstilohko.

...

Yksinkertaisuuden vuoksi valitsemme yksinkertaisen pylväsmallin, jolla on kiinteä leveys. Tehdään otsikko ja alalohko siniseksi valkoisilla kirjaimilla, pääsisältö on valkoinen ja lisäsarake on myös sininen, mutta hieman vaaleampi. Asetamme sarakkeiden värit "Faux columns" -menetelmällä.

/* Sarakkeen asettelu */ body ( leveys:600px; margin:0 auto; ) #content ( float:left; leveys:450px; ) #sidebar ( float:right; leveys:150px; ) /* Värit */ #main ( background:url(bg.png) oikea ylhäällä toista-y; ) #header, #footer ( tausta:#238; väri:valkoinen; )

Jätin pois kaikki sisennykset ja fontit havaitsemisen helpottamiseksi. Lisää testiteksti ja suorita:

Hmm... No, pylväät, yleensä, voidaan jopa nähdä! Älä pidättele! Sanokoon mitä tahansa, kaikki ei kuitenkaan näytä suunnitellulta, ja voidaan jopa sanoa, että kaikki on muuttunut eräänlaiseksi kukkien ja kirjeiden sotkuksi.

Ymmärtääksemme, miksi näin tapahtuu, meidän on muistettava kuvaus kellukkeen toiminnasta. Nimittäin, että kellukkeita seuraavat lohkot lakkaavat huomaamasta näitä kellukkeita ja vedetään ylös. Lisäksi itse säiliö, jossa kellukkeet sijaitsevat, lakkaa myös huomaamasta niitä, ja kellukkeet putoavat säiliön pohjan läpi, jos se päättyy aikaisemmin.

Katsotaanpa nyt koodiamme. Sekä kelluvat "sisältö"- että "sivupalkki" -lohkot ovat "pää"-lohkon sisällä. Eikä "main" -osassa ole mitään muuta. Ja koska sillä ei ole enää mitään sisältöä, sen korkeus romahtaa nollaan! Siksi et näe. mikä tahansa kuvan valkoinen "sisällön" tausta, eikä vaaleansininen "sivupalkin" tausta, koska nämä värit on määritetty "päätaustaksi".

Seuraava - "alatunniste". Hän, noudattaen samaa sääntöä, ei myöskään näe kelluvaa "mutterilohkoa ja hänet vedetään suoraan itse otsikkoon (koska "pää" on nollakorkeus). Mutta "alatunnisteessa" on tekstiä. Tämän tekstin pitäisi jo olla kääri kellun ympärille "s: oikealla "sisältö" ja vasemmalla "sivupalkki". Sarakkeiden väliin ei jää tyhjää tilaa, joten teksti voi alkaa vain yhden ensin päättyvän sarakkeen alta. Siinä hän on. Joten "alatunniste" vetää ylöspäin otsikon alla ja jatkaa alaspäin, kunnes kaikki sen teksti on poissa. Ja kaikki tämä sininen tausta, joka on otsikon alla, on "alatunniste" ja se on.

Miksi niin monimutkaisuus

Kuvatun käytöksen pitäisi herättää hämmennystä. Miksi piti keksiä tällaisia komplikaatioita: jakaa lohkon käsite niin, että värit ja kehykset ovat päällä ja teksti paikallaan? Mutta tietysti siinä on järkeä. Tämä yhdessä reunan tiivistyksen kanssa on yritys saada CSS-laatikkomalli toimimaan normaalisti yksinkertaisen tekstinkulun olosuhteissa. Yksityiskohtaisen klassisen selityksen tälle ilmiölle antaa sama Eric Meyer artikkelissa "Containing Floats" (englanniksi). Yritän kertoa lyhyesti olemuksen.

Kuvittele normaali kappaleiden - tekstilohkojen - kulku ilman sijoittelua. Yhdessä kappaleessa on kuva, jota haluat siirtää esimerkiksi vasemmalle, jotta teksti virtaa sen ympärillä. Tämä saavutettiin aiemmin HTML:ssä align="left"-ominaisuuden avulla, mutta tyylin siirtämisen hengessä HTML:stä tyyleihin, tätä toimintoa varten he keksivät juuri kelluvan ominaisuuden. Eli tasauksen sijaan tälle kuvalle on määritetty float:left .

Anna siirretyn kuvan ottaa enemmän korkeutta kuin kappaleen tekstin. Jos hän venyttää kappaletta ja työntää seuraavan alun alemmaksi, se näyttää rumalta vierekkäisten kappaleiden lisääntyneen rivivälin vuoksi. Siksi se putoaa lohkojen kaikkien rajojen läpi pitäen kauniita sisennyksiä niiden välissä ja teksti virtaa sen ympärillä.

Ratkaisut

Pudotuskäyttäytyminen on siis ymmärrettävää, mutta se on kätevä sijoittamattomalle tekstille, ja se on melko hankalaa asettelun kannalta. On olemassa kaksi lähestymistapaa, jotka eliminoivat tämän ominaisuuden molemmat ilmentymät: seuraavien laatikoiden vetäminen ylös ja säiliön pohjan läpi putoaminen.

On olemassa erityinen ominaisuus estää lohkon vetäminen ylös - tyhjentää . Se saa elementin liikkumaan alas, kunnes sen kylkeen ei jää enää kellukkeita. Lisäksi voit hallita, kummalta puolelta kellukkeita ei saa olla:

clear:left varmistaa, että vasemmalla ei ole kellukkeita clear:right varmistaa, että oikealla ei ole kellukkeita clear:molemmat varmistavat, että molemmilla puolilla ei ole kellukkeita

Jos siis sanomme "alatunnisteellemme":

#footer ( selkeä:molemmat; )

Jotta sen vasemmalla ja oikealla puolella ei ole kelluvia "sarakkeita, se siirtyy alas juuri siihen kohtaan, jossa ne molemmat päättyvät.

Mutta se ei ratkaise toista ongelmaa: kellukkeet putoavat "pää"-osan läpi ja se romahtaa jättäen sille määritetyn sarakkeen taustan näkymättömäksi.

Voit sijoittaa säiliön selvästi jollakin tavalla. Sikäli kuin ymmärrän määrittelyn logiikan, vikasietokäyttäytymistä pidetään loogisena vain yksinkertaisessa säikeessä. Muissa tapauksissa se vain estää. Ja niin se on, kuten olemme nähneet. Eli riittää, että säilöön määritetään esimerkiksi sijainti: absoluuttinen tai kelluva: vasen, eikä mikään putoa läpi, kontti sisältää kokonaan sekä tekstiä että kellukkeita. Meidän tapauksessamme (ja useimmissa tapauksissa tavalla) tämä ratkaisu on varsin sopiva.

Toinen mielenkiintoinen tapa liittyy ylivuotoominaisuuden sivuvaikutukseen. Se on itsessään tarkoitettu määrittämään, kuinka säiliö vuotaa yli, kun se ei voi sisältää sisältöään. Sillä on neljä merkitystä:

Näkyvä sisältö menee reunan yli ja on normaalisti näkyvissä (tämä on oletuskäyttäytyminen) piilotettu sisältö leikataan pois säilön ulkopuolelta eikä näy siellä millään tavalla automaattisesti jos sisältö vuotaa säilön yli, siinä on vierityspalkki jonka avulla voit vierittää sisältö, jos ei, vieritys ei näy kuten automaattinen , vain säilössä on aina vierityspalkki, vaikka sisältö ei ylitä sitä

Joten tässä sivuvaikutus on se, että jos laitat säiliöön ylivuotoa, paitsi tavallista näkyvää, se venyy yhtäkkiä ja sisältää siinä istuvat kellukkeet, mikä eliminoi romahtamisen.

Millaista ylivuotoa kannattaa käyttää? Vieritys katoaa välittömästi - aina roikkuvia vierityspalkkeja ei selvästikään tarvita. Jäljelle jää automaattinen ja piilotettu , jotka eroavat toisistaan vain siinä, näkyykö vierityspalkki ylivuodossa vai ei. Mutta meillä ei ole ylivuotoa, päinvastoin, tällä ominaisuudella pakotimme säiliön venymään pidemmälle, jotta se peittää kaikki elementtinsä. Siksi mitä tahansa arvoa voidaan käyttää.

Yritän taikauskoisesti käyttää piilotettua, jotta vierityspalkit eivät tule näkyviin, jos jostain vioista johtuen yhtäkkiä tapahtuu ylivuoto.

Ylivuotoratkaisussa on yksi vika, joka liittyy Some Browser™:n toimintaan. Se toimii vain, jos säilölle on nimenomaisesti määritetty leveys tai korkeus. Tämän vuoksi niitä on joskus hankala käyttää, kun tarvitset automaattisia kokoja jäykkien kokojen sijaan.

Joten loppujen lopuksi, jotta voimme korjata esimerkkimme sarakkeilla, meidän on tehtävä tämä:

#main (leveys:100%; ylivuoto:piilotettu; )

Muuten! Jos en käyttäisi tekopylväitä taustan piirtämiseen sarakkeiden alle, vaan pitkätä täyttömenetelmää, se vaati käytä overflow:hidden sanaa "main", mikä ratkaisee myös putoamisongelman. Mutta miten sitten puhuisin siitä?

Siinä se kaiuttimien kanssa... On aika mennä kaatamaan itsellesi herkullista teetä (monet ihmiset pitävät kahvista) ja lisätä siihen herkullinen muffinssi. Pysähdy laittaaksesi kaikki tämä sotku päähäsi. Seuraavaksi odotellaan pientä lisäystä - ruokalistasta.

Valikko

Haluan muistuttaa, että jos useita peräkkäisiä lohkoja kelluu yhteen suuntaan, jokainen seuraava yrittää laajentaa edellisen vapaalta puolelta.Tätä tehostetta käytetään laajalti muuttamaan sivuston osioiden luettelot vaakasuuntaisiksi valikoiksi.

Otetaan tämä lista:

alkaa
Luettelo
Kori
Viite

Jotta se näyttäisi valikosta, sinun on kellutettava "kaikki li vasemmalle, poistettava luettelon attribuutit (sisennykset ja luettelomerkit) ja lisättävä sisennykset, tausta ja kehys kauneuden vuoksi:

/* asettelu */ ul, li ( float:left; list-style:none; margin:0; padding:0; ) /* view */ li ( padding:2px 10px; font:Bold Small Tahoma; background:#35C ; väri:valkoinen; reunus: kiinteä 1px; reunusväri:#46F #238 #238 #46F; ) a ( väri:valkoinen; tekstikoristelu:ei mitään; )

Huomaa, että kaikki asettelun ominaisuudet on määritetty sekä ul- että li-elementeille. On kätevää rajata tämä yhteen sääntöön, koska:

float:left tarvitaan listan elementeille, jotta ne laajenevat vaakasuunnassa, ja itse listalle, jotta elementit eivät putoa sen läpi;
nollamarginaali ja täyttö poistavat oletusarvoisesti selaimien listoille tekemän täytön, mutta ne tekevät sen hyvin eri tavalla, joten on helpompi sanoa "kaikki on nolla" kuin muistaa, mitä millekin elementille pitää laittaa erikseen.

Moraali

Kelluva mekanismi on toinen asettelutyökalu absoluuttisen paikantamisen ohella.

Ne eroavat paremmasta, joten voit jättää elementin virtaan, mikä on erittäin kätevä sarakeasettelussa.

Sillä on kuitenkin haittoja, että se on vähemmän joustava, koska elementtejä ei voida siirtää mielivaltaisesti ja koska sen käyttömahdollisuus voi riippua HTML-merkinnän elementtien järjestyksestä.

Tämä artikkeli on osa sykliä, jota ollaan kirjoitettu työnimellä "Oppikirja". Suosittelen, että luet muut artikkelit, jotka löytyvät "Oppikirja"-luokasta, jossa ne on nyt koottu käänteisessä kronologisessa järjestyksessä.

Olemme jo keksineet sen. Huomasimme, että niillä on sisältöä. Tässä ei kuitenkaan vielä kaikki. Tunnisteilla on myös attribuutteja, jotka laajentavat niiden ominaisuuksia, ja määritteillä puolestaan on arvoja. Niiden avulla voit asettaa elementille parametreja, määrittää suunnittelun tyylin. Esimerkiksi tagi

merkitsit kappaleen. Mutta miten saat sen kohdistetuksi oikein? Tätä varten tarvitset tietyn määritteen sopivalla arvolla. Aivan kuten joillakin tunnisteilla ei ole paria, niin myös joitain attribuutteja voidaan käyttää ilman arvoja.

Kuinka kirjoittaa attribuutteja?

Attribuutit ovat varattuja sanoja (kuten tagit, vain ilman kulmasulkuja), mutta niiden arvot voivat olla erilaisia. Tunnisteiden tapaan myös arvostettuja attribuutteja suositellaan kirjoitettavaksi pienillä kirjaimilla, vaikka selaimet eivät yleensä välitä - se on vain nyrkkisääntö. hyviä käytöstapoja: venäjäksi EI SAA MYÖS KIRJOITTAA CAPS LOCK PÄÄLLÄ. Miksi HTML on huonompi?

Arvot määritteineen kirjoitetaan seuraavassa muodossa:

attribuutti=”arvo” lang=”fi”

Attribuutit tulee aina kirjoittaa alkutunnisteen sisään varatun sanan jälkeen.

Kohta

Yleensä yhdelle tunnisteelle on saatavana useita määritteitä. Ei ole väliä missä järjestyksessä ne on listattu.

Yleiset ominaisuudet

Jokaisella HTML-tunnisteella on omat attribuuttinsa. Jotkut attribuutit voivat olla käytettävissä useissa tunnisteissa, kun taas toiset voivat toimia vain yhdessä. On myös joukko universaaleja (yleisiä) attribuutteja, joita voidaan käyttää minkä tahansa tunnisteen kanssa. Katsotaanpa nopeasti tämän luokan ominaisuuksia.

avainkoodi voit asettaa pikanäppäimen tietylle sivuobjektille. Voit tehdä sen esimerkiksi käyttämällä pikanäppäintä Alt+1 käyttäjä napsauttaa tiettyä linkkiä. Kehitä näin näppäimistönavigointijärjestelmä.

Attribuutin arvo voi olla numeroita 0-9 tai latinalaisten aakkosten kirjaimia:

Linkki avataan painamalla pikanäppäintä yhdellä

luokkaa voit liittää tunnisteen ennalta määritettyyn CSS-tyyliin. Attribuutin avulla voit vähentää koodia merkittävästi, koska saman CSS-lohkon syötteen toistamisen sijaan voit kirjoittaa sitä vastaavan luokan nimen.
Käyttämällä tyytyväisiä voit sallia käyttäjän muokata mitä tahansa HTML-sivun elementtiä: poistaa, lisätä, muuttaa tekstiä. Sama attribuutti mahdollistaa muokkaamisen ja poistamisen käytöstä. Arvoja on vain kaksi: totta- salli muokkaus väärä- kieltää.
Attribuutilla kontekstivalikko voit varustaa minkä tahansa asiakirjan elementin valitsemillasi ainutlaatuisilla kontekstivalikon vaihtoehdoilla. Itse valikko luodaan tunnisteeseen , ja kontekstivalikko-attribuutille annetaan sen tunnus.
ohj määrittää tekstin suunnan: vasemmalta oikealle (ltr) tai oikealta vasemmalle (rtl).
vedettävä antaa sinun kieltää (väärä) tai sallia (totta) käyttäjä vetää tällä määritteellä varustetun sivuelementin.
pudotusalue kertoo selaimelle, mitä tehdä vedetylle elementille: copy(value kopio), liikkua ( liikkua) tai luo linkki siihen (linkki).
piilotettu- attribuutti, jonka avulla voit piilottaa elementin sisällön niin, että se ei näy selaimessa. Jos attribuutti on asetettu arvoon false, objekti näytetään, true - piilotettu.
id asettaa elementin tunnisteen - eräänlaisen nimen, jota tarvitaan yksinkertaiseen objektin tyylin muuttamiseen sekä jotta komentosarjat voivat käyttää sitä. Attribuutin arvo on sen nimi. Sen on alettava latinalaisella kirjaimella, ja se voi sisältää numeroita, saman latinalaisen aakkoston kirjaimia (suuria ja pieniä) sekä väliviivoja (-) ja alaviivat (_) . Venäläiset kirjaimet eivät voi sisältää.
Kieli auttaa selainta ymmärtämään kielen, jolla sisältö on kirjoitettu, ja muotoilemaan sen sen mukaan (esimerkiksi kielissä voidaan käyttää erilaisia lainausmerkkejä). Arvot ovat kielikoodeja (venäjä - fi, Englanti - fi ja niin edelleen.).
oikeinkirjoituksen tarkistus sisältää (totta) tai poistaa käytöstä (väärä) oikeinkirjoituksen tarkistus. Erityisen hyödyllistä on käyttää attribuuttia lomakekenttien tunnisteissa, joihin käyttäjä kirjoittaa tekstiä.
tyyli voit määrittää elementin ulkoasun CSS-koodin avulla.
tabindex mahdollistaa sen määrittämisen, kuinka monta kertaa käyttäjän on painettava Tab-näppäintä, jotta objekti, jolla on tämä attribuutti, saa tarkennuksen. Napsautusten määrä määrittää määritteen arvon - positiivinen kokonaisluku.
otsikko- työkaluvihje, joka tulee näkyviin, jos siirrät hiiren elementin päälle ja jätät sen liikkumatta hetkeksi. Arvossa oleva merkkijono on vihje.

Kääntää sallii (Joo) tai kieltää (ei) tagin sisällön käännös.
kohdistaa määrittää elementin kohdistuksen. Sitä voidaan käyttää esimerkiksi tekstin tasaamiseen vasemmalle (arvo vasemmalle), oikealla puolella ( oikein), keskitetty (keskusta) tai leveyden mukaan (perustella). Kuville (tag ) on myös käytettävissä rivin korkeimman elementin yläosaan kohdistamiseen ( alkuun), alarajaa pitkin (alhaalla), ja keskiarvo saa kuvan keskiviivan vastaamaan viivan perusviivaa.

On syytä pitää mielessä, että attribuutin käyttö kohdistaa ei suositella, ja tekstin tasaus on parempi CSS:n kanssa.

Esimerkki attribuuttien käytöstä

Harkitse esimerkkinä HTML-koodiriviä:

Tätä tekstiä voi muokata

Koko rivi luo tekstikappaleen, jota käyttäjä voi muokata selaimessa.

Analysoidaan jokaista merkkijonon elementtiä.

- kappaleen tallentavan säilön alkutunniste.

- sulkeva tag.

Hahmojen välillä > Ja < sijaintiteksti Tätä tekstiä voidaan muokata. Tämä on merkintä tagien ulkopuolella (niiden välissä), mikä tarkoittaa, että se näkyy sivun avaneelle käyttäjälle. Selain käsittelee sitä pelkkänä tekstinä, joka on näytettävä näytöllä.

tyytyväisiä=”totta” - tämä on attribuutti ja sen arvo. Muista kuinka koulussa: x=3. Samoin täällä: tyytyväisiä=”totta". Attribuutti tyytyväisiä määrittää, voiko käyttäjä muokata elementin, arvon, sisältöä totta, kirjoitettu yhtäläisyysmerkillä erotettuina lainausmerkeissä, muokkaus mahdollistaa:

Attribuutti=”arvo” contenteditable=”true”

lyhyttä tietoa

Merkintä

	Kuvaus	Esimerkki
<тип>	Määrittää arvon tyypin.	<размер>
A&&B	Arvot on tulostettava määritetyssä järjestyksessä.	<размер> && <цвет>
A \| B	Osoittaa, että vain yksi ehdotetuista arvoista (A tai B) tulee valita.	normaali \| pienet kirjaimet
A \|\| B	Jokaista arvoa voidaan käyttää yksinään tai yhdessä muiden kanssa missä tahansa järjestyksessä.	leveys \|\| Kreivi
	Ryhmien arvot.	[ sato \|\| ylittää]
*	Toista nolla tai useampia kertoja.	[,<время>]*
+	Toista yksi tai useampia kertoja.	<число>+
?	Määritetty tyyppi, sana tai ryhmä on valinnainen.	upotettu?
(A, B)	Toista vähintään A, mutta enintään B kertaa.	<радиус>{1,4}
#	Toista yksi tai useampi kertaa pilkuilla erotettuina.	<время>#

Arvot

Hiekkalaatikko

Nalle Puh ei aina ollut vastenmielistä pientä virvokkeita, varsinkin kello yhdeltätoista aamulla, koska siihen aikaan aamiainen oli jo kauan sitten päättynyt, eikä illallinen ollut edes ajatellut aloittaa. Ja tietysti hän oli hirveän iloinen nähdessään, että Kani otti kupit ja lautaset.

img ( kellua: ei mitään ; )

Esimerkki

kellua

Behaviorismi, vaikka se tuntuisi kuinka paradoksaalista, valaisee sublimoituneen ärsykkeen, esimerkiksi Richard Bandler käytti submodaliteettien muutosta tehokkaiden tilojen rakentamiseen.

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Kelluvan ominaisuuden käyttäminen

Objekti malli

Esine.style.cssFloat

Huomautus

Erittely

Jokainen spesifikaatio käy läpi useita hyväksymisvaiheita.

Suositus (Recommendation) - W3C on hyväksynyt spesifikaation ja sitä suositellaan standardiksi.
Ehdokassuositus ( Mahdollinen suositus) - standardista vastaava ryhmä on tyytyväinen, että se täyttää tavoitteensa, mutta standardin toteuttamiseen tarvitaan kehitysyhteisön tukea.
Ehdotettu suositus ( Suositeltu suositus) - tässä vaiheessa asiakirja toimitetaan W3C:n neuvottelukunnalle lopullista hyväksyntää varten.
Työluonnos - Kypsempi luonnos keskustelun ja yhteisön tarkasteluun tehtyjen muutosten jälkeen.
Toimittajan luonnos ( Toimituksellinen luonnos) on standardin luonnosversio sen jälkeen, kun projektin toimittajat ovat tehneet siihen muutoksia.
luonnos ( Erittelyluonnos) on standardin ensimmäinen luonnos.