Layouts kan vara en av de svåraste sakerna att behärska när det gäller CSS, men de är otvivelaktigt en av de viktigaste. I denna Snabba Tips ska vi titta på Normal Document Flow och hur det kan hjälpa dig med dina layouter.
Introduktion
Innan jag förklarar vad Normal Document Flow betyder måste jag förklara de olika typerna av HTML-element och hur de visas som standard.
Vi kommer att koncentrera oss på de två huvudtyperna av HTML-element, nämligen "block-level" och "inline" -element. Sedan adventen av HTML5 har vi mer specifika element kategorisering (frasning, flöde och sektion) även om webbläsare fortfarande effektivt luta sig på blocket och inline definitioner.
Detta är ett exempel på flera inline-element allt som ingår i ett stycke inklusive ett ankare en spännviddoch en betoningskod.Ändra storlek på webbläsaren och du kommer att se hur en webbläsare hanterar dessa inline-element som standard. Det är rätt, allt visas på en rad och omslag när det inte finns mer utrymme.
Se den här inline-elementdemoen i åtgärd.
Blockelementnivåer, t.ex. divs och stycken, plus nyare HTML5-medlemmar som artikel och sektion, har väldigt olika egenskaper som standard. Block-Level-element innehåller normalt, men inte alltid, inline-element eller andra blocknivåelement. Tänk på dem som "strukturella" elementet i de två.
Webbläsare kommer (som standard) att formatera blockelement med en radbrytning före och efter. Med andra ord börjar element på blocknivå alltid på en ny linje (staplar upp som block) om inte annat utformas.
styling
I alla fall kan vi ändra hur ett element visas med CSS-visningsegenskapen:
element display: block; / * eller inline, till exempel * /
Dessa visningsegenskaper dikterar också vad vi kan stila. Till exempel kan vi bestämma bredden och höjden på ett blocknivåelement, men inte så med inline-element. Padding och marginaler kan appliceras på inline-element, men de påverkar inte innebörden av det innehållande elementet. Ta en titt på det här exemplet för att se vad jag menar:
De andra
Förutom de gemensamma block- och inline-visningsattributen finns det några mindre vanliga exempel. Till exempel, om du vill visa ett element inline, men stil det som ett blocknivåelement? Gå in i inline-blocket värde. Inline-blockelementen bevarar egenskaper som bredd, höjd, marginal och vaddering som de tillämpas för att blockera nivåelement, samtidigt som strukturella egenskaper hos ett inlineelement upprätthålls.
Inline-Block är ett potentiellt alternativ till flytande element, men det är säkert inte utan problem under dessa omständigheter.
Ett annat visningsvärde, som inte lika bra används är listobjekt, vilket gör exakt vad det står på tennet. Varje element med det listade objektvärdet som appliceras visas vertikalt, som du kan förvänta dig i en lista, men de har också punktpunkter bredvid dem. Detta är användbart för att notera data, dvs en lista med namn, och är logiskt hur lista objekt som dessa:
Charles Mahogany Biggins
Tiggy Wiggins Hydrangea
Foxy Bumpkins Numpty
visas som standard.
Slutligen är det sista visningsvärdet som är värt att nämna är "ingen". Kan du gissa vad det gör? Det är rätt, något element som har sin visningsegenskap inställt på "ingen" visas helt enkelt inte på sidan. det är visuellt (tillsammans med alla delar som ingår i det) borttaget från dokumentet. Markeringen för det här elementet skickas fortfarande till webbläsaren, men det genererar inte en ruta och är dold för visning - skärmsläsare hämtar inte heller. Det tar ingen plats alls, så andra delar kan ta plats.
Så Vad är normalt dokumentflöde?
Det är hur en sida presenteras när du inte gör något för det med avseende på strukturell styling.
Med ovanstående i åtanke, vad exakt är Normal Document Flow? Det är hur en sida presenteras när du inte gör något för det med avseende på strukturell styling. Webbläsare visar innehåll i den ordning som den stöter på. topp saker först, fortsätter innehållet lägre ner.
När folk börjar webbdesign, är de ofta angelägna om att ta itu med alla slags fina tricks utan att lära sig grunderna och grunderna. Om du kan förstå Normal Document Flow, blir dina webbdesigner allt bättre för det!
Övning: Markup
Låt oss börja om att göra ett enkelt fotogalleri med mycket grundläggande CSS. Jag gjorde snabbt en html-fil för att komma igång, trots allt koncentrerar vi oss främst på styling. Kopiera koden nedan till din textredigerare, och jag förklarar vad som finns där inne.
Normal dokumentflöde
En introduktion till normal dokumentflöde.
Välkommen till mitt fotogalleri!
Jag är mannen utan namn, Zapp Brannigan! Bender, det är inte lätt att vara Gud. Om du gör för mycket, blir folk beroende av dig, och om du inte gör något, förlorar de hoppet. Du måste använda en lätt beröring. Som en safecracker, eller en pickpocket. Hej, gissa vad du är tillbehör till. Leela, Bender, vi kommer grovt rånande. Även Zoidberg. Kära nån! Hon är fast i en oändlig slinga, och han är en idiot! Jo, det är kärlek till dig.
Kan jag använda pistolen? Å nej! Professorn slår mig! Men om Zoidberg "fixar" det… då kanske gåvor! Steka! Sluta göra det rätta, du jerk! Vem är modig nog att flyga in i någonting vi alla fortsätter kalla en dödssfär? Jag har inte känt mycket av någonting sedan min marsvin dog.
Det finns ett tomt css block längst upp. Här börjar vi styling. Nedan är en villkorlig länk till HTML5 Shiv-skriptet som hjälper Internet Explorer att känna igen och korrekt visa HTML5-element. Nedan det obligatoriska organetiketten. Inuti är kroppsetiketten behållaren för hela sidan, och även en för fotogalleriet. Jag har använt platskatt för att få platshållare bilder, och Fillerama för fyllnadstext. Så det handlar om det.
OK, så nu bara för att visa hur Normal Document Flow fungerar, ta en titt på den sida du just har gjort. Precis som du förväntar dig rätt? Bilderna visas i en rad, till bredden på moderelementet, i så fall fylls siffran (inställd på 100% av visningsporten, men förmodligen med vissa marginaler som standard). Och även om du inte kan se det ännu, är alla blocknivåelement, som div, figuren och artikeln, på egen linje.
Detta är normalt dokumentflöde i åtgärd. Nu ändrar du bara webbläsaren i en sekund. Ja, det är flytande! Tja, kanske inte fullständigt vätska som vi har kommit för att förstå det - bilderna behåller sina dimensioner oavsett visningsporten. Ändå kommer dina layouter alltid att vara flytande som standard.
Övning: Basic CSS
Bara för att bevisa att jag inte drar ditt ben om blocknivåelement, låt oss lägga till några bakgrundsfärger till dem. Lägg till följande i ditt CSS-kodblock högst upp i HTML-filen:
Nu, efter att du har lagt till några bakgrundsfärger, kolla in resultatet. Det ska vara uppenbart hur blocknivåelementen visas.
Övning: Layout CSS
Stylen nedan innehåller bara CSS-egenskaper från boxmodellen (bredd, marginal, vaddering etc.), men det visar hur mycket lite CSS kan skapa solida layouter.
I denna CSS har vi angivit behållarens bredd till 65%. Vi kunde också ha använt ett fast pixelvärde, men procentsatser behåller dokumentets flytande natur och visar dokumentflödet mer effektivt. Vi har också centrerat sidan med marginal: 0 auto.
Resten handlar om estetik. Jag har lagt till några vadderingar för att ge allt lite andningsutrymme, specificerade teckensnitt och teckensnittfärger som handlar om det.
Spara det dokumentet och visa det i din webbläsare.
När jag jobbar på ett projekt anser jag alltid hur det skulle se ut i Normal Document Flow. Detta låter mig tänka på hur jag kan förbättra det med så lite CSS som möjligt.
Slutsats
Använd de principer som vi har lärt oss idag, försök att bygga dina egna exempel. Du kommer att finna att (strukturellt) du kan uppnå en hel del innan du går in i tekniska egenskaper hos flottör och positionering.
Ytterligare resurser
Inline Elements på Mozilla Developer Network
Blockelement på Mozilla Developer Network
Visuell formateringsmodell av W3C
Skärmdeklarationen på QuirksMode
CSS-skärm: Inline-Block: Varför det vaggar, och varför det suger av Robert Nyman
Vad är det med displayen: Inline-Block? av Josh Johnson
Använd inte displayen: ingen för att visuellt dölja innehåll som är avsedd för skärmsläsare på 456 Berea St.
Accentsconagua
Share
