Hei, i dag vil vi vurdere et så viktig element på nettstedet som en blokk, og denne artikkelen er uløselig knyttet til en artikkel om blokkdesign der vi undersøkte hvordan du kan lage både blokkbeholdere og innebygde elementer for nettstedet vårt på nettstedet. Etter å ha studert denne artikkelen er jeg sikker på at det vil bli mye klarere for oss hvordan vi jobber med blokker, og dette vil være et veldig viktig skritt mot å lage vår egen nettside.

Høyden og bredden på blokken i CSS.

La oss nå se på hovedfunksjonene som vil hjelpe oss å administrere utseende og plasseringen av nettstedblokkene, og etter det må vi bruke all denne kunnskapen i praksis, og vi vil lage et enkelt skjelett for nettstedet.

Blokkhøyden i CSS settes med høydekommandoen: auto |<высота в единицах измерения>| arv og som du allerede har forstått, kan vi angi høyden på blokken ved å bruke autokommandoen, vi gir kommandoen til nettleseren at den kan bestemme størrelsen på blokken av seg selv, og dermed vil blokken ha en slik størrelse at den passer til alle elementene og ikke mer.

Arv-kommandoen vil tillate deg å låne parametere fra det overordnede elementet, og disse verdiene vil bare være synlige hvis parametere er satt for det overordnede elementet. Men oftest må du angi blokkstørrelsen spesifikt, bare spesifiser størrelsen i en av de aksepterte verdiene (oftest er disse piksler).

Vi kan også sette størrelsen i forhold til det overordnede elementet og for dette må vi bruke prosenter. La oss se hvordan det ser ut i praksis.

Denne kommandoen gjør det klart for nettleseren at for et spesifikt element på siden må du sette størrelsen til ti prosent av størrelsen på den overordnede blokken.

Blokkbredden i CSS settes med bredden: auto |<ширина>| arve alle parametere er de samme for både høyden og bredden på blokken, og jeg tror at det ikke er verdt å gjenta igjen. Jeg vil bare si at det ikke er nødvendig å spesifikt stille inn både høyden og bredden på blokken, du kan for eksempel stille inn bredden og høyden vil øke avhengig av innholdet og som er veldig praktisk hvis du ikke gjør det vet hvilket innhold som vil være på spesifikk side.

Minimum og maksimal bredde på blokken.

For hver blokk kan vi også sette ikke spesifikke parametere men minimums- og maksimumsparameteren for enhver blokk på nettstedet. Takket være dette kan du fylle blokkene uten frykt for at de skal gå utenfor nettleservinduet.

For å stille inn dette er veldig enkelt, vi må registrere følgende parametere for å angi minimum bredde og høyde:

min bredde:<ширина>

min-høyde:<высота>

Og for maksimalt trengs to parametere:

maks-bredde:<ширина>
maks-høyde:<высота>

Nå kan vi sette både maksimum og minimumsstørrelse for en blokk eller helt for hele nettstedet, og dette er viktig for et nettsted med gummidesign; hvis det er løst, vil ikke denne parameteren fungere.

Flyteplasseringsalternativer i css.

I alle de foregående eksemplene hvor vi laget containere og elementer er plassert etter hverandre i rekkefølge, men dette er ikke nok for oss å lage et design, vi trenger muligheten til å plassere elementer etter eget skjønn og eiendommen vil hjelpe oss med dette flyte til css og nå skal vi analysere søknaden av denne eiendommen på praksis.

Float-parameteren kan ha flere verdier, og nå skal vi finne ut hva disse parameterne er:

flyte: venstre | høyre | ingen | arv

La oss nå ta en titt på hvert eksempel separat.

Float: left-kommandoen betyr at boksen skal justeres til venstre og alle andre elementer vil flyte rundt den til høyre.

float: høyre er det stikk motsatte av forrige kommando, og følgelig vil blokken være høyrejustert og alle elementene vil flyte rundt den til venstre.

