Flytning af css-blokke. CSS - Positioneringsblokelementer

Ovenfor talte vi om, hvordan du kan placere sideelementer ved at bruge tabeller. Men dette kan også gøres ved hjælp af styles. Blandt stilparametrene er der specielle egenskaber til positionering:

• venstre - for at indstille afstanden i pixels fra venstre kant af vinduet (x-koordinat);
• top - for at indstille afstanden i pixels fra den øverste kant af vinduet (y-koordinat);
• z-indeks - for at angive rækkefølgen, hvori elementer vil overlappe hinanden; dette er en ny dimension, elementer med et større z-indeks vises over elementer med et mindre z-indeks.

Naturligvis skaber brugen af ​​disse tre egenskaber ikke effekten af ​​tredimensionelt rum, men dette er noget mere end en flad overflade. I dette tilfælde taler vi om 2,5-dimensionelt rum.
Ud over koordinategenskaberne har vi brug for positionsegenskaben, som i kombination med venstre og topegenskaberne giver os mulighed for at installere elementer i bestemte positioner af vinduet. Positionsegenskaben kan have tre værdier:

• absolut - de angivne egenskaber til venstre og øverst vil placere elementet i et punkt med x- og y-koordinater i forhold til det øverste venstre hjørne af beholderen (objektet, der indeholder dette element). Hvis de er defineret for et element uden for containeren, vil koordinatoprindelsen være det øverste venstre hjørne af siden. Bemærk, at placeringen af ​​et element ikke afhænger af placeringen af ​​dets tag i HTML-dokumentet;
• relativ - elementet vil blive installeret i overensstemmelse med hvor i kildeteksten det er placeret; denne værdi er indstillet som standard. Hvis et element f.eks. er placeret tre linjer fra begyndelsen af ​​dets valg i teksten i dokumentet, antages positioneringsegenskaben som standard at være relativ, og egenskaberne for venstre og øverste koordinater er sat til nul værdier. Ikke-nul værdier for venstre og øverste egenskaber specificerer skiftet af elementet i forhold til dets oprindelige position;
• statisk - elementet vil blive placeret i en bestemt position i forhold til baggrunden og vil ikke bevæge sig, når du ruller på siden.

Følgende eksempel viser brugen af ​​z-index egenskaben. Selvom billedet i programmets tekst er beskrevet over de andre elementer, flyttes det oven på den første tekst ved at tildele det et indeks med et stort tal. Således frigør brugen af ​​z-index-egenskaben dig fra lænkerne i den naturlige rækkefølge af omtale af elementer i teksten i et HTML-program.

Positionering




nepBbiu positioneret tekst

Ris. 666. Brug af egenskaben i-index giver dig mulighed for at ændre den naturlige rækkefølge af elementer i teksten i et HTML-dokument

Når du placerer elementer, kan det vise sig, at dimensionerne af elementet overstiger dimensionerne af fragmentet (det tildelte område angivet i vores eksempel af taggen). For eksempel passer tekst eller et billede ikke helt ind i det rektangel, der er tildelt det. For dette tilfælde er der den oversvømmede ejendom. Overløbsegenskaben kan have tre værdier:

• ingen (intet) - hvis elementet går ud over fragmentet (den plads, der er tildelt til det), vil det stadig blive vist;
• klip - dele af elementet, der rager ud over fragmentets grænser, vil blive afskåret;
• scroll - rulning vil blive brugt.

Følgende eksempel bruger overløbsejendom for at oprette en rullemekanisme til den første tekst.

Positionering




riepBbiM positioneret tekst

Anden positioneret tekst

Ris. 667. Mekanisme rulletekst, implementeret ved hjælp af overløbsegenskaben

Selvfølgelig blev de grimme sider fra de tidligere tegninger kun lavet for at demonstrere sprogets evne til at placere elementer. Du bestemmer selv, hvilke værktøjer du vil bruge og til hvilket formål på din webside.

