hurtigt tip: anvendelse af normale dokument strøm,,,, skemaer, kan være en af de vanskeligste ting at mestre, når det gælder forskning, selv om de er utvivlsomt en af de vigtigste.i denne hurtige tip, vi kommer til at se på normale dokument strøm, og hvordan den kan hjælpe dig med din opstillingsskemaer.,,,, indledning, før jeg forklarer, hvad normale dokument strømme betyder, at jeg må forklare de forskellige typer html elementer, og hvordan de udstilles som standard, vi skal koncentrere os om de to de vigtigste typer af html elementer, nemlig "blok plan" og "overensstemmelse" elementer.siden indførelsen af html5 vi har mere specifikke element kategorisering (formulering, strøm og opdeling) om browsere faktisk stadig magert på blokken og i overensstemmelse med definitionerne. i overensstemmelse med elementer omfatter ting som anker hundetegn, billeder og spænder.disse elementer er ofte definere tekst og data, såsom at forvandle ordene klik her ind i en sammenhæng.ved misligholdelse i overensstemmelse med elementer viser...tja, i overensstemmelse.Meaning you can have multiple elements in one line, up until the width of the containing element is reached, at which point they continue onto the next line., <p><strong>This is an example of several inline elements</strong> all contained within a paragraph <a href="#">including an anchor</a> <span>a span</span> <em>and an emphasis tag.</em> <code>Resize the browser and you'll see how a browser handles these inline elements by default.</code> <abbr>That's right, everything displays on one line and wraps when there's no more room.</abbr></p>,See this inline element demo in action.,Block-level elements however, such as ,div,s and paragraphs, plus newer HTML5medlemmer, som artikel, og afsnit, har meget forskellige egenskaber ved misligholdelse.block niveau elementer vil sædvanligvis, men ikke altid, indeholder i overensstemmelse med elementer eller andre blok niveau elementer.tænk på dem som "strukturelle" element i to, browsere vil (ved misligholdelse) format blok niveau elementer med en pause før og efter.med andre ord, block niveau elementer vil altid begynde på en ny linje (stable op som blokke), medmindre andet er fikset.,, design, i alle tilfælde, vi kan ændre en del vises ved hjælp af css - ejendom: element (display: block og /eller inline -, f.eks. * /} disse har nogle egenskaber, også diktere, hvad vi ellers kan stil.for eksempel, vi er frie til at bestemme bredde og højde af en blok niveau element, men ikke det med inline - elementer.fyld og margener kan anvendes til at udvikle elementer, men de vil ikke påvirke dimensioner af indeholder element.se på dette eksempel for at se, hvad jeg mener, og de andre, ud over den fælles blok og itråd udviser egenskaber, der er et par mindre ofte oplevet eksempler.for eksempel, hvis du vil se et element i overensstemmelse, men stil det som en blok niveau element?ind i overensstemmelse med blok, værdi.i overensstemmelse med blok elementer bevare egenskaber, såsom bredde, højde, margen og polstring, som de har anvendt til at blokere niveau elementer, samtidig med at den strukturelle egenskaber af en overensstemmelse element., i overensstemmelse med blok er en mulig alternativ til flydende elementer, men bestemt ikke uden problemer under disse omstændigheder. en anden udstilling værdi, det er ikke som det er en liste over ting, som gør præcis, hvad det siger om tin.hvert element med listen i punkt værdi, der anvendes, er anført vertikalt, som man kunne forvente i en liste, men de har også punktopdeling ved siden af dem.det er nyttigt for optagelse af data, dvs. en liste over navne, og logisk nok, hvordan liste emner som disse:, < ul > < li > charles mahogni biggins < /li > < li > tiggy wiggins hydrangea < /li > < li > foxy bondetampe klovn < /li > < /ul >, vises ved misligholdelse. endelig den sidste opvisning værdi værd at nævne, er: ingen.kan du gætte, hvad det er?det er rigtigt, at ethvert element, der har sin udstilling ejendom, der "intet", ganske enkelt ikke dukker op på side; det er visuelt (sammen med alle de elementer, der indgår i det) fjernes fra teksten.tillægget til dette element er sendt til browseren, men det kan ikke skabe en kasse og skjult - screenreaders vil ikke samle det op.der er ikke plads overhovedet, så andre elementer kan indtage sin plads.,, så hvad er normalt dokument strøm?det er sådan en side, der er fremlagt, når du ikke det med hensyn til strukturelle stilfuldhed.,, med de ovenfor i betragtning, hvad er normale dokument strøm?det er sådan en side foreligger, når du ikke det med hensyn til strukturelle stil.- browsere display - indholdet i, at det er stødt på, top ting først, procedure - indhold på. når folk begynder at web - design, er de ofte ønsker at tackle smarte tricks, uden at grundlaget og fundamentet.hvis du kan forstå normale dokument strøm, deres web - design vil blive bedre til det., udøve: avance, lad os komme i gang med et enkelt billede galleri med meget grundlæggende ccs.jeg gjorde hurtigt en html fil til at få os i gang, vi er jo hovedsagelig koncentrerer sig om stil.- koden under i deres tekst, redaktør, og jeg vil forklare, hvad der er derinde. <!doctype html > < http: //lang = ", en" > < head > < afsnit > normale dokument flow < /afsnit > < stil type = "tekst /css" > < /stil > <!- hvis det er [9] > < manuskript src = "http: //html5shim. googlecode. kom /svn /bagagerum /html5. er" > < /manuskript > <![endif] - > < /head > < krop > < div klasse = "containere" > < h1 > en introduktion til normale dokument flow. < /h1 > < figur klasse = "photogallery" > < img src = "http://placekitten.com/g/100/200" alat = "/> < img src =" http://placekitten.com/g/160/200 "alat =" /> < img src = "http://placekitten.com/g/220/200" alat = "/> < img src =" http://placekitten.com/g/180/200 "i alt =" /> < img src = "http://placekitten.com/g/240/200" alat = "/> < img src =" http://placekitten.com/g/130/200 "alat =" /> < /figur > < artikel > < h2 > velkommen til mit foto galleri.< /h2 > < p > jeg er manden uden navn, zapp branigan!det er svært at være gud.hvis du gør for meget, bliver folk er afhængige af dig, og hvis du ikke gør noget, mister de håbet.du er nødt til at bruge en let berøring.som en pengeskabstyv, eller en lommetyv.hey, ved du hvad, du er tilbehør.- bender, vi skal være gravrøvere.også zoidberg.åh, kære!hun sidder fast i en sløjfe, og han er en idiot!- det er kærlighed til dig. < /p > < p > kan jeg bruge pistolen?åh, nej!professoren vil slå mig!men hvis jeg "fastsætter det & hellip; måske gaver!fry!stop med at gøre de rigtige ting, din nar!der er modig nok til at flyve ind i noget, vi kalder en død område?jeg har ikke følt noget siden mit marsvin døde. < /p > < /artikel > < /div > < fod > < /fod > < /organ > < ///////html > der er en tom css blok på toppen.det er her, vi skal begynde på vej.nedenunder er en betinget link til html5 kniv manuskript, som vil hjælpe internet explorer erkender og korrekt display html5 elementer.under den obligatoriske organ navneskilt.i kroppen, er den beholder hele side, og også et til foto galleri.jeg har brugt placekitten til indikation af en art billeder, og fillerama for fyldstof tekst.det var det. okay, så bare for at vise, hvordan normale dokument strøm fungerer, tage et kig på den side, du lige har gjort.som man kunne forvente.billederne viser på en linje til bredden af det oprindelige element, i dette tilfælde finde (fastsat til 100% af de viewport, men måske med nogle margener fra default) er fyldt.og selv om du ikke kan se det, men alle gade niveau elementer, som f.eks. okay, tal og den artikel, er på deres egen linje. det er normalt dokument strøm i aktion.nu, bare resize browseren, et øjeblik.jep, det er flydende.nå, måske ikke helt, som vi har væske kommer til at forstå det - de billeder, bevare deres mål, uanset om viewport.stille, din opstillingsskemaer vil altid være flydende ved misligholdelse., udøve: den grundlæggende forskning, bare for at bevise, at jeg laver ikke sjov med blok niveau elementer, så lad os tilføje lidt farver til dem.i din css - kode blok på toppen af html fil, tilføje dette:, beholder (baggrund:&#f2f2f2;} artikel {baggrund:b0000;}, nu, efter at tilføje lidt farver, se resultatet.det bør være klart, at hvor blok niveau elementer vises, udøve: opstilling css, style nedenfor indeholder kun css egenskaber fra kassen model (bredde margen, polstring osv.), men det viser, hvor meget lidt forskning kan skabe faste opgaver. i stedet for css har du allerede til dette:,. container (bredde: 65% margen: 0 - og baggrund:&#f2f2f2;} figur img (polstring tilbage: 10px;} h1 {skrifttype familie: verdana, genève, ariel, helvetica, uden serif; farve:b0000; polstring til venstre: 10px;} artikel {baggrund:b0000; farve -&#f2f2f2; polstring: 10px;}, i denne forskning har vi udpeget bredden af beholderen til 65%.vi kunne også have anvendt en fast pixel - værdi, men procentsatser, bevarer den flydende karakter af dokumenter og påvise dokument flyde mere effektivt.vi har også fokuseret på den side, ved hjælp af margen: 0 auto,., resten er alt om æstetik.jeg har tilføjet noget polstring, til at give det et pusterum, som skrifttyper og skrifttype farver, det er det. - det dokument, og mener, at det i din browser. når jeg arbejder på et projekt, som jeg altid tænke på, hvordan det ville se ud i normale dokument strøm.dette gør det muligt for mig at tænke på, hvordan jeg kan gøre det med så lidt css som muligt.,, indgåelse, under anvendelse af de principper, som vi har lært i dag, prøv at bygge din egen eksempler.du vil opdage, at (strukturelt), kan man opnå en hel del før jeg går i detaljer med flåd og placering.,, yderligere ressourcer, i overensstemmelse med bestemmelser om mozilla udvikler netværk, block niveau elementer på mozilla udvikler netværk, visuelle formatering model af w3c, display - erklæring om quirksmode, css display: inline - blokken: hvorfor den sten, og hvorfor det stinker som robert nyman, hvad er det for noget med skærm: inline - block?ved josh johnson, skal du ikke bruge display: ingen visuelt indhold, der er bestemt til skærmen skjule læserne om 456 berea st.,