flyte: ingen standard oppførsel for hver blokk, plasserer blokker etter hverandre. Bruken av denne parameteren er nå ikke relevant, og den brukes svært sjelden og ganske enkelt på grunn av analfabetisme.

Den klare parameteren i css.

Svært ofte, når du lager et design på blokker ved å bruke float-kommandoen, må du gi en kommando til noen blokker slik at de ikke flyter rundt blokken, men oppfører seg som vanlig, og blir plassert under alle de andre. Dette problemet ble tidligere løst ved å bruke float: none-kommandoen til den nødvendige blokken men visningen i hver nettleser kan være forskjellig og derfor er det i slike tilfeller mye mer rasjonelt å bruke klarkommandoen og nå skal vi se hvordan dette kan gjøres.

klar: venstre | høyre | begge | ingen | arv

Teamet har fire parametere, og nå skal vi forholde oss spesifikt til hver av dem, hva slags funksjoner den utfører.

Clear: left-kommandoen betyr at elementet er plassert under alle elementene med float: left-parameteren.

Clear: right-kommandoen plasserer boksen under alle float: right-elementer.

Clear: both-parameteren plasserer elementet under alle blokker med både float: left og float: right parametere.

klart: ingen er den vanlige oppførselen for en blokk. Denne parameteren bør ikke settes hvis flytende beholdere har blitt plassert tidligere.

Vi bruker all kunnskap i praksis.

Så vi kommer til konklusjonen av artikkelen der vi må se hvordan vi kan omsette alt dette i praksis, og det første vi gjør er å lage et enkelt skjelett for nettstedet. Slik vil wireframen vår se ut.

Som vi kan se for wireframe, må vi lage fire DIV-er, og på dem må vi bruke både størrelses- og plasseringsparametrene.

Vi har laget fire blokker og nå må vi fylle dem med informasjon og sette en bakgrunn for hver blokk slik at vi kan se hvilken blokk som er plassert og hvor. Du kan finne ut hvordan du stiller inn bakgrunnen. Og dette er hva slags kode vi bør ha.

Etter det må vi gå inn i stilarket og registrere alle kommandoene vi trenger. Kommandoene er like for alle blokker, bare hver har sine egne parametere.

Topptekst (bredde: 500 px; blokkbredde
høyde: 100px; blokkhøyde
bakgrunnsfarge: # 33CCFF;) blokkfarge

Innhold (bredde: 400 px; blokkbredde
høyde: 400px; blokkhøyde
bakgrunnsfarge: # 33FF33; blokkfarge
flyte: venstre;) blokkposisjon

Sidefelt (bredde: 100 px; blokkbredde
høyde: 400px; blokkhøyde
bakgrunnsfarge: #CCCCCC; blokkfarge
flyte: venstre;) blokkposisjon

Bunntekst (bredde: 500 px; blokkbredde
høyde: 100px; blokkhøyde
bakgrunnsfarge: # 0000FF; blokkfarge
klar: begge;) standard blokkposisjon

Og etter at vi har skrevet alle disse kommandoene, vil vi få et slikt skjelett for nettstedet.

Før jeg snakker om å jobbe med størrelsene på elementene, deres arrangement, marginer og innrykk, vil jeg fortelle deg litt om selve elementene, mer presist om typene deres.

Alle elementer (tagger) kan deles inn i to kategorier: Block og Inline.

Hva er forskjellen?

Jeg tror navnene i seg selv allerede snakker om forskjellene. Blokk- eller bokselementer er beholdere, rektangulære områder på en dataskjerm, som uten vanskeligheter og sykkeloppfinnelse kan tildeles en viss posisjon, størrelse, sette andre blokker i dem, og bestemme plasseringen i forhold til hverandre. EN strengelementer er plassert i samme tidslinje, justert til grunnlinjen og brukes som regel til formatering og redigering av tekst.

Å blokkere ( blokkere) elementer inkluderer: