ganske ofte brukt i utformingen av moderne nettsteder for å lage rutenett og betyr ganske enkelt en slags blokk eller beholder. Det er også mulig å legge andre tagger i den, noe som ikke er mulig med alle blokkelementer, så
praktisk å bruke. Blokker er vanligvis stablet oppå hverandre og settes ikke inn i inline-elementer. HTML innebygde elementer er tekst, og CSS brukes til å style den.
Gitt en innholdsbredde, er den totale blokkbredden summen av høyre og venstre utfylling, margin, kantlinje og breddeverdier. Ved en gitt høyde - fra topp og bunn polstring, marginer, grenser og høyde. Tekst i blokkelementer er venstrejustert som standard. Hvis en av dem inneholder inline-elementer sammen med blokk-elementer, opprettes en anonym blokk rundt inline-elementene. Standardstilen vil bli brukt på den. Den vil også arve den spesifiserte stilen som er tildelt den overordnede.
Dokumentflyt Flow refererer til rekkefølgen sideelementer vises i, bestemt av egenskapene spesifisert i CSS. I dette tilfellet er blokker som standard stilt opp fra topp til bunn, og hvis det ikke er nok plass, flyttes inline-tagger til en ny linje og ordnes fra topp til bunn og fra venstre til høyre. Plasseringen av et element på siden avhenger av dets plassering i koden: jo høyere det er, jo tidligere er det plassert. Hvert av blokkelementene ser ut som et rektangel som skyver bort naboene. Du kan endre denne virkemåten ved å bruke spesielle egenskaper. Å justere visse blokker til midten eller sidene av en beholder i CSS kalles posisjonering.
Posisjoneringselementer Plasseringen av blokker kan kontrolleres ved hjelp av absolutt og relativ posisjonering. Posisjonering brukes til å gi store deler av en side en bestemt plassering, for å lage komplekse grensesnitt, popup-vinduer og dekorative elementer. Hovedegenskapen som brukes til å plassere blokker i CSS er posisjon. Den har fire hovedegenskaper:
slektning; absolutt; fikset; statisk.
Med deres hjelp kan du bytte layoutmodus ved å spesifisere en av fire parametere: topp, høyre, bunn eller venstre. Det er også en egenskap for å bestille lag - z-indeks. Plassering med den statiske egenskapen brukes vanligvis ikke fordi den angir standardposisjonering av blokker. Derfor påvirker ikke bruken av noen parameter det på noen måte. De tre andre egenskapene brukes til layout: relativ, absolutt, fast.
Relativ posisjonering Relativ plassering av blokker i CSS, dvs. posisjonen: relativ egenskap, betyr at et element kan flyttes og dets opprinnelige posisjon endres. En slik blokk forblir fortsatt i bekken. Det er faktisk ikke han selv som er fordrevet, men hans kopi. Eiendomsverdier er satt til å indikere nøyaktig hvor mye blokken vil bevege seg i en eller annen retning. De måles oftest i piksler. Men det er akseptabelt å bruke andre enheter.
Bruke egenskaper for relativ posisjonering Den øverste egenskapen flytter en kopi av en bestemt blokk opp eller ned med antallet piksler spesifisert i egenskapen. Når du bruker den, forblir elementer plassert under eller over på sine steder, siden blokken som forskyves faktisk heller ikke beveger seg noe sted.
Den nederste egenskapen flytter blokken i motsatt retning til den øverste egenskapen. En positiv verdi hjelper med å flytte den opp, og en negativ verdi hjelper med å flytte den ned. Høyre og venstre egenskaper flytter elementet til henholdsvis høyre og venstre. Ved å kombinere dem alle kan du angi den nøyaktige plasseringen av blokken på siden, flytte den langs de vertikale og horisontale koordinataksene. Hvis du øker innrykkene, vil de ikke bli beregnet fra kanten av selve blokken, men fra kopiforskyvningen til siden.
Absolutt posisjonering Den absolutte posisjoneringen av blokker i CSS er spesifisert av verdien til egenskapen absolutt posisjon. Et element som er plassert faller absolutt ut av dokumentflyten, og dets plass blir tatt av naboblokker. Bredden til et slikt element strekkes avhengig av innholdet, og det kan forskyves ved å angi visse verdier for egenskapene topp, venstre, høyre, bunn. Absolutt plassering av blokker i CSS er nyttig for overskrifter. Men posisjon: absolutt fungerer ikke bare for blokkelementer, men også for innebygde elementer.
Justere elementer til midten Et plassert absolutt inline-element vil oppføre seg nøyaktig på samme måte som et inline-element. Derfor kan posisjonering også brukes til å kontrollere tekst i CSS. Du kan bruke noen nye egenskaper på den, for eksempel endre høyden og bredden. Sentrering og vertikal justering i CSS bruker en kombinasjon av flere egenskaper. Kontrollerer den vertikale justeringen av toppegenskapen. Hvis du vil sentrere en blokk i CSS, bør hovedbeholderen være relativt posisjonert, og det justerte elementet bør være absolutt posisjonert. Beholderen må angi den øverste egenskapen: 50%, og for å flytte elementet med halvparten av sin egen høyde, bruk translate-egenskapen med verdien "0, -50%". Absolutt posisjonerte elementer kan separeres i en ny type, siden egenskaper som ikke er tilgjengelige for andre typer posisjonering brukes på dem.
Plassering i forhold til øvre venstre hjørne av nettleseren Egenskapene venstre, topp, høyre og bunn fungerer annerledes på absolutt og relativt plasserte elementer. For relative elementer setter disse egenskapene forskyvningen i forhold til hvor elementet er plassert. Absolutt plasserte opptar en plass i forhold til et spesifikt koordinatsystem knyttet til størrelsen på nettleservinduet. Utgangspunktene for dette systemet er hjørnene av vinduet. Når du bruker egenskapen til venstre, vil innrykk telles fra venstre side av nettleseren, men det vil ikke være noen rullefelt. Toppegenskapen, når den er plassert absolutt, spesifiserer forskyvningen fra toppen av nettleseren til toppen av elementet den brukes på. Ved å kombinere begge egenskapene kan elementet flyttes i forhold til øvre venstre hjørne av nettleseren.
Plassering i forhold til øvre høyre hjørne av nettleseren På samme måte, ved å bruke egenskapene til høyre og øverst, kan du trykke et element til høyre side av nettleservinduet og endre dets vertikale posisjon ved å flytte det til øvre høyre hjørne. Hvis den riktige egenskapen er satt til en negativ verdi, vil blokken bevege seg utenfor vindusgrensen. Etter dette skal et rullefelt vises. For å flytte et element ned, bruk egenskapen nederst. Den spesifiserer innrykk fra bunnkanten av nettleservinduet til bunnen av blokken. Hvis verdien er negativ, vises også et rullefelt, ettersom elementet flyttes utover den nederste kanten av nettleservinduet.
Koordinatsystem for absolutt posisjonering Som standard er alle elementer som er gitt absolutt posisjonering knyttet til ett koordinatsystem - nettleservinduet. Men det kan endres ved å gi et overordnet element relativ posisjonering. Deretter vil barneblokken endre plassering avhengig av forelder. Hvis det blant de overordnede elementene er flere med relativ plassering, utføres tellingen fra den nærmeste av dem. I dette tilfellet vil standardposisjoneringen være fra det som er spesifisert i body-taggen.
Referansepunkt for et absolutt plassert element Før et element ble gitt en absolutt posisjonering, ble det på et sted kalt en implisitt opprinnelse. Hvis en slik blokk ikke får egenskaper, vil den ikke flytte seg. Du kan flytte den ved å angi margegenskapen. Det vil fungere på samme måte som posisjoneringsegenskapene. Hvis du ikke definerer verdien av den venstre egenskapen og alle de andre, vil den være lik auto. Du kan også bruke auto for å returnere elementer til de opprinnelige stedene.
Fast posisjonering En annen verdi er fast. Posisjonsegenskapen forankrer et element på et bestemt sted. Fast posisjonering brukes ofte for å lage menyer i CSS. Det ligner absolutt, men den faste blokken faller ut av strømmen. Selv når du ruller siden, vil et slikt element forbli på plass, så det er praktisk å bruke det til å lage en meny i CSS. Startpunktet vil være knyttet til nettleservinduet. Hvis det er flere posisjonerte blokker, brukes z-index-egenskapen til å bestille dem. Med dens hjelp kan du overlappe relative blokker med absolutte blokker hvis du gir dem den tilsvarende indeksen, uttrykt som et heltall. Jo større den er, jo høyere blir blokken.
Noe av det beste med CSS er at stiler gir oss muligheten til å plassere innhold og elementer på en side på nesten alle tenkelige måter. Dette legger struktur til designet vårt og bidrar til å gjøre innholdet mer visuelt.
Det er noen få forskjellige typer posisjonering i CSS, har hver av disse typene sitt eget omfang. I dette kapittelet skal vi se på noen forskjellige brukstilfeller – lage gjenbrukbare oppsett og unikt posisjonere engangselementer – og beskrive noen få metoder for å gjøre det.
Plassering via flottør En måte å plassere elementer på en side på er gjennom flyteegenskapen. Denne egenskapen er ganske allsidig og kan brukes på mange forskjellige måter.
I hovedsak tar float-egenskapen et element, fjerner det fra den normale flyten på siden og plasserer det til venstre eller høyre for det overordnede elementet. Alle andre elementer på siden vil vikle rundt et slikt element. For eksempel vil avsnitt vikle rundt et bilde hvis elementet
Når float-egenskapen brukes på flere elementer samtidig, gjør det mulig å lage et oppsett med flytende elementer ved siden av eller overfor hverandre, som vist i et flerkolonneoppsett.
Float-egenskapen har flere verdier, de to mest populære er venstre og høyre, som lar elementet flyte til venstre eller høyre for det overordnede.
Img ( flyte: venstre;)
flyte i praksis La oss lage et generelt sideoppsett med en topptekst øverst, to kolonner i midten og en bunntekst nederst. Ideelt sett bør denne siden være merket med elementer
,
, Og , som beskrevet i leksjon 2, «Introduksjon av HTML». Inne i et element HTML kan se slik ut:
Demonstrasjon av en layout uten flyte Her er elementene Og er blokkbaserte, så de stables oppå hverandre som standard. Vi ønsker imidlertid at disse elementene skal sitte side om side. Ved å sette flyte til som venstre , og for som høyre , kan vi plassere dem som to kolonner overfor hverandre. Vår CSS skal se slik ut:
Seksjon ( flyte: venstre; ) til side ( flyte: høyre; )
Som referanse er flytende elementer plassert langs kanten av det overordnede elementet. Hvis det ikke er noen overordnet, vil det flytende elementet plasseres langs kanten av siden.
Når vi setter et element til å flyte, fjerner vi det fra den normale flyten til HTML-dokumentet. Dette fører til at standardbredden til det elementet blir bredden på innholdet. Noen ganger, for eksempel når vi lager kolonner for en gjenbrukbar layout, er denne oppførselen uønsket. Dette kan fikses ved å legge til en width-egenskap med en fast verdi for hver kolonne. I tillegg, for å forhindre at flytende elementer berører hverandre, slik at innholdet i ett element sitter ved siden av et annet, kan vi bruke margin-egenskapen til å angi avstanden mellom elementene.
Nedenfor utvider vi den forrige kodeblokken ved å legge til en margin og bredde for hver kolonne for bedre å forme ønsket resultat.
Seksjon ( flyte: venstre; margin: 0 1,5 %; bredde: 63 %; ) til side ( flyte: høyre; margin: 0 1,5 %; bredde: 30 %; )
Layout demo med flyter float kan endre elementets visningsverdi For et flytende element er det også viktig å forstå at elementet fjernes fra den normale flyten på siden og at elementets standard visningsverdi kan endres. Float-egenskapen er avhengig av at elementets visningsverdi settes til blokk og kan endre elementets standard visningsverdi hvis det ikke allerede er gjengitt som et blokkelement.
For eksempel et element hvis visning er spesifisert som inline , for eksempel inline , ignorerer alle høyde- eller breddeegenskaper. Men hvis du spesifiserer en flyte for et innebygd element, vil visningsverdien endres til blokk, og da kan elementet allerede ta høyde- eller breddeegenskapene.
Når vi flyter et element, må vi være forsiktige med hvordan det påvirker verdien av visningsegenskapen.
For to kolonner kan du sette flytende, en kolonne som venstre og den andre som høyre, men for flere kolonner må vi endre tilnærmingen vår. La oss for eksempel si at vi ønsker å ha en rad med tre kolonner mellom elementene våre Og . Hvis vi kaster elementet vårt og bruk tre elementer , kan HTML-en vår se slik ut:
For å ordne disse tre elementene i en rad med tre kolonner må vi sette flytende for alle elementer som venstre. Vi må også justere bredden tar hensyn til flere kolonner og plasserer dem ved siden av hverandre.
Seksjon ( flyte: venstre; marg: 0 1,5 %; bredde: 30 %; )
Her har vi tre kolonner, alle med lik bredde og marginverdi, og float satt til venstre .
Demonstrasjon av en tre-kolonne layout med flottør Rydding og flyt innhold Float-egenskapen ble opprinnelig designet for å la innhold flyte rundt bilder. Et bilde kan få en flyte og alt innhold rundt det bildet flyter naturlig rundt det. Selv om dette fungerer bra for bilder, var flyteegenskapen egentlig ikke ment å brukes til layout og posisjonering, og har derfor noen fallgruver.
En av disse fallgruvene er at noen ganger ikke de riktige stilene vises på et element som er ved siden av eller er overordnet til et flytende element. Når et element er satt til å flyte, fjernes det fra den normale flyten på siden, og som et resultat kan stilene til elementene rundt det flytende elementet bli negativt påvirket.
Ofte tolkes verdiene til margin- og polstringsegenskapene feil, noe som får dem til å blande seg inn i det flytende elementet. Andre eiendommer kan også bli påvirket.
En annen feil er at uønsket innhold noen ganger begynner å vikle seg rundt flyteelementet. Fjerning av et element fra flyten av dokumentet lar alle elementene rundt det flytende elementet omgå det og ta opp all tilgjengelig plass rundt det flytende elementet, noe som ofte er uønsket.
I vårt forrige eksempel med to kolonner, etter at vi la til en flottør til elementene Og , men før du setter breddeegenskapen til noen av dem, innholdet inne i elementet var plassert mellom to strømlinjeformede elementer over den, og fylte all tilgjengelig plass. Derfor elementet ville være i rommet mellom elementene
Layout demonstrasjon uten flyterydding For å forhindre at innhold vikles rundt flytende elementer, må vi fjerne flyten og returnere siden til normal flyt. Vi skal se på hvordan du fjerner flyter og deretter ta en titt på innholdet.
Rydding av flyter Sletting av en flyte skjer ved å bruke clear-egenskapen, som har flere forskjellige verdier: de mest brukte verdiene er venstre , høyre , og begge .
Div ( klar: venstre; )
Verdien venstre sletter venstre flyter, mens verdien høyre sletter høyre flyter. Verdien både vil imidlertid fjerne venstre og høyre flyter og er ofte det mest ideelle alternativet.
Tilbake til vårt forrige eksempel, hvis vi bruker clear-egenskapen med en verdi av begge på et element , så kan vi rydde flyten. Det er viktig at clear brukes på elementet spesifisert etter de flytende elementene, og ikke før, for å returnere siden til normal flyt.
Bunntekst (slett: begge;)
Layout-demonstrasjon med flyterydding Innhold flyter I stedet for å fjerne flyte, er et annet alternativ å sette innholdet til å flyte. Resultatet blir stort sett det samme, men flyteinnholdet sikrer virkelig at alle stilene våre vises riktig.
For å angi flytende innhold, må flytende elementer være inne i det overordnede elementet, det vil fungere som en beholder, og etterlate flyten av dokumentet helt normal utenfor det. Stilen for dette overordnede elementet er representert av en gruppeklasse, som vist her:
Group::before, .group::after ( innhold: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; )
Det er ikke mye som skjer her, men i hovedsak alt CSS gjør er å fjerne alle flytende elementer inne i gruppeelementet og returnere dokumentet til normal flyt.
Mer spesifikt, ::before og ::after pseudo-elementene, som diskutert i leksjon 4, genererer dynamisk elementer over og under et element med klassegruppe . Disse elementene inkluderer ikke noe innhold og gjengis som tabellelementer, lik blokkelementer. Et dynamisk generert element etter et gruppeelement tømmer flyten inne i gruppeelementet, akkurat som clear gjorde før. Til slutt fjerner gruppeelementet alle flyter som kan vises foran det i tilfelle det er en flyter med verdien venstre eller høyre . Inkludert er også et lite triks som får eldre nettlesere til å spille fint.
Det er mer kode her enn bare clear: both-kommandoen, men den kan være ganske nyttig.
Tatt i betraktning vår sideoppsett med to kolonner, kunne vi pakke inn Og overordnet element. Dette overordnede elementet vil inneholde flytende elementer. Koden vil se slik ut:
Group::before, .group::after ( innhold: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) seksjon ( flyte: venstre ; margin: 0 1,5 %; bredde: 63 %; ) til side ( flyte: høyre; margin: 0 1,5 %; bredde: 30 %; )
Demonstrasjon av en layout med flytende innhold Teknikken som vises her er kjent som "clearfix" og sees ofte på andre nettsteder med klassenavnet clearfix eller jf. Vi valgte å bruke klassenavngruppen fordi den representerer en gruppe elementer og bedre uttrykker innholdet.
Når elementer er satt til å flyte, er det viktig å overvåke hvordan de påvirker sideflyten og sørge for at sideflyten tilbakestilles gjennom sletting eller gjennom flytende innhold som tiltenkt. Ellers kan det å holde oversikt over flyter forårsake mye hodepine, spesielt på sider som inneholder flere rader, hver med flere kolonner.
På praksis La oss gå tilbake til Styles Conference-siden og prøve å legge til flytere til noe innhold.
Først og fremst, før vi bruker float på et element, la oss gi innhold til de float-elementene ved å legge til clearfix i CSS-en vår. I main.css-filen, rett under rutenettstilene våre, legger vi til clearfix under gruppeklassenavnet, akkurat som før. /* ================================================ ====== Clearfix ======= ====================================* / .group::before, .group::after ( innhold: " "; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) Nå som vi kan bruke float, la oss definere det for hoved
innvendig element som venstre og la resten av innholdet i overskriften flyte til høyre.For å gjøre dette, legg til logoklassen til elementet
. Deretter legger vi til en ny stilseksjon i CSS-en vår for hovedoverskriften. I denne delen velger vi elementet med logoklassen og sett flottøren til venstre .
/* ========================================= Hovedoverskrift ======= ===================================== */ .logo ( flyte: venstre; )Mens vi er her, la oss legge til litt mer detaljer til logoen vår. La oss starte med å plassere elementet
I CSS legger vi til en kantlinje langs toppen av logoen vår og litt vertikal polstring slik at logoen kan "puste" fritt.
Logo (border-top: 4px solid #648880; polstring: 40px 0 22px 0; flyte: venstre;)
Siden vi laget elementet
strømlinjeformet, ønsker vi å sette innholdet til å flyte . Nærmeste forelder for er et element så vi legger til en gruppeklasse til den. Dette vil bruke clearfix-stilene vi satte tidligere på den.
Element tar form, så la oss ta en titt på elementet . I likhet med det vi gjorde med , vil vi sette flytende for opphavsretten vår som venstre inne og la alle de andre elementene flyte rundt den til høyre.
I motsetning til elementet Vi skal imidlertid ikke bruke klassen direkte på det flytende elementet. Denne gangen skal vi legge til en klasse til float-elementets overordnede og bruke en unik CSS-velger for å velge elementet og deretter gi det en float .
La oss starte med å legge til den primære bunntekstklassen til elementet . Fordi vi vet at vi vil ha strømlinjeformede elementer inni , så bør vi legge til gruppeklassen mens vi holder på.
Nå som den primære bunntekstklassen er satt på elementet , kan vi bruke denne klassen til å spesifikt velge et element Med bruker CSS . Vi ønsker å gi den en flyte som venstre . Ikke glem å lage en ny seksjon i vår main.css-fil for hovedbunntekststilen.
/* ========================================= Hovedkjeller ====== ===================================== */ .primær-bunntekst liten ( flyte: venstre; ) For å sjekke - her velger vi elementet , som skal være inne i et element med en klasseattributtverdi for primærbunntekst, for eksempel elementet vårt
Til slutt legger vi til litt polstring på toppen og bunnen av elementet. , vil dette hjelpe å skille den litt fra resten av siden. Vi kan gjøre dette direkte ved å bruke den primære bunntekstklassen.
Primær-bunntekst ( padding-bottom: 44px; padding-top: 44px; )
Tatt i betraktning alle disse endringene i elementene Og , må vi sørge for å inkludere dem på hver side, ikke bare index.html-siden.
Ris. 5.01. Bruker flere flyteelementer Og på hovedsiden til Styles Conference arbeide sammen
Posisjonering via inline-blokk I tillegg til å bruke float, er en annen måte vi kan plassere innhold på ved å bruke display-egenskapen i kombinasjon med inline-block-verdien. Inline-block-metoden, som vi skal diskutere senere, er først og fremst nyttig for å legge ut sider eller for å plassere elementer i en linje ved siden av hverandre.
Husk at den innebygde blokkverdien for visningsegenskapen viser elementer i en linje og lar dem ta på seg alle egenskapene til boksmodellen, inkludert høyde , bredde , polstring , kantlinje og marg . Ved å bruke inline-blokk kan vi dra full nytte av blokkmodellen uten å måtte bekymre oss for å fjerne flyter.
inline-blokk i praksis La oss ta en titt på vårt tre-kolonne eksempel fra begynnelsen. Vi begynner med å lagre HTML-koden vår slik:
Nå i stedet for flyte for våre tre elementer vi endrer visningsverdien deres til inline-block , og forlater marginegenskaper og bredden er den samme som før. Som et resultat vil vår CSS se slik ut:
Seksjon (visning: inline-blokk; marg: 0 1,5 %; bredde: 30 %; )
Dessverre er ikke denne koden alene nok til å gjøre trikset og det siste elementet skyves til en ny linje. Husk at fordi inline-blokkelementer vises på en linje ved siden av hverandre, inkluderer de et enkelt mellomrom mellom dem. Når størrelsen på hvert enkelt rom legges til bredden og horisontalmarginverdien til alle elementene i en rad, blir den totale bredden for stor, og skyver ut det siste elementet til en ny linje. For å vise alle elementer på én linje bør du fjerne det hvite mellomrommet mellom hver linje
Demonstrasjon av inline-blokkelementer med plass Fjerne mellomrom mellom inline-blokkelementer Det finnes flere metoder for å fjerne mellomrom mellom inline-blokkelementer, og noen er mer komplekse enn andre. Vi skal fokusere mest på de to enkle metoder , som hver forekommer i HTML.
Den første løsningen er å sette hver nye åpningselement-tag på samme linje som den avsluttende taggen til forrige element . I stedet for å bruke ny linje for hvert element ender vi opp med å starte elementene på samme linje. HTML-koden vår kan se slik ut:
Å skrive inline-block-elementer på denne måten sikrer at det ikke er mellomrom mellom slike elementer i HTML. Derfor vil ikke plassen vises når siden vises.
Demonstrasjon av inline-blokkelementer uten mellomrom En annen metode for å fjerne mellomrom mellom inline-blokkelementer er å åpne en HTML-kommentar umiddelbart etter elementets avsluttende tag. Lukk deretter kommentaren rett før åpningstaggen til neste element. Dette tillater inline-blokk-elementer å starte og slutte på separate linjer i HTML og vil "kommentere ut" eventuelle potensielle mellomrom mellom elementene. Den resulterende koden vil se slik ut:
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 layouter 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-block-elementer for å lage et rutenett eller sidelayout, og deretter bruke en float når jeg vil at innholdet skal flyte rundt elementet (som er det floats ble designet for når jeg jobber 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.
På 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. Vi må også sørge for at deres vertikale justering er satt til toppen av 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 er det en krøllete åpning, som indikerer at stilbeskrivelsen begynner. 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 polstringen.
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. I dette øyeblikket , hvis vi plasserte et element med rutenettklassen inne i et element med containerklassen, ville deres horisontale utfylling legge seg sammen og kolonnene våre ville ikke bli vist i forhold til 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 timene fungerer.
Vi starter med teaserne på hjemmesiden, i index.html-filen, justert i tre kolonner. For øyeblikket er teasere pakket inn i 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". Lukk så kommentaren i begynnelsen av linje 11, rett før åpningstaggen . En lignende kommentarstruktur vises på linje 13 til 17 mellom de to elementene , rett før spillestedseksjonen. 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
Demo og kildekode Nedenfor kan du se Styles Conference-nettstedet i sin nåværende tilstand, og også laste ned kilde nettstedet for øyeblikket.
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. Innebygde blokkelementer, med mindre vi lager kolonner, kan være ganske vanskelige når det kommer til riktig plassering. 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 vanlige 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. Den 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 for det andre elementet
med offset-klassen settes posisjonsverdien til relativ, samt to offset-egenskaper - 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 det absolutt posisjonerte elementet 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 I dette eksemplet er elementet er plassert i forhold til, men inkluderer ikke noen forskyvningsegenskaper. Derfor endres ikke dens posisjon. Element med offset-klassen inkluderer posisjonsverdien som absolutt. Siden elementet
er det nærmeste relativt plasserte overordnede elementet , deretter elementet
vil bli plassert 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
vil vises 20 piksler fra høyre og 20 piksler fra toppen inni
.Siden elementet
plassert absolutt, er den ikke plassert i normal flyt på siden og vil overlappe alle elementer som omgir den. Dessuten startposisjonen
er ikke lagret 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.
Sammendrag Å lære å plassere innhold i HTML og CSS er et stort skritt mot å mestre disse språkene. Legg til dette blokkmodellen og vi er på god vei til å bli front-end-utviklere.
Denne opplæringsartikkelen vil bli viet til et veldig viktig emne, som er relatert til plasseringen av elementer på siden; det vil kreve maksimal oppmerksomhet fra deg. Du vil bli kjent med følgende typer elementplassering: absolutt , slektning , fikset Og statisk .
Posisjonering vil tillate deg å plassere dette eller det elementet på stedet der du trenger det, hensikten med denne artikkelen er å forstå hvilke regler dette skjer, hvilke CSS-egenskaper som må brukes og hvorfor.
Typer elementplassering
Grunnleggende CSS-eiendom Den som lar deg kontrollere plasseringen av elementer på siden er posisjonsegenskapen, den forteller nettleseren hvilken type posisjonering som brukes for elementet ( statisk -statisk slektning -slektning, absolutt – absolutt , eller fikset - fikset).
For å fullt ut forstå hvordan elementer er plassert på en hvilken som helst side, må du studere i detalj alle typer posisjonering. Denne opplæringsartikkelen vil gi deg en slik mulighet; nå vil vi snakke separat om hver type posisjonering og analysere hvordan og i forhold til hva forskyvningen av elementer i dokumentet skjer.
Absolutt posisjonering
Som du la merke til, elementer som har absolutt posisjonering , skilt fra hovedsideflyten , som kan føre til at elementer legges oppå hverandre. En nyanse til arbeider med elementer som har absolutt posisjonering , det er det de er kan ikke være flytende . Flytende elementer kan bare være elementer som har statisk posisjonering (statisk), det vil si den som er satt som standard for elementet. Vi diskuterte metoder for å arbeide med flytende elementer i lærebokartikkelen "".
Relativ posisjonering
Den neste typen posisjonering vi skal se på er relativ posisjonering (stilling: relativ) forskyves (plasseres), eller med andre ord.
La oss hoppe rett til eksemplet, og så snakke om alle nyansene som vil oppstå når man jobber med
</span> Relativ plassering av elementer
statisk
klasse = "slektning" > slektning
klasse = "statisk" > statisk
Så hva vi gjorde i dette eksemplet:
For blokker (elementer ), som har
statisk posisjonering (standard) sett høyden til 50 piksler og bakgrunnsfargen til -
rød .
Vi plasserte et element med relativ posisjonering (posisjon : relativ ), sett høyden til 100 piksler og bakgrunnsfarge grønn . I tillegg ble det antydet at han beveger seg i forhold til sin nåværende posisjon fra toppkanten med 50 piksler, og fra venstre kant med 100 piksler, noe som får dokumentet til å flyte over.
Resultatet av vårt eksempel:
Det er også nødvendig å understreke fra dette eksemplet at i motsetning til absolutt posisjonering andre elementer i dokumentet reagerer på elementer med relativ posisjonering . Til tross for at vi ga nettleseren en kommando for å flytte elementet, reserverte nettleseren plass for elementet, og etterlot en tom plass der elementet i utgangspunktet skulle være før det flyttes.
I praksis trenger du mest sannsynlig ikke å flytte på elementer som har relativ posisjonering . hovedide relativ posisjonering er ikke å flytte et element et sted, men lage en "beholder" for et element som har absolutt posisjonering
. Med andre ord vil nestede elementer ikke forskyves i forhold til kanten av nettleservinduet, men i forhold til dette elementet, som vil ha relativ posisjonering og ligger i hoveddokumenttråden . Vi vil vurdere dette punktet mer detaljert senere i denne opplæringsartikkelen.
Fast posisjonering
Tredje typen posisjonering vi skal se på er fast posisjonering element beveger seg i forhold til en gitt kant av nettleservinduet . Særpreget trekk Denne posisjonen er den når du ruller siden elementet forblir på ett sted , det vil si grovt sett ruller den sammen med siden (elementet er fikset).
Jeg tror at mens du reiser på Internett, har du ofte kommet over navigasjonsmenyer, sidefelt eller til og med "toppen på siden"-knapper som er festet på ett sted. Alt dette blir mulig takket være fast posisjonering .
La oss se på et eksempel der vi skal designe en fast sidebar.
</span> Fast elementplassering
fikset
klasse = "beholder" >
La oss se på hva vi gjorde i dette eksemplet:
Sett for elementer Og høyde lik 100 %, vil dette tillate oss å angi høyden i prosent for sidefeltet. I tillegg har vi fjernet marginene for disse elementene, dette er nødvendig for å fjerne nettleserens innebygde stiler.
For sidefeltet vår, sett høyden til det overordnede elementet (100%), sett bredden til 15% av det overordnede elementet, og angi bakgrunnsfargen rød . Påpekte også at sidefeltet vår har fast posisjonering , som gjør at den ser ut til å holde seg til skjermen. For å få panelet vårt til å vises til høyre, setter vi riktig verdi til 0 (forskyvningen av det plasserte elementet fra høyre kant av nettleservinduet).
For demonstrasjon fast posisjonering vi laget en beholder med en høyde på 2000 piksler. Hvis vi nå ruller siden, vil sidefeltet vår forbli på plass, men innholdet i beholderen (hovedinnholdet) vil rulle.
Resultatet av vårt eksempel:
Statisk posisjonering
Vel, den siste typen posisjonering er statisk posisjonering (statisk), du og jeg har allerede snakket om det flere ganger. Statisk posisjonering det er klassisk i strømmen HTML-dokument
Jeg vil gjerne gjøre oppmerksom på ett faktum at de ovennevnte egenskapene som er ansvarlige for forskyvning av elementer ikke kan brukes på elementer som har statisk posisjonering , det vil si at de har posisjonering, som er satt som standard.
Avansert absolutt posisjonering
Før du går videre til avanserte applikasjoner absolutt posisjonering , Jeg vil gjøre deg oppmerksom på at hvis du ikke indikere verdien av elementets vertikale posisjon med absolutt posisjonering (øverst eller nederst), eller omvendt til horisontal posisjon (venstre eller høyre), deretter nettleseren vil la elementet være på samme sted på siden der det er i den generelle flyten (blir plassert på toppen av innholdet hvis det er noe).
Vi har allerede lært at elementet med absolutt posisjonering (posisjon: absolutt) posisjonert i forhold til en gitt kant av sin forfar , og stamfaren må ha verdiposisjonen forskjellig fra standard -statisk ellers telling (forskyvning) vil bli utført i forhold til den angitte kanten av nettleservinduet . Det er på tide å se på et eksempel som dette:
</span> Absolutt posisjonering i forhold til stamfar
slektning
klasse = "container" > container
klasse = "absolutt" > absolutt
La oss se nærmere på hva vi gjorde i dette eksemplet:
Til å begynne med plasserte vi en blokk (element ), som har
relativ posisjonering . Vi spesifiserte for det en intern margin fra toppen (margin-top) lik 100 piksler, angi bredde, høyde og farge på bakgrunnen.
Deretter ble et blokkelement plassert inne i det (element ), som har en høyde på 100 piksler og en bakgrunnsfarge
gul . Som du forstår, har dette elementet
statisk posisjonering (standardverdi) siden verdien av posisjonsegenskapen
ikke arvet , og den har ikke arvet fra den overordnede blokken
relativ posisjonering .
Deretter plasserte vi inne i vår container med statisk posisjonering element som har absolutt posisjonering . Sett bredden og høyden til 50 piksler og bakgrunnsfargen rød . Vær oppmerksom på at det viktigste er at dette elementet ikke er plassert i forhold til nettleservinduet, ikke i forhold til det overordnede elementet, men i forhold til dets stamfar, som har en annen plassering enn statisk! Som et resultat, plasserte vi vårt element i øvre høyre hjørne av sin forfar med relativ posisjonering .
Resultatet av vårt eksempel:
La oss oppsummere det vi lærte i denne opplæringsartikkelen om elementplassering:
Statisk posisjonering det er klassisk plassering av elementer fra topp til bunn (elementene vises i den rekkefølgen de er oppført i HTML-dokumentstrømmen ), anses den som standardverdi for alle elementer.Elementet er plassert i forhold til nettleservinduet hvis han har fast posisjonering (elementet er fikset når du ruller dokumentet).
Elementet er plassert i forhold til nettleservinduet hvis han har absolutt posisjonering , og han ikke nestet i et element som har en annen plassering enn statisk
.
Elementet det er satt for relativ posisjonering skifter i forhold til posisjon i dokumentstrømmen (i forhold til hans nåværende stilling ).
Elementet er plassert i forhold til sidene til et annet element i tilfelle han har en stamfar, eller forelder med absolutt , slektning eller fikset posisjonering .
Spørsmål og oppgaver om temaet
Før du går videre til neste emne, fullfør øvelsesoppgaven:
2016-2019 Denis Bolshakov, du kan sende kommentarer og forslag angående arbeidet med nettstedet til [email protected]
Hvordan justere et bilde til høyre
Et langt avsnitt med flere setninger. Den inneholder tekst som beskriver den flaggede egenskapen og et bilde som skal trykkes til kanten av høyre side.
Den tar elementet ut av flyten og skyver det til kanten av foreldrenes venstre eller høyre side. Elementer og tekst som ligger i koden etter et flyteelement flyter rundt det på motsatt side.
Ikke arvet, gjelder alle elementer. tar et element ut av flyten og plasserer det på toppen av resten av innholdet. Den kan flyttes i forhold til grensene til overordnet, som har en annen posisjonsverdi enn statisk , ved å bruke egenskapene topp , høyre , bunn , venstre . Når retning: ltr; den venstre egenskapen har forrang over den høyre egenskapen, med mindre den venstre egenskapen er satt til auto .
Et langt avsnitt med flere setninger.
Den inneholder tekst som beskriver den flaggede egenskapen og et bilde som skal trykkes til kanten av høyre side.
Eiendom
tekstjustering arvet, brukt på blokkelementer.
Justerer alle innebygde elementer og tekst horisontalt. Det flytter ikke selve elementet eller flytter blokker, og fungerer ikke hvis det gis til et innebygd element. Det har flere betydninger, inkludert
Ikke sant, slik at du kan flytte innhold til høyre.
Eiendom
marg-venstre ikke arvet, gjelder alle elementer.
Det har mening
auto, som justerer blokkelementet horisontalt. Nemlig
margin-venstre: auto; skyver elementet til høyre kant av overordnet. Denne posisjonen kan endres av eiendommen
marg-høyre..html">Når
margin-venstre: auto; Og
marg-høyre: auto; elementet er plassert sentrert på bredden av stamfaren.
Eiendom
flyte ikke arvet, gjelder alle elementer.
Den tar elementet ut av flyten og skyver det til kanten av foreldrenes venstre eller høyre side. Elementer og tekst som ligger i koden etter et flyteelement flyter rundt det på motsatt side.
Eiendom
posisjon ikke arvet, gjelder alle elementer.
posisjon: absolutt; tar et element ut av flyten og plasserer det på toppen av resten av innholdet. Den kan flyttes i forhold til grensene til forelderen hvis verdi
posisjon annerledes enn
statisk, ved hjelp av egenskaper
topp,
Ikke sant,
bunn,
venstre. På
retning: ltr; eiendom
venstre går foran eiendom
Ikke sant, unntatt når eiendommen
venstre har betydningen
auto.
Eiendom vise ikke arvet, gjelder for alle elementer..html">tag bord, A bordcelle — td.
Råd: på
i dette eksemplet Det er interessant å se hvordan bildet oppfører seg når størrelsen på nettleservinduet reduseres.
Hvordan justere tekst til høyre
Kort tekst til høyre
Kort tekst til høyre
Relatert materiale:
horisontal html-justering oppdatert html-begrunnelse ønsker å oppdatere
Hvordan justere en blokk til høyre
Elementet påvirker ikke høyden eller bredden til forelderen, og fører heller ikke til at det renner over.
Elementet påvirker ikke høyden på forelderen med mindre flottøren er ryddet.
Hvordan justere flere blokker til høyre
margin: 0 100 % 0 -100 %;
/* du trenger ikke å legge til en annen wrapper, men i forrige stil spesifiser transform: translate(-100%, 0); */ bakgrunn:grønn; )
CSS behandler utformingen av et HTML-dokument som et tre med elementer. Et unikt element som ikke har noe overordnet element kalles rot element. CSS-posisjoneringsmodulen beskriver hvordan alle elementene kan plasseres uavhengig av rekkefølgen på dokumentet (dvs. tatt ut av "flyten").
I CSS2 genererer hvert element i dokumenttreet null eller flere bokser, etter boksmodellen. CSS3-modulen utfyller og utvider posisjoneringsskjemaet. Plasseringen av disse blokkene er regulert:
størrelse og type element,
posisjoneringsskjema (normal flyt, flyt og absolutt posisjonering),
forhold mellom elementer i dokumenttreet,
ekstern informasjon (for eksempel visningsportstørrelse, interne bildedimensjoner osv.).
Posisjoneringsordninger
I CSS kan et elements blokk plasseres i henhold til tre posisjoneringsskjemaer:
1. Normal flyt
Normal flyt inkluderer blokkformateringskontekst (elementer med visningsblokk , listeelement eller tabell ), innebygd formateringskontekst (elementer med visning inline , inline-block eller inline-tabell ), og relativ og klebrig plassering av blokknivåelementer og linjer.
2. Flyt rundt
I strømningsmodellen fjernes blokken fra normalstrømmen og plasseres til venstre eller høyre. Innholdet går rundt høyre side av et element med flyte: venstre og venstre side av et element med flyte: høyre .
3. Absolutt posisjonering
I den absolutte posisjoneringsmodellen fjernes blokken fullstendig fra den normale strømmen og får en posisjon i forhold til den inneholdende blokken. Absolutt posisjonering implementeres ved å bruke verdiene posisjon: absolutt; og posisjon: fast; .
Et "off-flow"-element kan være et flyteelement, et absolutt plassert element eller et rotelement.
Generelt sett er en inneholdende blokk en blokk som inneholder et annet element. Ved normal flyt er root-html-elementet den inneholdende blokken for body-elementet, som igjen er den inneholdende blokken for alle underelementene, og så videre. Når det gjelder posisjonering, er den inneholdende blokken helt avhengig av typen posisjonering.
For et ikke-rotelement med posisjon: statisk; eller stilling: slektning; dens innholdsblokk er dannet av kanten av innholdsområdet til nærmeste overordnede blokknivå, tabellcelle eller radnivåblokk.
For et ikke-rotelement med posisjon: absolutt; dens innholdsblokk er satt til nærmeste overordnet element med en annen posisjonsverdi enn statisk slik:
hvis stamfaren er et element på blokknivå, vil den inneholdende blokken være innholdsområdet pluss elementets utfylling ;
hvis stamfaren er et linjenivåelement, vil den inneholdende blokken være innholdsområdet;
hvis det ikke er noen forfedre, er elementets inneholdende blokk definert som den innledende inneholdende blokken.
For en "klebrig" blokk er blokken som inneholder den nærmeste stamfaren til den rullbare eller visningsporten, ellers.
2. Velge et posisjoneringsskjema: posisjonsegenskap
Posisjonsegenskapen bestemmer hvilken posisjoneringsalgoritme som brukes til å beregne blokkens posisjon.
Eiendommen går ikke i arv.
posisjon
Betydning:
statisk
Blokken er plassert i henhold til normal flyt. Topp-, høyre-, bunn- og venstreegenskapene brukes ikke. Standardverdi.
slektning
Blokkposisjonen beregnes etter normal strømning. Blokken forskyves da fra sin normale posisjon og påvirker i alle tilfeller, inkludert tabellelementer, ikke posisjonen til eventuelle påfølgende blokker. En slik forskyvning kan imidlertid resultere i overlappende blokker, samt et rullefelt hvis det er overløp. En relativt plassert blokk beholder sine dimensjoner, inkludert linjeskift og plassen som opprinnelig var reservert for den.
En relativt plassert blokk skaper en ny inneholdende blokk for sine absolutt plasserte barn.
Påvirkningsposisjon: relativ; på tabellelementer er definert som følger:
absolutt
Blokkens posisjon (og muligens størrelse) spesifiseres ved å bruke egenskapene topp , høyre , bunn og venstre. Disse egenskapene definerer en eksplisitt forskyvning i forhold til dens innholdsblokk. Absolutt plasserte blokker fjernes fullstendig fra den normale flyten uten å påvirke plasseringen av søsterelementer. Marginene til absolutt plasserte blokker kollapser ikke.
En absolutt posisjonert blokk skaper en ny inneholdende blokk for normal flow-barn og barn med posisjon: absolutt; .
Innholdet i et absolutt plassert element kan ikke pakkes rundt andre blokker. En absolutt plassert blokk kan skjule innholdet i en annen blokk (eller kan i seg selv være skjult), avhengig av z-indeksverdien til de overlappende blokkene.
klissete
Blokkposisjonen beregnes etter normal strømning. Blokken forskyves deretter i forhold til dens nærmeste rullende stamfar, eller visningsporten hvis ingen av forfedrene har rulling. En klebrig blokk kan overlappe andre blokker og også lage rullefelt hvis den renner over.
En klebrig blokk beholder sine dimensjoner, inkludert linjeskift og plassen som opprinnelig var reservert for den.
En klebrig blokk skaper en ny inneholdende blokk for absolutt og relativt plasserte barn.
fikset
Fast posisjonering ligner på absolutt posisjonering, bortsett fra at en visningsport er satt for den inneholdende blokken. En slik blokk er fullstendig fjernet fra dokumentflyten og har ingen posisjon i forhold til noen del av dokumentet. Faste blokker beveger seg ikke når du ruller dokumentet. I så måte ligner de på faste bakgrunnsbilder. Ved utskrift gjentas faste blokker på hver side, med blokken som definerer sideområdet for dem. Blokker med fast posisjon som er større enn sideområdet trimmes.
første
Setter egenskapsverdien til standardverdien.
arve
Arver egenskapsverdien fra det overordnede elementet.
Syntaks
Posisjon: statisk; stilling: pårørende; posisjon: absolutt; posisjon: klebrig; posisjon: fast; posisjon: initial; stilling: arve;
3. Blokkoffset: egenskaper topp, høyre, bunn, venstre
Et element anses som posisjonert hvis dets posisjonsegenskap er satt til noe annet enn statisk. Plasserte elementer genererer posisjonerte blokker og kan plasseres i henhold til følgende fire fysiske egenskaper:
Syntaks
Topp: 10px; topp: 2em; topp: 50%; top:auto; topp: arve; topp: initial;
Top-egenskapen spesifiserer avstanden som toppkanten til en absolutt plassert blokk (avhengig av margen) er forskjøvet under den øvre kanten av blokken som inneholder blokken. For relativt posisjonerte blokker, spesifiserer en forskyvning i forhold til den øvre kanten av selve blokken (det vil si at blokken får en posisjon i normal flyt, og deretter en forskyvning fra den posisjonen i henhold til denne egenskapen).
Syntaks
Høyre: -10px; høyre: .5em; høyre: -10%; høyre: auto; høyre: arve; høyre: initial;
Den høyre egenskapen spesifiserer avstanden som høyre kant av en absolutt posisjonert blokk (med tanke på marginen) er forskjøvet til venstre fra høyre kant av blokken som inneholder blokken. For relativt plasserte blokker, definerer forskyvningen i forhold til høyre kant av selve blokken.
Syntaks
Bunn: 50px; bunn: -3em; bunn: -50%; bunn: auto; bunn: arve; bunn: initial;
Bunnegenskapen spesifiserer avstanden som den nedre kanten av blokken er forskjøvet oppover i forhold til den nedre kanten av den inneholdende blokken. For relativt plasserte blokker, definerer forskyvningen i forhold til underkanten av selve blokken.
Syntaks
Venstre: 50px; venstre: 10em; venstre: 20%; venstre: auto; venstre: arve; venstre: initial;
Den venstre egenskapen spesifiserer avstanden som venstre kant er forskjøvet til høyre fra venstre kant av blokken som inneholder. For relativt plasserte blokker, definerer forskyvningen i forhold til venstre kant av selve blokken.
Positive verdier flytter elementet inne i den inneholdende blokken, og negative verdier flytter det utenfor den inneholdende blokken.
4. Innpakning: flyteegenskap
Innpakning lar blokker flyte til venstre eller høyre på gjeldende linje. En "flytende blokk" forskyves til venstre eller høyre inntil dens ytre kant berører kanten av den inneholdende blokken eller ytterkanten av en annen flytende blokk. Hvis det er en linjeenhet, en ekstern øverste del den flytende blokken er på linje med toppen av gjeldende linjeblokk.
Ved bruk av flyteegenskapen på elementer anbefales det å stille inn bredden. Dette vil skape plass til annet innhold i nettleseren. Hvis det ikke er nok horisontal plass til et flytende element, vil det skyves ned til det passer. I dette tilfellet vil andre blokknivåelementer ignorere det, og radnivåelementer vil bevege seg til høyre eller venstre, og frigjøre plass til det og flyte rundt det.
Reglene for oppførselen til flytende sider er beskrevet av flyteegenskapen.
Eiendommen går ikke i arv.
Syntaks
Flyte: venstre; flyte: høyre; flyte: ingen; flyte: arve;
En flytende blokk tar på seg dimensjonene til innholdet, tar hensyn til polstring og grenser. Topp- og bunnmargen på flytende elementer kollapser ikke.
Flytende elementer kan bruke negative marginer for å bevege seg utenfor innholdsområdet til overordnet element.
Egenskapen endrer automatisk den beregnede (nettleserviste) verdien for visningsegenskapen til å vise: blokk for følgende verdier: inline , inline-block , table-row , table-row-group , table-column , table-column-group , tabell-celle . tabell-tekst, tabell-overskrift-gruppe, tabell-bunntekst-gruppe. Verdien av inline-tabell endres til tabell .
Egenskapen har ingen effekt på elementer med display: flex og display: inline-flex . Gjelder ikke absolutt plasserte elementer.
Ris. 3. Pakk rundt elementer
5. Kontrollere flyten rundt flytende elementer: Den klare egenskapen
Clear-egenskapen spesifiserer hvilke sider av et elements blokk(er) som ikke skal være ved siden av flytende blokker over den i kildedokumentet. I CSS2 og CSS 2.1 gjelder egenskapen kun for ikke-flytende blokknivåelementer.
Eiendommen går ikke i arv.
Syntaks
Klar: ingen; klar: venstre; klar: høyre; klar: begge; klar: arve;
For å forhindre at bakgrunn eller kantlinjer vises under flytende elementer, bruk regelen (overflyt: skjult;).
6. Definere overleggskonteksten: z-index egenskap
I CSS har hver blokk en posisjon i tre dimensjoner. I tillegg til horisontale og vertikale posisjoner stables blokker langs Z-aksen oppå hverandre. Plassering langs Z-aksen er spesielt viktig når blokker visuelt overlapper hverandre.
Ris. 1. Plassering av elementer langs Z-aksen
Rekkefølgen dokumenttreet tegnes i på skjermen beskrives vha overleggskontekst . Hver blokk tilhører én overleggskontekst. Hver blokk i en gitt overleggskontekst har et heltallsnivå, som er dens posisjon på Z-aksen i forhold til andre blokker i samme overleggskontekst.
Blokker med høyere nivå vises alltid foran blokker med lavere nivå, og blokker med samme nivå er ordnet fra bunn til topp i henhold til rekkefølgen på elementene i kildedokumentet. Et elements boks har samme posisjon som dens overordnede boks, med mindre den er gitt et annet nivå av z-index-egenskapen.
z-index-egenskapen lar deg endre måten elementer stables oppå hverandre.
Eiendommen går ikke i arv.
Syntaks
Z-indeks: auto; z-indeks: 0; z-indeks: 5; z-indeks: 999; z-indeks: -1; z-indeks: arve; z-indeks: initial;
En verden av gratis programmer og nyttige tips
