Flytte css-blokker. CSS - Posisjoneringsblokkelementer

Ovenfor snakket vi om hvordan du kan plassere sideelementer ved å bruke tabeller. Men dette kan også gjøres ved hjelp av stiler.

  • Blant stilparametrene er det spesielle egenskaper for posisjonering:
  • venstre - for å angi avstanden i piksler fra venstre kant av vinduet (x-koordinat);
  • topp - for å angi avstanden i piksler fra øvre kant av vinduet (y-koordinat);

z-indeks - for å indikere rekkefølgen elementer vil overlappe hverandre i; dette er en ny dimensjon, elementer med større z-indeks vil vises over elementer med mindre z-indeks.
Å bruke disse tre egenskapene skaper selvfølgelig ikke effekten av tredimensjonalt rom, men dette er noe mer enn en flat overflate. I dette tilfellet snakker vi om 2,5-dimensjonalt rom.

statisk - elementet vil bli plassert i en bestemt posisjon i forhold til bakgrunnen og vil ikke bevege seg når du ruller siden.


Følgende eksempel viser bruken av z-indeks-egenskapen.




nepBbiu posisjonert tekst




Ris. 666. Ved å bruke i-index-egenskapen kan du endre den naturlige rekkefølgen av elementer i teksten til et HTML-dokument

Når du plasserer elementer, kan det vise seg at dimensjonene til elementet overskrider dimensjonene til fragmentet (det tildelte området spesifisert i vårt eksempel av taggen).

  • For eksempel passer ikke tekst eller et bilde helt inn i rektangelet som er tildelt det. For dette tilfellet er det oversvømmet eiendom. Overløpsegenskapen kan ha tre verdier:
  • ingen (ingenting) - hvis elementet går utover fragmentet (plassen som er tildelt for det), vil det fortsatt vises;
  • klips - deler av elementet som stikker utover grensene til fragmentet vil bli avskåret;

rull - rulling vil bli brukt. Følgende eksempel bruker overløp eiendom


for å lage en rullemekanisme for den første teksten.




Posisjonering

riepBbiM posisjonert tekst

Tekst nummer to Ris. 667. Mekanisme rulletekst

, implementert ved hjelp av overflow-egenskapen

Selvfølgelig ble de stygge sidene fra de forrige tegningene laget bare for å demonstrere språkets evne til å plassere elementer. Du bestemmer selv hvilke verktøy du vil bruke og til hvilket formål på nettsiden din. Ved å bruke posisjoneringsegenskaper er det enkelt å lage en tredimensjonal effekt for etikettene dine. Tanken er å vise tekster med samme innhold litt forskjøvet i forhold til hverandre og farget i forskjellige farger. Prøv å skrive et tilsvarende program som en øvelse.

Bildet viser omtrent hva som skal skje. Bildet under er ett av mulige alternativer


program som lager en "tredimensjonal" inskripsjon.

Ris. 668. Et eksempel på å lage 3D-tekst med
bruker CSS
3d effekt



P (font-family: "sans-serif"; font-size: 96, -color: red)"

P. highlight (farge: sølv)

P. skygge (farge: mørkerød)


Volumetrisk tekst Volumetrisk tekst Volumetrisk tekst

Vær oppmerksom på at denne metoden for å lage effektive overskrifter er mye mer økonomisk enn å bruke grafiske filer med lignende innhold. Plassering av css-blokker er en av ikke nødvendig), og har også en betydelig innvirkning på videre skalering av nettstedet. Det er ikke uvanlig at "ville-være layoutdesignere" lager en slik layout at det til slutt er lettere å kaste det enn å endre noe, men samtidig kan det se helt i samsvar med layouten. Denne situasjonen oppstår på grunn av manglende forståelse for hvor og når man skal bruke denne eller den typen posisjonering. I dag vil vi prøve å forstå dette problemet. Og så, i CSS er det en posisjonsegenskap.

  • Denne egenskapen kan ha 5 verdier, men vi vil vurdere 4 hovedverdier:
  • absolutt
  • statisk
  • slektning
