web - design for børn: css layout,,,, velkommen til det sjette time af vores   web - design for børn   serie, css layout.,, det er hvor vi lægger al vores elementer, hvor vi vil have dem på skærmen.vi vil tilføje, at både vores html og css filer til at gøre det.,,,,, minde dig, se på webstedet, vi bygger.de filer for dette kursus kan downloades her, og glem ikke at stille nogen spørgsmål, du har i bemærkningerne punkt nederst på denne side, inden vi begynder, er der et par ting, vi har brug for at vide, før der hoppede ind i, layout,.i det første afsnit vil vi se på, hvordan til at blive organiseret.vi dækker nogle positionering basale og tale om, hvad det er for en slags css, egenskaber, anvendes til layout.,, css bestilling, holde en css dokument organiseret, er meget vigtigt.god organisation vil gøre det lettere for os at finde alle brikkerne i vores sag, gøre det lettere at ændre og tilføje ting senere.generelt er det bedste for vores css, erklæringer, i den rækkefølge, de finder sted på den side, vi vil tilføje stil i denne lektie, vigtigste, f.eks.denne tilføjede - på et så væsentligt element bør indgå i vores css dokument, før nogen andre elementer, der satte sig i, main,.,, den model, html elementer er lidt ligesom rektangulære kasser.det, css rubrik model, der beskriver afstanden mellem disse kasser.,,,,, hver rubrik har fire sider.vi kan anvende en værdi for alle fire sider på en gang i vores css gennem polstring, grænse, og /eller margen.men hvis vi ønsker at stil den ene side af et element, det kan vi også gøre.for eksempel:,, polstring til venstre: 20px; grænse: 4px fastÍd76;,,,,, det lyserøde rubrik repræsenterer tekst.vi kan se, at polstring er tilføjet, kun til venstre og en stor blå grænse dækker alle fire sider i indholdet.,, flexbox, css giver os en række egenskaber lavet specielt til at hjælpe os med vores websted er layout.så mens rubrik model bidrager til at forklare den afstand, ca. html elementer, flexbox, vil gøre det muligt for os at dig, disse elementer på plads.,,,,,, når vi bruger flexbox om en container element dette element er en, flex container, og alle elementer i det blive, flex,.,, når vi anvender flexbox en beholder, der automatisk vil skabe punkter ud langs en ret linje (horisontalt), og så kan vi gå mere i detaljer med andre flexbox egenskaber.,,,,,, vi behøver ikke at bruge flexbox for meget for vores websted, men det er vigtigt at tænke på flexbox som det betragtes som den mest moderne, korrekt måde at holdning små bidder af indhold på et websted,.,, header,,,,,, h1, og byen image i, header, er fokuseret på den side.der er flere forskellige måder at center med css, men nu vil vi bruge, tekst, tilpasse: center; om, header,.,, vil vi pege på hovedet ved hjælp af sin klasse navn, som vi tiisatte tidligere:,,. primære header {tekst tilpasse: center;},,, - ikke glemme!redde de dokumenter og genopfriske browseren, til at se vores ændringer, som vi gør dem!afsnit,,,,,, den første ting, vi ønsker at gøre vores del er at gøre indholdet, image og den liste, inden for hvert afsnit sidde ved siden af hinanden snarere end stablede., for at opnå det, vi vil bruge, flexbox,.flexbox anvendes til produkter i en beholder element ved hjælp af, display - flex, om beholderen:,,. store afdeling (display - flex, angive: - webkit flex; /* det er en systemleverandør præfiks!* /}, for at bringe det tilbage til det, vi talte om tidligere, image og, okay, indeholdende butikken liste er nu  , flex produkter, fordi de er i det, flex container,.,, samtidig med at der er mange muligheder for at fastsætte nøjagtigt, hvor et element bør gå, flexbox misligholdelse opførsel her er perfekt for os – og vores butik er listen liv til højre for butikkens image.,, en meddelelse om "sælger præfikser", da flexbox er forholdsvis nyt, ikke alle - browsere har haft en chance for at omfatte det ordentligt.at arbejde her, vi kan omfatte en leverandør præfiks til flexbox egenskaber, at den manglende støtte i øjeblikket.selv om vi kun er koncentreret om de seneste udgaver af moderne browsere for dette projekt, har vi stadig brug for at medtage en, - webkit -, sælger præfiks for flexbox til at sikre, at det fungerer i "safari".,, image & lister,,,,,, vi kunne bruge en smule afstand mellem det image og den element, der indeholder den tekst, så vores: lad os tilføje en klasse, opbevarer oplysninger, for, div., indeholder den tekst,.,, efter at vi redde det, vi kan springe over til vores css og tilføje denne afstand, men kun til venstre, af lufttransport:,,. lagre oplysninger (margen: 30px;}, automatisk liste afstand, er der en vis afstand til venstre i vores butik unordered lister.det er, fordi der er nogle, der kommer med misligholdelse style, ved hjælp af en html liste.nogle gange denne misligholdelse - er i orden, og andre gange ikke kan producere den virkning, vi tager, kan vi slippe for denne misligholdelse over afstand ved hjælp af, polstring: 0; på den unordered liste, men det vil give vores stikord til at gå for langt til venstre i forhold til vores liste er pos.,,,,, ønsker vi en smule, polstring, her, men ikke så meget, som det er fastsat i liste er misligholdelse på vej.om fastsættelse af en, polstring til venstre, af, 15px, på listen, vil vores stikord op med overskriften ganske pænt, så vi kan tilføje dette ud over de ting, vi har føjet til listen i det foregående   lektion:,,. butik liste (polstring til venstre: 15px; /* tilføjede - * /farve:&#ffc122;},,,,, rummet mellem liste over punkter, har vi stadig det spørgsmål, som vi som nævnt i den tidligere erfaring med listen over punkter for tæt sammen.for at løse dette, lad os tilføje en klasse, butik navn til listen, < li >,, i vores html.vi kan tilføje en lille margen til bunden af disse poster.,,. butik navn (margin nederst: 10px;},,,,, margener og koncentrerer, afstand skal føjes til de afsnit, samt at få dem midt på siden.vi vil gøre dette gennem, margen, og bredde, egenskaber.,, igen, skal vi tilføje, at den satte vi har allerede skrevet:,,. store afdeling (display - flex, angive: - webkit flex; margen: 50px auto; bredde: 450px;},,, 50px, værdi inden for her er at anvende det, margen, areal på top, for hvert lager afdeling.efter det med bil, fortæller om at overveje element er bredde (som vi sætter til 450px,) og placerer det inden for browser vindue automatisk.,, fod,,,,, for vores fod, vil vi midt i teksten, og der tilsættes en lille mængde, polstring og sørge for, at denne tekst ikke er for tæt på kanten af fod.,,. primære meter (polstring: 2px; tekst tilpasse: center; baggrund farve:&#ffc122;}, krop margen, vi har talt om, default modetendenser, lidt, da vi fik vores lister på plads.den krop, element kommer med sin egen standard styles, hvoraf det ene er et spillerum,, der omgiver en hel side.og det er ikke et problem, kan vi se, at det er at forebygge, baggrund, farve, for vores fod fra strækker sig fuldt ud til siderne af browser vindue.,, løsningen er at springe tilbage til lig i vores css dokument og tilføje følgende:,, organ {margen: 0;),,,,, konklusion i denne kurs, vi har alle vores elementer på plads med css layout - teknikker.mens der er normalt flere forskellige måder til at opnå et bestemt indretning, bliver mere og mere komfortabel med css rubrik model og flexbox giver en meget god forståelse for disse forskellige metoder.,, da vores hjemmeside er komplet (tillykke!)vi taler alle om, design, typografi, og farve, lære at følge.dette vil hjælpe dig til at blive en god, informeret web designer.,, se dig omkring i byen.,