Lay-outs kunnen een van de moeilijkste dingen zijn om te beheersen als het gaat om CSS, hoewel ze onmiskenbaar een van de belangrijkste zijn. In deze Snelle tip gaan we kijken naar de normale documentstroom en hoe deze u kan helpen met uw lay-outs.
Invoering
Voordat ik uitleg wat Normale Documentstroom betekent, moet ik de verschillende typen html-elementen uitleggen en hoe ze standaard worden weergegeven.
We gaan ons concentreren op de twee hoofdtypen HTML-elementen, namelijk 'blokniveau' en 'inline' elementen. Sinds de komst van HTML5 hebben we meer specifieke elementcategorisatie (frasering, flow en sectie) hoewel browsers nog steeds effectief leunen op de blok- en inline-definities.
Dit is een voorbeeld van verschillende inline-elementen alles vervat in een paragraaf inclusief een anker een spanwijdteen een nadruklabel.Verklein de grootte van de browser en u zult zien hoe een browser standaard deze inline elementen hanteert. Dat klopt, alles wordt op één regel weergegeven en loopt in als er geen ruimte meer is.
Bekijk deze inline element demo in actie.
Blokniveau-elementen echter, zoals divs en alinea's, plus nieuwere HTML5-leden zoals artikel en sectie, hebben standaard verschillende eigenschappen. Blokniveau-elementen bevatten normaal, maar niet altijd, inline-elementen of andere elementen op blokniveau. Zie ze als het 'structurele' element van de twee.
Browsers zullen (standaard) elementen op blokniveau opmaken met een regeleinde vóór en na. Met andere woorden, elementen op blokniveau beginnen altijd op een nieuwe regel (zoals stapelblokken), tenzij anders gestileerd.
styling
In alle gevallen kunnen we wijzigen hoe een element wordt weergegeven met behulp van de CSS-display-eigenschap:
element display: block; / * of inline, bijvoorbeeld * /
Deze weergavekenmerken bepalen ook wat we nog meer kunnen stijlen. We zijn bijvoorbeeld vrij om de breedte en hoogte van een element op blokniveau te bepalen, maar niet met inline elementen. Opvulling en marges kunnen worden toegepast op inline elementen, maar ze hebben geen invloed op de afmetingen van het element dat de inhoud bevat. Bekijk dit voorbeeld om te zien wat ik bedoel:
De anderen
Naast de algemene blok- en inline-weergaveattributen zijn er enkele minder vaak voorkomende voorbeelden. Wat als u bijvoorbeeld een element inline wilt weergeven, maar het wilt stijlen als een element op blokniveau? Ga naar inline-block waarde. Inline-blokelementen behouden eigenschappen zoals breedte, hoogte, marge en opvulling wanneer ze worden toegepast op blokniveau-elementen, terwijl de structurele kwaliteiten van een inline-element behouden blijven.
Inline-Block is een potentieel alternatief voor zwevende elementen, maar is zeker niet zonder problemen in deze omstandigheden.
Een andere displaywaarde, die niet zo goed wordt gebruikt, is list-post, wat precies doet wat het zegt op het blik. Elk element met de toegepaste waarde van de lijstitemwaarde wordt verticaal weergegeven, zoals u zou verwachten in een lijst, maar ze hebben ook opsommingstekens ernaast. Dit is handig voor het weergeven van gegevens, d.w.z. een lijst met namen, en het is logisch hoe lijstitems zoals deze:
Charles Mahogany Biggins
Tiggy Wiggins Hydrangea
Foxy Bumpkins Numpty
worden standaard weergegeven.
Ten slotte is de laatste waarde die het vermelden waard is 'none'. Kun je raden wat het doet? Dat klopt, elk element waarvan de weergave-eigenschap is ingesteld op "none" verschijnt gewoon niet op de pagina; het is visueel (samen met alle elementen die het bevat) verwijderd uit het document. De opmaak voor dat element wordt nog steeds naar de browser verzonden, maar het genereert geen box en is aan het zicht onttrokken - schermlezers zullen het ook niet oppikken. Het neemt helemaal geen ruimte in, dus andere elementen kunnen zijn plaats innemen.
Dus wat is de normale documentstroom?
Het is hoe een pagina wordt gepresenteerd als je er niets aan doet met betrekking tot structurele styling.
Wat is, met het bovenstaande in gedachten, de normale documentstroom? Het is hoe een pagina wordt gepresenteerd als je er niets aan doet met betrekking tot structurele styling. Browsers geven inhoud weer in de volgorde waarin ze zijn aangetroffen; eerst de beste dingen doen, verder gaan met de inhoud lager.
Wanneer mensen voor het eerst met webdesign beginnen, willen ze vaak allerlei mooie trucs aanpakken, zonder de basis en basisprincipes te leren. Als u Normale documentenstroom begrijpt, zijn uw webontwerpen des te beter!
Oefening: de markup
Laten we beginnen met het maken van een eenvoudige fotogalerij met zeer eenvoudige CSS. Ik heb snel een html-bestand gemaakt om ons op weg te helpen, we concentreren ons immers vooral op styling. Kopieer de onderstaande code naar je teksteditor en ik zal uitleggen wat erin staat.
Normale documentstroom
Een intro tot normale documentstroom.
Welkom bij mijn fotogalerij!
Ik ben de man zonder naam, Zapp Brannigan! Bender, God zijn is niet gemakkelijk. Als je te veel doet, raken mensen afhankelijk van je, en als je niets doet, verliezen ze de hoop. Je moet een lichte aanraking gebruiken. Als een safecracker of een zakkenroller. Hé, raad eens waar je accessoires voor bent. Leela, Bender, we gaan ernstig beroven. Ook Zoidberg. Oh jee! Ze zit vast in een oneindige lus en hij is een idioot! Wel, dat is liefde voor jou.
Kan ik het pistool gebruiken? Oh nee! De professor zal me slaan! Maar als Zoidberg het 'oplost'… dan misschien geschenken! Fry! Stop met het goede te doen, klootzak! Wie is dapper genoeg om naar iets te vliegen dat we allemaal een dodenbol blijven noemen? Ik heb nergens veel gevoeld sinds mijn cavia stierf.
Er is een leeg CSS-blok bovenaan. Dit is waar we zullen beginnen met stileren. Hieronder staat een voorwaardelijke koppeling naar het HTML5 Shiv-script, waarmee Internet Explorer HTML5-elementen kan herkennen en correct kan weergeven. Daaronder de verplichte body-tag. In de body-tag staat de container voor de hele pagina en ook een voor de fotogalerij. Ik heb placekitten gebruikt om placeholder-afbeeldingen te krijgen, en Fillerama voor vullertekst. Dus dat is het zo'n beetje.
OK, dus nu even laten zien hoe Normal Document Flow werkt, kijk eens naar de pagina die u zojuist hebt gemaakt. Precies zoals je zou verwachten toch? De afbeeldingen worden weergegeven op één regel, tot de breedte van het bovenliggende element, in dit geval wordt het cijfer (ingesteld op 100% van het kijkvenster, maar waarschijnlijk met enige marges standaard) gevuld. En hoewel je het nog niet kunt zien, zijn alle elementen op blokniveau, zoals de div, de figuur en het artikel, op hun eigen lijn.
Dit is de normale documentstroom in actie. Wijzig de grootte van de browser nu even. Ja, het is vloeibaar! Nou ja, misschien ook niet helemaal vloeiend zoals we het zijn gaan begrijpen - de afbeeldingen behouden hun afmetingen ongeacht het kijkvenster. Toch zijn uw lay-outs altijd standaard vloeibaar.
Oefening: de basis-CSS
Als we willen bewijzen dat ik niet je been trek over elementen op blokniveau, laten we er wat achtergrondkleuren aan toevoegen. Voeg dit toe aan uw CSS-codeblok bovenaan het HTML-bestand:
Nu, na het toevoegen van enkele achtergrondkleuren, bekijk het resultaat. Het moet duidelijk zijn hoe elementen op blokniveau worden weergegeven.
Oefening: de lay-out-CSS
De onderstaande stijl bevat alleen CSS-eigenschappen van het box-model (breedte, marge, opvulling enz.), Maar het laat zien hoe zeer weinig CSS solide lay-outs kan creëren.
In deze CSS hebben we de breedte van de container aangegeven op 65%. We hadden ook een vaste pixelwaarde kunnen gebruiken, maar percentages behouden de vloeiende aard van het document en demonstreren de documentenstroom effectiever. We hebben ook de pagina gecentreerd met behulp van marge: 0 auto.
De rest gaat helemaal over esthetiek. Ik heb wat opvulling toegevoegd om alles wat ademruimte te geven, de lettertypen en lettertypekleuren gespecificeerd, dat is het zo'n beetje.
Bewaar dat document en bekijk het in uw browser.
Wanneer ik aan een project werk, bedenk ik altijd hoe het eruit zou zien in de normale documentstroom. Dit laat me nadenken over hoe ik het kan verbeteren met zo min mogelijk CSS.
Conclusie
Gebruik de principes die we vandaag hebben geleerd en probeer uw eigen voorbeelden te bouwen. Je zult merken dat je (structureel) heel veel kunt bereiken voordat je de technische details van drijvers en positionering onder de knie krijgt.
Aanvullende bronnen
Inline Elements op het Mozilla Developer Network
Block-level Elements op het Mozilla Developer Network
Visueel formatteringsmodel door W3C
De weergaveverklaring op QuirksMode
CSS-weergave: inline-Block: Why It Rocks, en Why It Sucks door Robert Nyman
Wat is de deal met display: inline-block? door Josh Johnson
Gebruik display: none om inhoud die bedoeld is voor schermlezers op 456 Berea St visueel te verbergen.
Accentsconagua
Share