fikset

Absolutt plassering av blokker (absolutt) Den første posisjoneringsmetoden på listen vår er absolutt. Etter avtale av denne eiendommen

, blokken blir sin egen enhet og resten av sideelementene påvirker ikke plasseringen, og den påvirker heller ikke andre elementer. Blokkstørrelsen bestemmes av egenskapene for bredde og høyde, og plasseringen på siden bestemmes av de øverste egenskapene. venstre, høyre og bunn disse parameterne spesifiserer polstringen fra toppen, venstre, høyre og bunnkant. Hvis blokken ikke har et overordnet element, og også hvis posisjoneringen av det overordnede elementet er annet enn statisk, setter topp-, venstre-, bunn-, høyre-egenskapene innrykk fra begynnelsen av siden, ellers fra kantene av overordnet element. Oftere denne typen

posisjonering brukes når en blokk må presses til høyre eller underkant. La oss vurdere denne utformingen.

For enkelhets skyld ble blokkene fremhevet med en flerfarget ramme. Markeringen vil se slik ut:

XHTML

Relasjon ( posisjon: relativ; ) .yellow ( posisjon: absolutt; høyre: 10px; bunn: 10px; )

Forhold

stilling: pårørende;

Gul

posisjon: absolutt;

høyre: 10px;

bunn: 10px;

I dette eksemplet brukte vi egenskapene til høyre og nederst for å sette forskyvningen fra høyre og nedre kant. Disse egenskapsverdiene tilsvarer verdiene øverst: Elementhøyde - 10px og venstre: Elementbredde - 10px.

Også absolutt posisjonering brukes noen ganger når det er nødvendig å "påvirke" ett element på et annet.

Statisk posisjonering (statisk) Den vanligste typen posisjonering som forekommer på hver side og er vanligvis satt for de fleste elementer er statisk, skrevet i css som statisk. For de fleste HTML-tagger er definert som standard, dvs. hvis posisjonen ikke er eksplisitt spesifisert, vil verdien være statisk. Med dette arrangementet er elementene stilt opp under hverandre og koordinatene i vinduet til hvert element avhenger av de nærmeste elementene med posisjon: statisk eller posisjon: relativ. De øverste, venstre, høyre, nederste egenskapene vil ikke fungere med denne posisjoneringen plasseringen endres pga marginegenskaper.

Relativ posisjonering

Denne typen posisjonering er veldig lik statisk posisjonering, bortsett fra at posisjonen til elementet kan endres med egenskapene topp, venstre, høyre, bunn og marg.

Fast posisjonering

Fast posisjonering ligner på absolutt posisjonering når det gjelder hvordan den spesifiserer koordinater, men plasseringen beregnes ikke relativt HTML-sider, men i forhold til nettleservinduet, dvs. med toppen: 10px-egenskapen, vil du sette toppmargen til å være 10px FRA NETTLESERVINDUET, og uansett hvilket siderullingsnivå du er på, vil dette elementet alltid følge skjermen din.

Brukes vanligvis for navigasjonselementer slik at brukeren alltid kan se viktig informasjon eller lenker til interessante sider.

Vlad Merzhevich

Posisjonering er posisjonen til et element i et koordinatsystem. Det er fire typer posisjonering: normal, absolutt, fast og relativ. Avhengig av typen, som settes gjennom posisjonsegenskapen, endres også koordinatsystemet.

Takket være kombinasjonen av egenskapene posisjon , venstre , topp , høyre og bunn, kan et element legges over hverandre, vises på et punkt med bestemte koordinater, festet på et spesifisert sted, bestemme posisjonen til ett element i forhold til et annet, osv. Ligner på andre CSS-egenskaper Posisjonskontroll er tilgjengelig gjennom skript. Dermed kan du dynamisk endre plasseringen av elementer uten å laste inn siden på nytt, lage animasjoner og ulike effekter.

