Layouts kan være en av de vanskeligste tingene å mestre når det gjelder CSS, selv om de utvilsomt er en av de viktigste. I denne Quick Tip skal vi se på Normal Document Flow og hvordan det kan hjelpe deg med layoutene dine.
Introduksjon
Før jeg forklarer hva Normal dokumentflyt betyr, må jeg forklare de forskjellige typer HTML-elementer, og hvordan de vises som standard.
Vi skal konsentrere oss om de to hovedtyper av HTML-elementer, nemlig "blokknivå" og "inline" -elementer. Siden adventen av HTML5 har vi mer spesifikk elementkategorisering (frasering, flyt og snitt), selv om nettlesere fremdeles effektivt lener seg på blokken og inlinedefinisjonene.
Dette er et eksempel på flere inline elementer alt er inneholdt i et avsnitt som inkluderer et anker et spanog en vektord.Endre størrelsen på nettleseren, og du vil se hvordan en nettleser håndterer disse inlineelementene som standard. Det stemmer, alt vises på en linje og brytes når det ikke er mer plass.
Se denne inline-elementdemoen i aksjon.
Blokknivåelementer, for eksempel divs og avsnitt, pluss nyere HTML5-medlemmer som artikkel og seksjon, har svært forskjellige egenskaper som standard. Blokknivåelementer vil normalt, men ikke alltid, inneholde elementelementer eller andre blokkeringselementer. Tenk på dem som det "strukturelle" elementet i de to.
Nettlesere vil (som standard) formatere blokknivåelementer med en linjeskift før og etter. Med andre ord, vil blokknivåelementer alltid starte på en ny linje (stabling opp som blokker) med mindre annet er utformet.
styling
I alle tilfeller kan vi endre hvordan et element vises med CSS-displayegenskapen:
element display: block; / * eller inline, for eksempel * /
Disse visningsegenskapene dikterer også hva annet vi kan style. For eksempel er vi fri til å bestemme bredden og høyden til et blokknivåelement, men ikke så med inlineelementer. Padding og margins kan brukes på inline elementer, men de vil ikke påvirke dimensjonene til det inneholdende elementet. Ta en titt på dette eksemplet for å se hva jeg mener:
De andre
I tillegg til de vanlige blokk- og inlinevisningsattributtene, er det noen få eksempler på mindre ofte oppdaget. For eksempel, hva hvis du vil vise et element inline, men stil det som et blokknivåelement? Tast inn inline-blokk verdi. Inline-blokkelementer beskytter egenskaper som bredde, høyde, margen og polstring når de brukes til å blokkere nivåelementer, samtidig som de opprettholder de strukturelle egenskapene til et inlineelement.
Inline-Block er et potensielt alternativ til flytende elementer, men absolutt ikke uten problemer under disse forholdene.
En annen visningsverdi, som ikke er så godt brukt, er list-element, som gjør akkurat det som står på tinnet. Hvert element med den valgte listen element-verdien vises vertikalt, slik du forventer i en liste, men de har også punktposter ved siden av dem. Dette er nyttig for å oppgi data, det vil si en liste over navn, og er logisk hvordan listen elementer som disse:
Charles Mahogany Biggins
Tiggy Wiggins Hydrangea
Foxy Bumpkins Numpty
vises som standard.
Endelig er den siste visningsverdien verdt å nevne, 'ingen'. Kan du gjette hva det gjør? Det er riktig, noe element som har sin visningsegenskap satt til "ingen" vises ikke bare på siden; det er visuelt (sammen med alle elementene som finnes i det) fjernet fra dokumentet. Markeringen for det elementet sendes fremdeles til nettleseren, men det genererer ikke en boks og er skjult for visning - skjermlesere vil ikke plukke den opp heller. Det tar ingen plass overhodet, så andre elementer kan ta sin plass.
Så Hva er Normal Document Flow?
Det er hvordan en side presenteres når du ikke gjør noe for det med hensyn til strukturell styling.
Med det ovenfor nevnte, hva er Normal Document Flow? Det er hvordan en side presenteres når du ikke gjør noe for det med hensyn til strukturell styling. Nettlesere viser innhold i den rekkefølgen den opplever topp ting først, fortsetter innholdet lavere ned.
Når folk først starter webdesign, er de ofte ivrige etter å takle alle slags fabelaktige triks, uten å lære grunnleggende og grunnleggende. Hvis du kan forstå Normal Document Flow, vil webdesignene dine bli bedre for det!
Øvelse: The Markup
La oss begynne å lage et enkelt fotogalleri med veldig grunnleggende CSS. Jeg laget raskt en html-fil for å komme i gang, for det meste fokuserer vi først og fremst på styling. Kopier koden under i tekstredigeringsprogrammet, og jeg vil forklare hva som er der inne.
Normal dokumentflow
En Intro til Normal Document Flow.
Velkommen til mitt fotogalleri!
Jeg er mannen uten navn, Zapp Brannigan! Bender, å være Gud, er ikke lett. Hvis du gjør for mye, blir folk avhengige av deg, og hvis du ikke gjør noe, mister de håp. Du må bruke en lett berøring. Som en safecracker, eller en lommebok. Hei, gjett hva du er tilbehør til. Leela, Bender, vi skal gravt rane. Også Zoidberg. Åh kjære! Hun sitter fast i en uendelig løkke, og han er en idiot! Vel, det er kjærlighet for deg.
Kan jeg bruke pistolen? Å nei! Profeten vil slå meg! Men hvis Zoidberg 'fikser' det… så kanskje gaver! Steke! Avslutt å gjøre det rette, du rykk! Hvem er modig nok til å fly inn i noe vi alle fortsetter å kalle en dødssfære? Jeg har ikke følt meg mye siden min marsvin døde.
Det er en tom css blokk øverst. Det er her vi begynner styling. Nedenfor er det en betinget kobling til HTML5 Shiv-skriptet som vil hjelpe Internet Explorer til å gjenkjenne og vise HTML5-elementer på riktig måte. Under det obligatoriske legemerket. Inne i kroppsmerket er beholderen for hele siden, og også en for fotogalleriet. Jeg har brukt placekitten til å få plasserholdere bilder, og Fillerama for filler tekst. Så det handler om det.
OK, så nå bare for å demonstrere hvordan Normal Document Flow fungerer, ta en titt på siden du nettopp har laget. Akkurat som du forventer riktig? Bildene vises i en linje, til bredden på overordnet element, i dette tilfellet er figuren (satt til 100% av visningsporten, men sannsynligvis med noen marginer som standard) fylt. Og selv om du ikke kan se det ennå, er alle blokknivåelementer, som div, figuren og artikkelen, på egen linje.
Dette er normalt dokumentflyt i handling. Nå må du bare endre størrelsen på nettleseren for et sekund. Ja, det er flytende! Vel, kanskje ikke helt væske som vi har kommet for å forstå det - bildene beholder sine dimensjoner uavhengig av visningsporten. Likevel vil layoutene dine alltid være flytende som standard.
Trening: Den grunnleggende CSS
Bare for å bevise at jeg ikke drar benet ditt om blokkeringselementer, la oss legge til noen bakgrunnsfarger til dem. I din CSS-kodeblokk øverst i HTML-filen legger du til dette:
.container bakgrunn: # f2f2f2; artikkel bakgrunn: # 8B0000;
Nå, etter å ha lagt til noen bakgrunnsfarger, sjekk ut resultatet. Det skal være tydelig om hvordan blokknivåelementer vises.
Øvelse: Layout CSS
Stylingen nedenfor inneholder bare CSS-egenskaper fra bokmodellen (bredde, margin, polstring etc.), men det viser hvor lite CSS kan skape solide layouter.
I denne CSS har vi angitt beholderens bredde til 65%. Vi kunne også ha brukt en fast pikselverdi, men prosentandeler opprettholder dokumentets flytende natur og demonstrerer dokumentflyten mer effektivt. Vi har også sentrert siden ved hjelp av margin: 0 auto.
Resten handler om estetikk. Jeg har lagt til noe polstring for å gi alt litt pusteplass, angitt fonter og skriftfarger, det handler om det.
Lagre dokumentet og se det i nettleseren din.
Når jeg jobber med et prosjekt, vurderer jeg alltid hvordan det ville se ut i Normal Document Flow. Dette tillater meg å tenke på hvordan jeg kan forbedre det med så lite CSS som mulig.
Konklusjon
Bruk prinsippene som vi har lært i dag, prøv å bygge dine egne eksempler. Du finner at (strukturelt) du kan oppnå ganske mye før du går inn i de tekniske egenskapene til flyter og posisjonering.
Tilleggsressurser
Inline Elements på Mozilla Developer Network
Elementer på blokknivå på Mozilla Developer Network
Visuell formatering modell av W3C
Skjermdeklarasjonen på QuirksMode
CSS-skjerm: Inline-Block: Hvorfor det Rocks, og hvorfor det suger av Robert Nyman
Hva er Deal med skjerm: Inline-Block? av Josh Johnson
Ikke bruk skjermbildet: Ingen å visuelt skjule innhold beregnet for skjermlesere på 456 Berea St.
Accentsconagua
Share