Ved at bruge positioneringsegenskaber er det nemt at skabe en tredimensionel effekt til dine etiketter. Ideen er at vise tekster af samme indhold lidt forskudt i forhold til hinanden og farvet i forskellige farver. Prøv at skrive et tilsvarende program som en øvelse. Billedet viser omtrent, hvad der skal ske. Nedenstående billede er en af mulige muligheder program, der skaber en "tredimensionel" inskription.

Ris. 668. Et eksempel på at lave 3D-tekst med ved hjælp af CSS

3d effekt

P (font-family: "sans-serif"; font-size: 96, -color: red)
P. highlight (farve: sølv)
P. skygge (farve: mørkerød)

Volumetrisk tekst"

Volumetrisk tekst

Volumetrisk tekst

Bemærk venligst, at denne metode til at skabe effektive overskrifter er meget mere økonomisk end at bruge grafiske filer med lignende indhold.

Placering af css-blokke er en af de vigtigste stadier layout, fordi det er det, der påvirker webstedets tilpasningsevne eller muligheden for dets implementering i fremtiden (hvis dette øjeblik ikke påkrævet), og har også en væsentlig indflydelse på yderligere skalering af webstedet. Det er ikke ualmindeligt, at "ville-være layoutdesignere" laver sådan et layout, at det i sidste ende er nemmere at smide det væk end at ændre noget, men samtidig kan det se helt i overensstemmelse med layoutet. Denne situation opstår som følge af manglende forståelse for, hvor og hvornår man skal bruge denne eller hin type positionering. I dag vil vi prøve at forstå dette problem. Og så i CSS er der en positionsegenskab. Denne egenskab kan have 5 værdier, men vi vil overveje 4 hovedværdier:

• absolut
• statisk
• i forhold
• fast

Absolut placering af blokke (absolut)

Den første positioneringsmetode på vores liste er absolut. Efter aftale af denne ejendom, bliver blokken sin egen enhed, og resten af ​​sideelementerne påvirker ikke dens placering, og den påvirker heller ikke andre elementer. Blokstørrelsen bestemmes af egenskaberne for bredde og højde, og placeringen på siden bestemmes af de øverste egenskaber. venstre, højre og nederst disse parametre angiver polstringen fra den øverste, venstre, højre og nederste kant. Hvis blokken ikke har et overordnet element, og også hvis placeringen af ​​det overordnede element er andet end statisk, så angiver egenskaberne for top, venstre, bund, højre indrykningerne fra begyndelsen af ​​siden, ellers fra kanterne af overordnet element.

Oftere denne type positionering bruges, når en blok skal presses til højre eller nederste kant. Lad os overveje dette layout.

For nemheds skyld blev blokkene fremhævet med en flerfarvet ramme. Markup'et vil se sådan ud:

XHTML

Relation ( position: relativ; ) .yellow ( position: absolut; højre: 10px; bund: 10px; )

Relation stilling: relativ; Gul position: absolut; højre: 10px; bund: 10px;

I dette eksempel brugte vi egenskaberne til højre og nederst til at indstille offset fra højre og nederste kant. Disse egenskabsværdier svarer til værdierne øverst: Elementhøjde - 10px og venstre: Elementbredde - 10px.

Også absolut positionering bruges nogle gange, når det er nødvendigt at "påvirke" et element på et andet.

Statisk positionering (statisk)

Den mest almindelige type positionering, der forekommer på hver side og normalt indstilles til de fleste elementer, er statisk, skrevet i css som statisk. For de fleste HTML tags givet værdi er defineret som standard dvs. hvis position ikke er eksplicit angivet, vil værdien være statisk. Med dette arrangement er elementerne linet op under hinanden, og koordinaterne i vinduet for hvert element afhænger af de nærmeste elementer med position: statisk eller position: relativ. Egenskaberne øverst, venstre, højre og nederst vil ikke fungere med denne positionering; placeringen ændres pga margin egenskaber.

Relativ positionering

Denne type positionering minder meget om statisk positionering, bortset fra at elementets position kan ændres af egenskaberne top, venstre, højre, bund og margin.

Fast positionering

Fast positionering svarer til absolut positionering med hensyn til hvordan koordinater er angivet, men placeringen beregnes ikke relativt HTML-sider, men i forhold til browservinduet, dvs. med toppen: 10px-egenskaben, vil du indstille topmargenen til at være 10px FRA BROWSER-VINDUET, og uanset hvilket scroll-niveau du er på, vil dette element altid følge din skærm.

Anvendes typisk til navigationselementer, så brugeren altid kan se vigtig information eller links til interessante sider.

Vlad Merzhevich

Positionering er positionen af ​​et element i et koordinatsystem. Der er fire typer positionering: normal, absolut, fast og relativ. Afhængigt af typen, som indstilles gennem positionsegenskaben, ændres koordinatsystemet også.

Takket være kombinationen af ​​egenskaberne position , venstre , top , højre og bund kan et element overlejres på hinanden, vises på et punkt med bestemte koordinater, fastgjort på et bestemt sted, bestemme positionen af ​​et element i forhold til et andet, osv. Ligner andre CSS-egenskaber Positioneringskontrol er tilgængelig via scripts. Således kan du dynamisk ændre elementernes placering uden at genindlæse siden, skabe animation og forskellige effekter.

Normal positionering

Hvis et elements positionsegenskab ikke er angivet, eller dets værdi er statisk , gengives elementet i dokumentstrømmen som normalt. Med andre ord vises elementer på siden i den rækkefølge, de vises i HTML-kildekoden.

Egenskaberne venstre , top , højre og nederst ignoreres, hvis de er defineret.

Absolut positionering

Med absolut positionering eksisterer elementet ikke i dokumentflowet, og dets position indstilles i forhold til browserens kanter. Du kan indstille denne type gennem den absolutte værdi af positionsegenskaben. Koordinaterne er specificeret i forhold til kanterne af browservinduet, kaldet det "synlige område" (fig. 3.42).

Ris. 3,42. Venstre, højre, top og bund egenskabsværdier for absolut positionering

Tilstanden er karakteriseret ved følgende funktioner.

• Lagets bredde, medmindre det udtrykkeligt er angivet, er lig med bredden af ​​indholdet plus margen-, kant- og udfyldningsværdierne.
• Laget ændrer ikke sin udgangsposition hvis den ikke har egenskaberne højre, venstre, top og bund.
• Egenskaberne til venstre og øverst har forrang over egenskaberne til højre og nederst. Hvis venstre og højre modsiger hinanden, så ignoreres værdien af ​​højre. Det samme gælder for bunden.
• Hvis venstre er sat til en negativ værdi, vil laget gå ud over venstre kant af browseren, og rullepanelet vises ikke. Dette er en måde at skjule et element på. Det samme gælder for den øverste egenskab, kun laget vil gå ud over den øverste kant.
• Hvis venstre indstilles værdien mere bredde synligt område eller angiv højre med en negativ værdi, den vandret stribe rulle. En lignende regel fungerer med top , men vi vil tale om lodret stribe rulle.
• Samtidig danner de angivne venstre og højre egenskaber lagets bredde, men kun hvis bredde ikke er angivet. Når du tilføjer egenskaben bredde, vil den rigtige værdi blive ignoreret. Det samme vil ske med højden af ​​laget, kun egenskaberne top, bund og højde er involveret.
• Et absolut positioneret element bevæger sig med dokumentet, mens det ruller.

Egenskaben position, sat til absolut, kan bruges til at skabe en rammeeffekt. Ud over den absolutte positionering af elementer skal du tildele overløbsegenskaben værdien auto . Derefter, når indholdet overstiger højden af ​​det synlige område, vises en rullepanel. Højden og bredden af ​​"rammerne" genereres automatisk af samtidig brug egenskaber venstre, højre for bredde og top, bund for højde (eksempel 3.31).

Eksempel 3.31. Oprettelse af en analog af rammer

Absolut positioneringstekst ( margin: 0; ) #sidebar, #content (position: absolut; ) #sidebar, #content ( overflow: auto; polstring: 10px; ) #header ( højde: 80px; /* Laghøjde */ baggrund: #FEDFC0; border-bottom: 2px solid #7B5427; ) #header h1 (polstring: 20px; margin: 0; ) #sidebar (bredde: 150px; baggrund: #ECF5E4; kant-højre: 1px solid #231F20; top: 82px ; /* Afstand fra den øverste kant */ bund: 0; /* Afstand fra bunden */ ) #content ( top: 82px; /* Afstand fra den øverste kant */ venstre: 170px; /* Afstand fra venstre kant */ nederst: 0 ; højre: 0; ) Pilaf af verdens folk

Pilaf i Fergana stil

Usbekisk pilaf

Sibirisk pilaf

italiensk pilaf

Estisk pilaf

Pilaf i amerikansk stil

pilaf i indisk stil

Pilaf i Fergana stil

Læg kødet skåret i stykker i en gryde og steg det, indtil der dannes en skorpe. Steg løget, hakket i ringe, sammen med kødet, indtil det er rødligt, tilsæt derefter gulerødderne, skåret i strimler. Tilsæt halvdelen af ​​saltet, bland det hele og steg til gulerødderne bliver gyldenbrune. Hæld derefter halvdelen af ​​den nødvendige mængde vand og lad det koge.

Dæk risene i et jævnt lag, skru op for varmen og hæld straks vand i, så det dækker risene med 1-1,5 cm. Så snart vandet er fordampet, brug en hulske til at samle pilafen i en bunke mod midten , gennembore det med en pind flere steder, så vandet på overfladen, gik til bunden. Dæk derefter pilafen til og lad den hvile i 20-25 minutter.

Bland den færdige pilaf grundigt, kom over i et stort fad, og læg kødet ovenpå.

Resultat dette eksempel vist i fig. 3,43. Overskriftslaget gengives i strømmen som normalt, og sidebjælken og indholdslagene er placeret absolut.

Ris. 3,43. Anvendelse af absolut positionering

I IE6 kan absolut placerede elementer ikke have venstre , højre og top , bund egenskaber samtidigt.

Absolut positionering bruges også til at skabe forskellige effekter for eksempel værktøjstip til billeder. I modsætning til titel attribut tag som også viser værktøjstip-teksten, gennem typografier kan du styre den type tekst, der vises ved hjælp af scriptet.

Først, lad os skabe tomt lag med identifikatoren floatTip og definer dens stil. Der skal kræves tre stilegenskaber - position med værdien absolut , visning med værdien ingen skjuler laget, og bredde angiver lagets bredde med et værktøjstip. De resterende egenskaber bruges på opfordring fra udvikleren og er beregnet til at ændre lagets design (eksempel 3.32).

Eksempel 3.32. Værktøjstip stil

#floatTip ( position: absolut; /* Absolut positionering */ bredde: 250px; /* Blokbredde */ display: ingen; /* Skjuler fra display */ kant: 1px solid #000; /* Rammeparametre */ polstring: 5px ; /* Marginer omkring tekst */ font-family: sans-serif; /* Serif font */ font-size: 9pt; /* Skriftstørrelse */ farve: #333; /* Tekstfarve */ baggrund: #ECF5E4; /* Baggrundsfarve */ )

Selve scriptet består af to funktioner - moveTip() sporer musebevægelser og ændrer lagets position i overensstemmelse med markørkoordinaterne, og toolTip() styrer lagets synlighed og viser den ønskede tekst i det (eksempel 3.33).

Eksempel 3.33. Layer output script

Document.onmousemove = moveTip; funktion moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Layer width // For IE browser if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // For andre browsere ) else ( x = e.pageX; // X-koordinat for markøren y = e.pageY; // Y-koordinat for markøren ) // Vis laget til højre 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 nemheds skyld og alsidighed bør scriptet placeres i separat fil og tilslut den via taggets src-attribut. Den endelige kode er vist i eksempel 3.34.

Eksempel 3.34. Oprettelse af et værktøjstip

Værktøjstip #floatTip (position: absolut; width: 250px; display: ingen; kant: 1px solid #000; polstring: 5px; font-family: sans-serif; font-size: 9pt; farve: #333; baggrund: # ECF5E4 ; opacitet: 0,85; /* Laggennemsigtighed */ )