Normal posisjonering

Hvis et elements posisjonsegenskap ikke er angitt eller verdien er statisk , gjengis elementet i dokumentstrømmen som normalt. Med andre ord, elementer vises på siden i den rekkefølgen de vises i HTML-kildekoden.

Egenskapene venstre , topp , høyre , bunn, hvis definert, ignoreres.

Absolutt posisjonering

Med absolutt posisjonering eksisterer ikke elementet i dokumentflyten og dets posisjon er satt i forhold til kantene på nettleseren. Du kan angi denne typen gjennom den absolutte verdien av posisjonsegenskapen. Koordinatene er spesifisert i forhold til kantene på nettleservinduet, kalt "synlig område" (fig. 3.42).

Ris. 3,42. Venstre, høyre, topp og bunn egenskapsverdier for absolutt posisjonering

Modusen er preget av følgende funksjoner.

  • Lagets bredde, med mindre det er spesifisert, er lik bredden på innholdet pluss margin, kantlinje og utfyllingsverdier.
  • Laget endrer ikke sin startposisjon hvis den ikke har egenskapene høyre, venstre, topp og bunn.
  • Egenskapene til venstre og øverste har forrang over egenskapene til høyre og nederst. Hvis venstre og høyre motsier hverandre, ignoreres verdien av høyre. Det samme gjelder bunnen.
  • Hvis venstre er satt til en negativ verdi, vil laget gå utover venstre kant av nettleseren, og rullefeltet vises ikke. Dette er en måte å skjule et element på. Det samme gjelder toppegenskapen, kun laget vil gå utover toppkanten.
  • Still inn verdien hvis venstre mer bredde synlig område eller angi rett med en negativ verdi, den horisontal stripe bla. En lignende regel fungerer med topp , men vi vil snakke om vertikal stripe bla.
  • Samtidig danner de angitte venstre og høyre egenskapene bredden på laget, men bare hvis bredden ikke er spesifisert. Når du legger til breddeegenskapen, vil den riktige verdien bli ignorert. Det samme vil skje med høyden på laget, kun egenskapene topp , bunn og høyde er involvert.
  • Et absolutt plassert element beveger seg med dokumentet mens det ruller.

Posisjonsegenskapen, satt til absolutt, kan brukes til å lage en rammeeffekt. I tillegg til absolutt posisjonering, må elementer ha en overflyt-egenskap satt til auto . Deretter, når innholdet overstiger høyden på det synlige området, vises et rullefelt. Høyden og bredden på "rammene" genereres automatisk av samtidig bruk egenskaper venstre , høyre for bredde og topp , bunn for høyde (eksempel 3.31).

Eksempel 3.31. Opprette en analog av rammer

Absolutt posisjoneringstekst ( margin: 0; ) #sidebar, #content (posisjon: absolutt; ) #sidebar, #content ( overflow: auto; polstring: 10px; ) #header ( høyde: 80px; /* Laghøyde */ bakgrunn: #FEDFC0; kantlinje: 2px solid #7B5427; ; /* Avstand fra øvre kant */ bunn: 0; /* Avstand fra bunn */ ) #innhold ( topp: 82px; /* Avstand fra øvre kant */ venstre: 170px; /* Avstand fra venstre kant */ nederst: 0 ; høyre: 0 ) Pilaf av verdens folk

Pilaf i Fergana-stil

Usbekisk pilaf

Sibirsk pilaf

Italiensk pilaf

Estisk pilaf

Pilaf i amerikansk stil

Indisk stil pilaf

Pilaf i Fergana-stil

Legg kjøttet skåret i biter i en gryte og stek det til en skorpe danner seg. Stek løken, hakket i ringer, sammen med kjøttet til det er rødaktig, tilsett deretter gulrøttene, kuttet i strimler. Tilsett halvparten av saltet, bland alt og stek til gulrøttene blir gyldenbrune. Etter dette, hell halvparten av den nødvendige mengden vann og la det koke.

Dekk risen i et jevnt lag, øk varmen og hell umiddelbart i vann slik at den dekker risen med 1–1,5 cm Så snart vannet har fordampet, bruk en hullsleiv til å samle pilaffen i en haug mot midten. , stikk den med en pinne flere steder slik at vannet på overflaten gikk til bunnen. Dekk så til pilafen og la den hvile i 20–25 minutter.

Bland den ferdige pilaffen grundig, ha over i et stort fat og legg kjøttet på toppen.

Resultat dette eksemplet vist i fig. 3,43. Overskriftslaget gjengis i strømmen som vanlig, og sidefeltet og innholdslagene er absolutt plassert.

Ris. 3,43. Bruker absolutt posisjonering

I IE6 kan absolutt posisjonerte elementer ikke ha venstre , høyre og topp , bunn egenskaper samtidig.

Absolutt posisjonering brukes også til å skape ulike effekter, for eksempel verktøytips for bilder. I motsetning til tittelattributt tag som også viser verktøytipsteksten, gjennom stiler kan du kontrollere typen tekst som vises ved hjelp av skriptet.

Først, la oss lage tomt lag med identifikatoren floatTip og definer stilen. Tre stilegenskaper må kreves - posisjon med verdien absolutt , visning med verdi ingen skjuler laget, og bredden angir bredden på laget med et verktøytips. De resterende egenskapene brukes på forespørsel fra utbygger og er ment å endre utformingen av laget (eksempel 3.32).

Eksempel 3.32. Verktøytips stil

#floatTip ( posisjon: absolutt; /* Absolutt posisjonering */ width: 250px; /* Block width */ display: none; /* Skjuler fra skjerm */ kantlinje: 1px solid #000; /* Rammeparametere */ padding: 5px ; /* Marginer rundt tekst */ font-family: sans-serif /* Chained font */ font-size: 9pt /* Skriftstørrelse */ farge: #333; /* Bakgrunnsfarge */ )

Selve skriptet består av to funksjoner - moveTip() sporer musebevegelser og endrer posisjonen til laget i samsvar med markørkoordinatene, og toolTip() kontrollerer synligheten til laget og viser ønsket tekst i det (eksempel 3.33).

Eksempel 3.33. Lagutdataskript

Document.onmousemove = moveTip; funksjon moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Lagbredde // For IE-nettleser if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // For andre nettlesere ) else ( x = e.pageX; // X-koordinaten til markøren y = e.pageY; // Y-koordinaten til markøren ) Vis laget til høyre for markøren hvis ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

For enkelhets skyld og allsidighet bør manuset plasseres i egen fil og koble den til via src-attributtet til taggen. Den endelige koden er vist i eksempel 3.34.

Eksempel 3.34. Opprette et verktøytips

Verktøytips #floatTip (posisjon: absolutt; bredde: 250px; skjerm: ingen; kantlinje: 1px solid #000; polstring: 5px; font-family: sans-serif; font-size: 9pt; farge: #333; bakgrunn: # ECF5E4 ; opasitet: 0,85; /* Laggjennomsiktighet */

" + "Objektiv: Canon EF 24-105 f/4L IS USM
" + "Blits: Canon Speedlite 580 EX
" + "Lukkerhastighet: 1/125
Blenderåpning: 5,6")" onmouseout="toolTip()" />

Resultatet av dette eksemplet er vist i fig. 3,44. Vær oppmerksom på at tekstbryting når du kaller opp toolTip()-funksjonen er laget for å lette oppfatningen og har JavaScript-syntaks. I Safari fungerer skriptet noen ganger ikke når tekst brytes, i så fall bør teksten skrives på én linje. En CSS3-opasitetsegenskap er lagt til stiler, noe som gir laget en liten gjennomsiktighet. Denne egenskapen støttes ikke i IE før versjon 9.0.

Ris. 3,44. Verktøytips gjengitt med JavaScript

