Forklar full bredde CSS Layout

Cascading Style Sheets, forkortet som CSS, er et dataspråk som forteller en nettleser hvordan å gjengi objekter eller elementer på en webside. En full bredde layout i CSS er en som fyller hele bredden av skjermen. Valg av feil måleenhet når koding sidebredde, men kan bryte side sett i små oppløsninger eller gjøre oppsettet for liten når den vises i store oppløsninger.

Måleenheter

CSS bruker forskjellige målinger for å beskrive bredde. De vanligste målingene brukes i CSS er piksler, betegnet med "px", og prosenter, utpekte med «%." Piksler er statisk - 100 piksler er 100 piksler på tvers av alle plattformer, uavhengig av brukerens oppløsning - mens prosenter er fleksible. Piksler tillater designeren å kontrollere utseendet på en nettside, men prosenter gjøre nettstedet tilgjengelig for alle brukere.

Ved hjelp av piksler

Når du bruker piksler, definisjonen av "full bredde" varierer fra vedtak til vedtak. Ifølge Statcounter, på verdensbasis er den vanligste oppløsningen 1024 x 768. En nettside som gjør alle overordnede elementer 1024 i bredden kan anses som en "full bredde" CSS layout, men bare for skjermer med en 1024 x 768 oppløsning. I Nord-Amerika, er den vanligste oppløsningen 1280 x 800; på disse datamaskinene, vil de "vanligste" layout ikke nå hele bredden på skjermen.

Ved hjelp av prosenter

Prosenter bør brukes når du oppretter en full bredde layout som justerer seg automatisk på alle maskiner. Nettsteder som bruker prosenter er flytende, endre henhold til den besøkendes oppløsning; 10 prosent kunne tilsvare 80 piksler på en skjerm og 136 på en annen. For å gjøre en full bredde layout i CSS, kan du bruke "100%" ved tildeling bredde ordnede elementer som er ment å strekke over hele siden. For eksempel, for å gjøre en overskrift som strekker seg over hele bredden av skjermen, kan du sette inn følgende i koden din:

<Style>
.Header {width: 100%; }
</ Style>

Så, i HTML-koden, vil du sette "<div class =" header ">.

eliminere Marginene

Marginene er ekstra tomrom som omgir topp, bunn, høyre og venstre side av en side eller et dokument. Marginene er vant til å gjøre sidene enklere å lese og bør brukes i de fleste tilfeller. Men hvis du vil ha en layout som virkelig bruker hele bredden av vinduet, kan du sette inn følgende i mellom "<style>" tagger i CSS-kode:

body {margin: 0px; }

Koden ovenfor nuller ut marginene på alle sider av websiden.