" + "Objektiv: Canon EF 24-105 f/4L IS USM
" + "Flash: Canon Speedlite 580 EX
" + "Lukkerhastighed: 1/125
Blænde: 5,6")" onmouseout="toolTip()" />

Resultatet af dette eksempel er vist i fig. 3,44. Bemærk venligst, at tekstombrydning, når du kalder toolTip()-funktionen er lavet for at lette opfattelsen og har JavaScript syntaks. I Safari virker scriptet nogle gange ikke, når du ombryder tekst, i så fald skal teksten skrives på én linje. En CSS3-opacitetsegenskab er blevet tilføjet til stilarter, som tilføjer en let gennemsigtighed til laget. Denne egenskab er ikke understøttet i IE før version 9.0.

Ris. 3,44. Værktøjstip gengivet ved hjælp af JavaScript

Fast position

Den faste position af et lag er specificeret af den faste værdi af positionsegenskaben og svarer i effekt til absolut positionering. Men i modsætning til den binder den sig til det punkt på skærmen, der er angivet af egenskaberne venstre , top , højre og nederst og ændrer ikke sin position, når man ruller på websiden. En anden forskel fra absolut er, at når et fast lag går ud over det synlige område til højre eller under det, vises der ingen rullebjælker.

Denne type positionering bruges til at skabe menuer, faner, overskrifter, generelt alle elementer, der skal være fastgjort på siden og altid være synlige for den besøgende. Eksempel 3.35 viser tilføjelse af en sidefod, der forbliver på ét sted uanset mængden af ​​information på webstedet.

Eksempel 3.35. Fast kælder

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Fixed footer BODY ( margin-bottom: 50px; ) #footer ( position: fixed; /* Fixed position */ left: 0; bottom: 0; /* Nederste venstre hjørne */ polstring: 10px; /* Marginer omkring tekst */ baggrund: #39b54a; /* Baggrundsfarve */ farve: #fff; /* Tekstfarve */ bredde: 100%; /* Lagbredde */ ) Alle løvefangstmetoder, der er angivet på webstedet, er teoretiske og baseret på beregningsmetoder. Forfatteren garanterer ikke din sikkerhed ved brug af dem og fralægger sig ethvert ansvar for resultaterne. Husk, en løve er et rovdyr og et farligt dyr! Vlad Merzhevich

Resultatet af eksemplet er vist i fig. 3,45. Fordi den faste sidefod overlejrer og skjuler teksten, er der tilføjet en bundpolstring til BODY-vælgeren. IE6 understøtter ikke den faste værdi, så dette eksempel vil ikke fungere korrekt der.

Ris. 3,45. Sidefod nederst på siden

Relativ positionering

Indstilling af egenskaben position til relativ indstiller elementets position i forhold til dets oprindelige placering. Tilføjelse af egenskaberne venstre , top , højre og nederst ændrer elementets position og flytter det til den ene eller anden side fra dets oprindelige placering. En positiv venstreværdi angiver et skift til højre fra elementets venstre kant, en negativ værdi angiver et skift til venstre. En positiv værdi af top angiver en nedadgående forskydning af elementet (fig. 3.46), en negativ værdi angiver en opadgående forskydning.

Ris. 3,46. Venstre og øverste egenskabsværdier for relativ positionering

De nederste og højre egenskaber har den modsatte effekt. Med en positiv værdi flytter højre elementet til venstre for dets højre kant, med en negativ værdi flytter det til højre (fig. 3.47). En positiv bundværdi flytter elementet op, en negativ bundværdi flytter det ned.

Ris. 3,47. Højre og nederste egenskabsværdier for relativ positionering

Relativ positionering er karakteriseret ved følgende funktioner.

• Denne type positionering gælder ikke for tabelelementer som celler, rækker, kolonner osv.
• Når et element forskydes i forhold til dets oprindelige position, forbliver den plads, som elementet optog, tom og udfyldes ikke af elementerne under eller over det.

Eksempel 3.36 viser overskriftstekst, der flyttes ned for at give den en anden skrivestil.

Eksempel 3.36. Tekst titel

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Overskrift H1 ( skrifttype: fed 2em Arial, Tahome, sans-serif; /* Skrifttypeindstillinger */ farve: #fff; baggrund: #375D4C; polstring: 0 10px; ) H1 SPAN (position: relativ; /* Relativ positionering */ top: 0,3em; /* Flyt ned */ ) Az og bøge af skrifttypevidenskab

En skrifttype er et middel til at udtrykke design, ikke en form for banal læsning.

Resultatet af dette eksempel er vist i fig. 3,48.

Ris. 3,48. Skift tekst i forhold til dens oprindelige position

Indlejrede lag

Som regel relativ positionering i sig selv bruges ikke ofte, da der er en række egenskaber, der stort set udfører den samme rolle, for eksempel den samme margin . Men kombinationen forskellige typer Placering for indlejrede lag er en af ​​de praktiske og praktiske layoutteknikker. Hvis du sætter relativ for det overordnede element og absolut for barnet, så ændres koordinatsystemet og positionen barn element i dette tilfælde er det angivet i forhold til dets forælder (fig. 3.49).

Ris. 3,49. Venstre, højre, øverste og nederste egenskabsværdier i indlejrede lag

Koordinater tælles fra den inderste kant af grænsen; feltværdier tages ikke i betragtning. Følgende eksempel placerer tekst i det nederste højre hjørne af laget nær grænsen og ignorerer udfyldningsegenskaben.

Tekst ... ...

Ingen af ​​disse muligheder er perfekte, men de er nyttige. Jeg er tilbøjelig til at bruge kommentarer til bedre organisering, men hvilken mulighed du vælger er helt op til dig.

Opret genbrugelige layouts

Når du bygger et websted, er det altid bedst at skrive modulære stilarter, der kan genbruges andre steder, og genanvendelige layouts er øverst på listen over genbrugelig kode. Layouts kan laves ved hjælp af float eller inline-blok-elementer, men hvad fungerer bedst og hvorfor?

Spørgsmålet om, hvorvidt float- eller inline-blokelementer er bedre til sidestruktur, er åbent for debat. Min tilgang er at bruge inline-blok-elementer til at skabe et gitter eller sidelayout og derefter bruge float, når jeg vil have indholdet til at flyde rundt af dette element(hvilket er det, som flydere er designet til, når man arbejder med billeder). Generelt synes jeg også, at inline-blok-elementer er nemmere at arbejde med.

Brug dog det, der virker bedst for dig. Hvis du er mere fortrolig med én tilgang end en anden, så brug den.

Der er nye CSS-specifikationer på vej - specifikt flex- og grid-egenskaber - som vil hjælpe dig med at beslutte, hvordan du bedst lægger op til dine sider. Hold øje med disse metoder, når de begynder at dukke op.

På praksis

Med en solid forståelse af genanvendelige layouts er det tid til at implementere et på vores Styles Conference-websted.

Til webstedet Styles Conference vil vi oprette et layout med tre kolonner ved hjælp af inline-blok-elementer. Vi vil gøre dette, så vi får tre kolonner af samme bredde, eller to kolonner med den samlede bredde delt mellem dem som 2/3 for den ene og 1/3 for den anden.

Først vil vi oprette klasser, der definerer bredden af ​​disse kolonner. Vi kalder disse to klasser for col-1-3 for en tredjedel og col-2-3 for to tredjedele. I Grid-sektionen i vores main.css-fil, lad os gå videre og definere disse klasser og deres tilsvarende bredder.

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

Vi ønsker, at begge kolonner skal vises som inline-blokelementer. Det skal vi også sørge for lodret justering de har det sat øverst i hver kolonne.

Lad os oprette to nye vælgere, der deler visning og lodret justere .

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

Tag et kig på CSS igen. Vi oprettede to klassevælgere col-1-3 og col-2-3 adskilt af et komma. Et komma i slutningen af ​​den første vælger betyder, at den efterfølges af en anden vælger. Efter den anden vælger kommer åbningen bøjle, som informerer om, at stilbeskrivelsen starter. Ved at bruge et komma til at adskille vælgere, kan vi binde en stil til flere vælgere på samme tid.

Vi ønsker at sætte lidt mellemrum mellem kolonnerne for at hjælpe med at opdele indholdet. Dette kan gøres ved at tilføje vandret polstring til hver kolonne.

Dette fungerer godt, men når to søjler er placeret ved siden af ​​hinanden, vil bredden af ​​mellemrummet mellem dem være dobbelt så bredt som rummet fra yderkanten. For at afbalancere dette, sætter vi alle vores kolonner i et gitter og tilføjer den samme polstring til det.

Lad os bruge gitterklassen til at definere vores gitter, og derefter give den samme vandrette polstring til gitteret, col-1-3 og col-2-3 klasserne. Med kommaer, der igen adskiller vores vælgere, ser vores CSS således ud:

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

Når vi indstiller vandret polstring, skal vi være forsigtige. Husk, at vi i sidste lektion oprettede en container med containerklassen for at centrere alt vores indhold på siden med en bredde på 960 pixels. I øjeblikket, hvis vi skulle sætte et gitterelement inde i et containerelement, ville deres vandrette polstring kollapse sammen, og vores kolonner ville ikke fremstå proportional med bredden af ​​resten af ​​siden.

Vi gør dette ved at opdele det gamle containerregelsæt i følgende:

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

Nu vil ethvert element med container- eller gitterklassen være 960 pixels bredt og placeret i midten af ​​siden. Derudover har vi bibeholdt den eksisterende vandrette polstring for ethvert element med containerklassen ved at flytte det til et nyt, separat regelsæt.

Okay, al den svære del af opsætningen af ​​nettet er fuldført. Nu er det tid til at arbejde med vores HTML og se, hvordan disse klasser fungerer.

Vi starter med teaserne på hjemmesiden, i filen index.html, justeret i tre kolonner. I øjeblikket er teasere pakket ind i et element med containerklassen. Vi vil ændre containerklassen til gitter, så vi kan begynde at placere kolonner inde.

...

... ... ...

Og endelig, da hver af vores kolonner er et inline-blokelement, skal vi sørge for, at vi fjerner ethvert hvidt mellemrum mellem dem. For at gøre dette bruger vi kommentarer og tilføjer noget dokumentation til hver sektion for bedre at organisere vores kode.

... ... ...

For at kontrollere efterlod vi en kommentar på linje 3, der identificerede afsnittet "Højttalere", der følger efter den. I slutningen af ​​linje 7 åbner vi en kommentar umiddelbart efter det afsluttende tag. Inde i denne kommentar definerer vi på linje 9 det følgende afsnit "Tidsplan". Så lukker vi kommentaren i begyndelsen af ​​linje 11, lige før åbningstagget. En lignende kommentarstruktur vises på linje 13 til 17 mellem de to elementer, lige før afsnittet "Venue". Generelt kommenterede vi ethvert potentielt hvidt mellemrum mellem kolonner, mens vi samtidig brugte de samme kommentarer til at identificere vores sektioner.

Vi har nu et genanvendeligt tre-søjlet gitter, der understøtter forskellige layouts, ved hjælp af 1/3 og 2/3 søjlebredder. Vores hjemmeside indeholder nu tre kolonner, der adskiller alle teasere.

Ris. 5.02. Hjemmeside Styles Conference inkluderer nu et layout med tre kolonner

Demonstration og kilde

Nedenfor kan du se webstedet Styles Conference i dens nuværende tilstand, samt downloade webstedets aktuelle kildekode.

Unik elementpositionering

Før eller siden vil alle gerne placere et element præcist, men float- eller inline-blok-elementer tillader ikke et sådant trick. Flydende elementer, der fjerner et element fra flowet på siden, giver ofte uønskede resultater, fordi omkringliggende elementer ombrydes omkring det flydende element. Inline blokelementer, medmindre vi opretter kolonner, kan være ret akavet, når det kommer til korrekt placering. Til situationer som denne kan vi bruge positionsegenskaben i kombination med blokkens offset egenskaber.

Egenskaben position bestemmer, hvordan elementet er placeret på siden, og om det vil blive vist i det normale dokumentflow. Det bruges sammen med blokkens offset-egenskaber top , right , bottom og left , som bestemmer præcis hvor elementet skal placeres ved at flytte elementet i forskellige retninger.

Som standard er hvert elements positionsværdi sat til statisk , hvilket betyder, at elementet eksisterer i dokumentets normale flow og ikke kræver nogen egenskaber for at placere det. Værdien statisk overskrives oftest af værdien relativ eller absolut , som vi skal se på næste gang.

Relativ positionering

Hvis du indstiller egenskaben position til relativ, kan elementer vises i det normale flow på siden, og reservere plads til elementet efter hensigten og forhindre andre elementer i at flyde rundt om det. Det giver dig dog også mulighed for at ændre et elements position ved hjælp af offset-egenskaber. Overvej f.eks. følgende HTML og CSS:

... ... ...

Div (højde: 100px; bredde: 100px; ) .offset (venstre: 20px; position: relativ; top: 20px; )

Demonstration af relativ positionering

Her har det andet element med klasseoffset sin positionsværdi sat til relativ , samt to offsetegenskaber - venstre og top . Dette bevarer elementets oprindelige position, og andre elementer må ikke bevæge sig ind i dette område. Derudover flytter forskydningsegenskaberne elementet ved at skubbe det 20 pixels fra venstre og 20 pixels fra toppen af ​​den oprindelige placering.

For relativt placerede elementer er det vigtigt at vide, at blokkens offset-egenskaber bestemmer, hvor elementet vil blive flyttet, givet dets oprindelige position. Så en venstre egenskab med en værdi på 20 pixels skubber faktisk elementet 20 pixels til højre. En topegenskab med en værdi på 20px vil derefter skubbe elementet 20px ned.

Når vi placerer et element ved hjælp af offset-egenskaberne, overlapper elementet elementet under det, i stedet for at skubbe det ned, som margen- eller polstringsegenskaberne gør.

Absolut positionering

Den absolutte værdi for positionsegenskaben adskiller sig fra den relative værdi ved, at det absolut positionerede element ikke vises i dokumentets normale flow, og den oprindelige plads og position for det absolut positionerede element er ikke reserveret.

Derudover bevæger absolut placerede elementer sig i forhold til deres nærmeste relativt placerede overordnede element. Hvis der ikke eksisterer en relativt positioneret forælder, vil det absolut positionerede element blive placeret i forhold til elementet. Dette er et lille stykke information; lad os tage et kig på, hvordan det virker inde i en eller anden kode:

...

Sektion ( position: relativ; ) div ( position: absolut; højre: 20px; top: 20px; )

Absolut positioneringsdemonstration

Dette eksempel placerer elementet relativt, men inkluderer ikke nogen offset-egenskaber. Derfor ændres dens position ikke. Et element med klasseoffset inkluderer en positionsværdi på absolut. Da elementet er det nærmeste relativt placerede moderelement til elementet, vil elementet være placeret i forhold til elementet.

For relativt placerede elementer bestemmer offset-egenskaberne, i hvilken retning elementet vil blive flyttet i forhold til sig selv. For absolut placerede elementer bestemmer offsetegenskaberne, i hvilken retning elementet vil blive flyttet i forhold til dets nærmeste relative positionerede overordnede.

Som et resultat af de højre og øverste egenskaber vil elementet vises 20 pixels fra højre og 20 pixels fra toppen inde.

Fordi elementet er placeret absolut, er det ikke placeret i det normale flow på siden og vil overlappe eventuelle omgivende elementer. Derudover er den oprindelige position ikke bevaret, og andre elementer kan tage denne plads. Generelt kan de fleste positioneringer ske uden brug af positionsegenskaberne og offsetegenskaberne, men i nogle tilfælde kan de være yderst nyttige.

Resumé

At lære at placere indhold i HTML og CSS er et stort skridt i retning af at mestre disse sprog. Føj til dette blok model og nu bevæger vi os selvsikkert ad vejen mod at blive front-end-udviklere.