Fast posisjon

Den faste posisjonen til et lag spesifiseres av den faste verdien til posisjonsegenskapen og er lik absolutt posisjonering. Men i motsetning til det, binder den seg til punktet på skjermen spesifisert av egenskapene venstre , topp , høyre og bunn og endrer ikke posisjonen når du ruller nettsiden. En annen forskjell fra absolutt er at når et fast lag går utover det synlige området til høyre eller under det, vises ingen rullefelt.

Denne typen posisjonering brukes til å lage menyer, faner, overskrifter, generelt, alle elementer som skal være fikset på siden og alltid synlig for den besøkende. Eksempel 3.35 viser å legge til en bunntekst som forblir på ett sted uavhengig av mengden informasjon på nettstedet.

Eksempel 3.35. Fast kjeller

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Fast bunntekst BODY ( marg-bunn: 50px; ) #footer ( posisjon: fast; /* Fast posisjon */ venstre: 0; bunn: 0; /* Nedre venstre hjørne */ polstring: 10px; /* Marger rundt tekst */ bakgrunn: #39b54a; /* Bakgrunnsfarge */ farge: #fff; /* Tekstfarge */ width: 100% /* Lagbredde */ ) Alle løvefangstmetoder som er oppført på siden er teoretiske og basert på beregningsmetoder. Forfatteren garanterer ikke din sikkerhet når du bruker dem og fraskriver seg alt ansvar for resultatene.

Husk at en løve er et rovdyr og et farlig dyr!

Vlad Merzhevich

Resultatet av eksemplet er vist i fig. 3,45. Fordi den faste bunnteksten overlegger og skjuler teksten, er det lagt til en bunnpolstring for BODY-velgeren. IE6 støtter ikke den faste verdien, så dette eksemplet vil ikke fungere riktig der.

Ris. 3,45. Bunntekst nederst på siden

Relativ posisjonering

De nederste og høyre egenskapene har motsatt effekt. Med en positiv verdi forskyver høyre elementet til venstre for høyre kant, med en negativ verdi forskyver det det til høyre (fig. 3.47). En positiv bunnverdi flytter elementet opp, en negativ bunnverdi flytter det ned.

Ris. 3,47. Høyre og nederste egenskapsverdier for relativ posisjonering

Relativ posisjonering er preget av følgende funksjoner.

  • Denne typen posisjonering gjelder ikke for tabellelementer som celler, rader, kolonner osv.
  • Når et element forskyves i forhold til dets opprinnelige posisjon, forblir plassen som elementet okkuperte tom og fylles ikke av elementene under eller over det.

Eksempel 3.36 viser overskriftstekst som flyttes ned for å gi den en annen skrivestil.

Eksempel 3.36. Teksttittel

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Overskrift H1 ( font: fet 2em Arial, Tahome, sans-serif; /* Skriftalternativer */ farge: #fff; bakgrunn: #375D4C; polstring: 0 10px; ) H1 SPAN (posisjon: relativ; /* Relativ posisjonering */ topp: 0,3em; /* Flytt ned */ ) Az og bøk av skriftvitenskap

En font er et middel til å uttrykke design, ikke en slags banal lesning.

Resultatet av dette eksemplet er vist i fig. 3,48.

Ris. 3,48. Skift tekst i forhold til den opprinnelige plasseringen

Nestede lag

Vanligvis relativ posisjonering i seg selv brukes ikke ofte, siden det er en rekke egenskaper som i hovedsak utfører samme rolle, for eksempel samme margin . Men kombinasjonen forskjellige typer Plassering for nestede lag er en av de praktiske og praktiske layoutteknikkene. Hvis du setter relativ for det overordnede elementet og absolutt for barnet, vil koordinatsystemet og posisjonen endres barneelement i dette tilfellet er det indikert i forhold til forelderen (fig. 3.49).

Ris. 3,49. Venstre, høyre, øverste og nederste egenskapsverdier i nestede lag

Koordinater telles fra den indre kanten av grensen verdier i felten tas ikke i betraktning. Følgende eksempel plasserer tekst i nedre høyre hjørne av laget nær grensen, og ignorerer utfyllingsegenskapen.

Tekst ... ...

Ingen av disse alternativene er perfekte, men de er nyttige. Jeg pleier å favorisere å bruke kommentarer for bedre organisering, men hvilket alternativ du velger er helt opp til deg.

Lag gjenbrukbare oppsett

Når du bygger et nettsted, er det alltid best å skrive modulære stiler som kan gjenbrukes andre steder, og gjenbrukbare oppsett er øverst på listen over gjenbrukbar kode. Layouter kan lages ved hjelp av flyter eller inline-blokk-elementer, men hva fungerer best og hvorfor?

Spørsmålet om flytende eller inline-blokk-elementer er bedre for sidestruktur er åpent for debatt. Min tilnærming er å bruke inline-blokkelementer for å lage et rutenett eller sidelayout, og deretter bruke float når jeg vil at innholdet skal flyte rundt av dette elementet(som er det flyter ble designet for når du arbeider med bilder). Generelt synes jeg også inline-block-elementer er lettere å jobbe med.

Bruk imidlertid det som fungerer best for deg. Hvis du er mer kjent med en tilnærming enn en annen, så bruk den.

Det er nye CSS-spesifikasjoner på gang – spesielt flex- og rutenettegenskaper – som vil hjelpe deg med å bestemme hvordan du best skal legge ut sidene dine. Hold øye med disse metodene når de begynner å dukke opp.

I praksis

Med en solid forståelse av gjenbrukbare layouter, er det på tide å implementere en på vår stilkonferanseside.

For Styles Conference-nettstedet vil vi lage en tre-kolonne layout ved hjelp av inline-blokk-elementer. Vi vil gjøre dette slik at vi får tre kolonner med samme bredde, eller to kolonner med den totale bredden delt mellom dem som 2/3 for den ene og 1/3 for den andre.

Først skal vi lage klasser som definerer bredden på disse kolonnene. Vi kaller disse to klassene col-1-3 for en tredjedel og col-2-3 for to-tredjedeler. I Grid-delen av main.css-filen vår, la oss gå videre og definere disse klassene og deres tilsvarende bredder.

Col-1-3 (bredde: 33,33 %; ) .col-2-3 (bredde: 66,66 %; )

Vi vil at begge kolonnene skal vises som innebygde blokkelementer. Det må vi også sørge for vertikal justering de har den satt øverst i hver kolonne.

La oss lage to nye velgere som deler visning og vertikaljusterer .

Col-1-3, .col-2-3 (display: inline-block; vertikal-align: top; )

Ta en titt på CSS igjen. Vi opprettet to klassevelgere col-1-3 og col-2-3 atskilt med komma. Et komma på slutten av den første velgeren betyr at den blir fulgt av en annen velger. Etter den andre velgeren kommer åpningen stag, som informerer om at stilbeskrivelsen starter. Ved å bruke komma for å skille velgere, kan vi binde én stil til flere velgere samtidig.

Vi ønsker å sette litt mellomrom mellom kolonnene for å hjelpe til med å bryte opp innholdet. Dette kan gjøres ved å legge til horisontal polstring i hver kolonne.

Dette fungerer bra, men når to søyler er plassert ved siden av hverandre, vil bredden på rommet mellom dem være dobbelt så bredt som rommet fra ytterkanten. For å balansere dette, legger vi alle kolonnene våre i et rutenett og legger til den samme utfyllingen.

La oss bruke rutenettklassen til å definere rutenettet vårt, og deretter gi samme horisontale utfylling til rutenettet, col-1-3 og col-2-3-klassene. Med kommaer som igjen skiller velgerne våre, ser CSS-en vår slik ut:

Rutenett, .col-1-3, .col-2-3 ( polstring-venstre: 15px; polstring-høyre: 15px; )

Når vi setter horisontal polstring, må vi være forsiktige. Husk at i den siste leksjonen laget vi en container med containerklassen for å sentrere alt innholdet vårt på siden med en bredde på 960 piksler. For øyeblikket, hvis vi skulle sette et rutenettelement inne i et beholderelement, ville deres horisontale polstring kollapse sammen og kolonnene våre ville ikke vises proporsjonale med bredden på resten av siden.

Vi gjør dette ved å dele opp det gamle beholderregelsettet i følgende:

Container, .grid ( margin: 0 auto; bredde: 960px; ) .container ( polstring-venstre: 30px; polstring-høyre: 30px; )

Nå vil ethvert element med container- eller rutenettklassen være 960 piksler bredt og plassert i midten av siden. I tillegg har vi beholdt den eksisterende horisontale polstringen for ethvert element med containerklassen ved å flytte det til et nytt, separat regelsett.

Ok, alt det vanskelige med å sette opp nettet er fullført. Nå er det på tide å jobbe med HTML-en vår og se hvordan disse klassene fungerer.

Vi starter med teaserne på hjemmesiden, i index.html-filen, justert i tre kolonner. For øyeblikket er teasere pakket inn i et element med containerklassen. Vi ønsker å endre containerklassen til grid slik at vi kan begynne å plassere kolonner inne.

...

... ... ...

Og til slutt, siden hver av kolonnene våre er et integrert blokkelement, må vi sørge for at vi fjerner eventuelle hvite mellomrom mellom dem. For å gjøre dette bruker vi kommentarer og legger til litt dokumentasjon til hver seksjon for å organisere koden vår bedre.

... ... ...

For å sjekke la vi en kommentar på linje 3 som identifiserer "Høyttalere"-delen som følger den. På slutten av linje 7 åpner vi en kommentar umiddelbart etter den avsluttende taggen. Inne i denne kommentaren, på linje 9, definerer vi følgende seksjon "Tidsplan". Så lukker vi kommentaren i begynnelsen av linje 11, rett før åpningstaggen. En lignende kommentarstruktur vises på linjene 13 til 17 mellom de to elementene, like før "Venue"-delen. Generelt kommenterte vi eventuelle mellomrom mellom kolonnene, samtidig som vi brukte de samme kommentarene for å identifisere seksjonene våre.

Vi har nå et gjenbrukbart tre-kolonne rutenett som støtter forskjellige oppsett, med 1/3 og 2/3 kolonnebredder. Hjemmesiden vår inneholder nå tre kolonner som skiller alle teaserne.

Ris. 5.02. Hjemmeside Styles Conference inkluderer nå en tre-kolonne layout

Demonstrasjon og kildekoden

Nedenfor kan du se nettstedet til Styles Conference i gjeldende tilstand, samt laste ned nettstedets gjeldende kildekode.

Unik elementplassering

Før eller siden vil alle ønske å plassere et element nøyaktig, men float- eller inline-blokk-elementer tillater ikke et slikt triks. Flytende elementer som fjerner et element fra flyten på siden gir ofte uønskede resultater fordi omkringliggende elementer vikler seg rundt det flytende elementet. Inline blokkelementer, med mindre vi lager kolonner, kan være ganske vanskelig når det gjelder å plassere riktig. For situasjoner som dette kan vi bruke posisjonsegenskapen i kombinasjon med blokkens offsetegenskaper.

Posisjonsegenskapen bestemmer hvordan elementet plasseres på siden og om det skal vises i den normale dokumentflyten. Den brukes sammen med blokkens offsetegenskaper topp , høyre , bunn og venstre , som bestemmer nøyaktig hvor elementet skal plasseres ved å flytte elementet i forskjellige retninger.

Som standard er hvert elements posisjonsverdi satt til statisk , noe som betyr at elementet eksisterer i den normale flyten av dokumentet og ikke tar noen egenskaper for å plassere det. Verdien statisk overskrives oftest av verdien relativ eller absolutt , som vi skal se på neste gang.

Relativ posisjonering

Hvis du setter egenskapen posisjon til relativ, kan elementer vises i den normale flyten på siden, og reserverer plass til elementet etter hensikten og forhindrer andre elementer i å flyte rundt det. Det lar deg imidlertid også endre posisjonen til et element ved å bruke forskyvningsegenskaper. Tenk for eksempel på følgende HTML og CSS:

... ... ...

Div ( høyde: 100px; bredde: 100px; ) .offset ( venstre: 20px; posisjon: relativ; topp: 20px; )

Relativ posisjoneringsdemonstrasjon

Her har det andre elementet med klasseoffset sin posisjonsverdi satt til relativ , samt to offsetegenskaper - venstre og topp . Dette opprettholder elementets opprinnelige posisjon, og andre elementer har ikke lov til å flytte inn i det området. I tillegg flytter forskyvningsegenskapene elementet ved å skyve det 20 piksler fra venstre og 20 piksler fra toppen av den opprinnelige plasseringen.

For relativt plasserte elementer er det viktig å vite at blokkens offsetegenskaper bestemmer hvor elementet skal flyttes, gitt dens opprinnelige posisjon. Så en venstre egenskap med en verdi på 20 piksler skyver faktisk elementet 20 piksler til høyre. En toppegenskap med en verdi på 20px vil da presse elementet ned 20px.

Når vi plasserer et element ved å bruke forskyvningsegenskapene, overlapper elementet elementet under det, i stedet for å skyve det ned slik margin- eller polstringsegenskapene gjør.

Absolutt posisjonering

Den absolutte verdien for posisjonsegenskapen skiller seg fra den relative verdien ved at det absolutt posisjonerte elementet ikke vises i den normale flyten av dokumentet, og den opprinnelige plassen og posisjonen til det absolutt posisjonerte elementet er ikke reservert.

I tillegg beveger absolutt posisjonerte elementer seg i forhold til deres nærmeste relativt posisjonerte overordnede element. Hvis en relativt posisjonert forelder ikke eksisterer, vil et absolutt posisjonert element bli posisjonert i forhold til elementet. Dette er en liten opplysning; la oss ta en titt på hvordan det fungerer i en kode:

...

Seksjon ( posisjon: relativ; ) div (posisjon: absolutt; høyre: 20px; topp: 20px; )

Absolutt posisjoneringsdemonstrasjon

Dette eksemplet plasserer elementet relativt, men inkluderer ingen forskyvningsegenskaper. Derfor endres ikke dens posisjon. Et element med klasseoffset inkluderer en posisjonsverdi på absolutt. Siden elementet er det nærmeste relativt posisjonerte overordnede elementet til elementet, vil elementet bli posisjonert i forhold til elementet.

For relativt plasserte elementer bestemmer forskyvningsegenskapene i hvilken retning elementet skal flyttes i forhold til seg selv. For absolutt posisjonerte elementer bestemmer forskyvningsegenskapene i hvilken retning elementet skal flyttes i forhold til dets nærmeste relative posisjonerte overordnede.

Som et resultat av høyre- og toppegenskapene vil elementet vises 20 piksler fra høyre og 20 piksler fra toppen innvendig.

Fordi elementet er plassert absolutt, er det ikke plassert i den normale flyten på siden og vil overlappe eventuelle omkringliggende elementer. I tillegg er den opprinnelige posisjonen ikke bevart og andre elementer kan ta denne plassen. Generelt kan det meste av posisjonering skje uten å bruke posisjonsegenskapene og offsetegenskapene, men i noen tilfeller kan de være svært nyttige.

Gjenoppta

Å lære hvordan du plasserer innhold i HTML og CSS er et stort skritt mot å mestre disse språkene. Legg til dette blokkmodell og nå beveger vi oss selvsikkert langs veien for å bli front-end-utviklere.