Iš autoriaus: Vėl sveikinu jus apsilankius mūsų tinklaraščio puslapiuose. Šiandienos straipsnyje norėčiau pakalbėti apie įvairius lygiavimo būdus, kuriuos galima pritaikyti tiek blokams, tiek jų turiniui. Tiksliau, kaip suderinti blokus css ir teksto lygiavimą.

Blokų suderinimas su centru

CSS bloką lengva suderinti su centru. Tai daugeliui žinomiausia technika, bet pirmiausia norėčiau apie tai papasakoti dabar. Manoma, kad jis yra horizontaliai centre pirminio elemento atžvilgiu. Kaip tai daroma? Tarkime, kad turime konteinerį ir mūsų tiriamasis yra jame:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Tarkime, kad tai yra svetainės antraštė. Jis nesitęsia iki viso lango pločio, todėl turime jį centruoti. Rašome taip:

#header ( plotis / maks. - plotis: 800px; paraštė: 0 automatinis;

Turime nurodyti tikslų arba maksimalų plotį, o tada parašyti rakto savybę – paraštę: 0 auto. Ji nustato mūsų antraštės paraštes, pirmoji reikšmė yra viršutinė ir apatinė paraštės, o antroji yra dešinė ir kairė paraštės. Automatinė reikšmė nurodo naršyklei automatiškai apskaičiuoti užpildymą iš abiejų pusių, kad elementas būtų tiksliai pirminio elemento centre. Patogus!

Teksto lygiavimas

Tai taip pat labai paprastas triukas. Norėdami sulygiuoti visus įterptus elementus, galite naudoti teksto lygiavimo ypatybę ir jos reikšmes: kairėn, dešinėn, centre. Pastarasis centruoja tekstą, ko mums reikia. Net paveikslėlį galima lygiuoti taip pat, nes pagal numatytuosius nustatymus jis taip pat yra įtrauktas elementas.

Sulygiuokite tekstą vertikaliai

Bet tai yra sudėtingiau. Pagal numatytuosius nustatymus nėra paprastos, gerai žinomos savybės, kuri lengvai centruotų tekstą bloko konteineryje vertikaliai. Tačiau yra keletas būdų, kuriuos maketuotojai sugalvojo bėgant metams.

Nustatykite bloko aukštį naudodami paminkštinimą. Nereikia nustatyti aiškaus aukščio naudojant aukštį, o sukurti jį dirbtinai, naudojant viršuje ir apačioje esančius paminkštinimus, kurie turėtų būti vienodi. Sukurkime bet kurį bloką ir į jį įrašykime šias ypatybes:

div (fonas: #ccc; užpildymas: 30 pikselių 0;)

div ( fonas: #ccc; užpildymas: 30 pikselių 0;

Fonas yra skirtas tik vizualiai pamatyti kraštus ir paminkštinimą. Dabar bloko aukštį sudaro šios dvi įtraukos ir pati linija, ir viskas atrodo taip:

Apibrėžkite bloko linijos aukštį. Man atrodo, kad tai yra teisingesnis būdas, jei reikia sulygiuoti vieną teksto eilutę. Su juo galite įprastu būdu parašyti aukštį naudodami aukščio savybę. Po to jis taip pat turi nustatyti linijos aukštį, tokį patį kaip ir viso bloko aukštis.

div (aukštis: 60 taškų; eilutės aukštis: 60 taškų;)

div ( aukštis: 60px; linija – aukštis: 60px;

Rezultatas bus panašus į aukščiau pateiktą paveikslėlį. Viskas veiks, net jei pridėsite paminkštinimo. Tačiau tik vienai eilutei. Jei elemente reikia daugiau teksto, šis metodas neveiks.

Konvertuoti bloką į lentelės langelį. Šio metodo esmė ta, kad vertikalaus lygiavimo: vidurio savybė veikia lentelės langelį, kuris centruoja elementą vertikaliai. Atitinkamai, šiuo atveju bloką reikia nustatyti taip:

div (rodymas: lentelės langelis; vertikalus lygiavimas: vidurys;)

div ( ekranas: lentelė - langelis; vertikaliai – lygiuoti: viduryje;

Šio metodo pranašumas yra tas, kad galite lygiuoti tiek teksto centre, kiek norite. Bet blokui, kuriame įdėtas mūsų div, geriau užregistruoti display: table, kitaip jis gali neveikti.

Na, čia mes prieiname prie paskutinės šiandienos technikos - pačių blokų išlyginimo vertikaliai. Reikia pasakyti, kad čia vėlgi nėra turto, kuris būtų skirtas būtent tam, tačiau yra keletas gudrybių, kurias turėtumėte žinoti.

Nustatyti įtraukas procentais. Jei žinote pirminio elemento aukštį ir įdedate į jį kitą bloko elementą, galite jį centruoti naudodami procentinį užpildymą. Pavyzdžiui, pirminis yra 600 pikselių aukščio. Įdėkite bloką, kurio aukštis yra 300 pikselių. Kiek reikia atsitraukti viršuje ir apačioje, kad jį centre būtų? 150 pikselių, tai yra 25 % tėvų ūgio.

Šis metodas leidžia centruoti tik tada, kai matmenys leidžia atlikti skaičiavimus. Ir jei jūsų tėvas yra 887 pikselių ūgio, tada jūs tikrai negalėsite nieko parašyti, tai suprantama.

Įterpkite elementą į lentelės langelį. Vėlgi, jei paverčiame pirminį elementą į lentelės langelį, tada į jį įterptas blokas bus automatiškai centruotas vertikaliai. Norėdami tai padaryti, tėvui tereikia nustatyti vertikalią lygiavimą: vidurį.

Ir jei, be to, dar parašome paraštę: 0 auto, tada elementas bus centre ir horizontaliai!

Elementų centravimas vertikaliai naudojant CSS yra iššūkis kūrėjams. Tačiau yra keletas būdų, kaip jį išspręsti, kurie yra gana paprasti. Šioje pamokoje pateikiamos 6 vertikalios turinio centravimo parinktys.

Pradėkime nuo bendro problemos aprašymo.

Vertikalaus centravimo problema

Centravimas horizontaliai yra labai paprastas ir lengvas. Kai centre esantis elementas yra įterptas, naudokite pirminio lygiavimo ypatybę. Kai elementas yra blokinis, nustatome jo plotį ir automatiškai nustatome kairę ir dešinę paraštes.

Dauguma žmonių, naudodami ypatybę teksto lygiavimas: kreipiasi į vertikalaus lygiavimo ypatybę, kad centre būtų vertikaliai. Viskas atrodo pakankamai logiška. Jei naudojote lentelių šablonus, tikriausiai daug naudojote atributą valign, o tai sustiprina įsitikinimą, kad vertikalus lygiavimas yra teisingas būdas.

Tačiau atributas valign veikia tik lentelės langeliuose. Ir vertikalios išlyginimo savybė yra labai panaši į ją. Tai taip pat paveikia lentelės langelius ir kai kuriuos eilutinius elementus.

Vertikalaus lygiavimo ypatybės vertė veikia pirminio įterptinio elemento atžvilgiu.

• Teksto eilutėje lygiavimas atliekamas atsižvelgiant į eilutės aukštį.
• Lentelės langelyje naudojamas lygiavimas pagal specialiu algoritmu apskaičiuotą reikšmę (dažniausiai gaunamas eilutės aukštis).

Deja, vertikalaus lygiavimo ypatybė neturi įtakos bloko lygio elementams (pavyzdžiui, pastraipoms div elemento viduje). Tokia situacija gali sukelti mintį, kad nėra vertikalaus išlyginimo problemos sprendimo.

Tačiau yra ir kitų bloko elementų centravimo būdų, kurių pasirinkimas priklauso nuo to, kas yra centre išorinio konteinerio atžvilgiu.

Linijos aukščio metodas

Šis metodas veikia, kai norite vertikaliai centruoti vieną teksto eilutę. Tereikia nustatyti, kad eilutės aukštis būtų didesnis nei šrifto dydis.

Pagal numatytuosius nustatymus laisva vieta bus tolygiai paskirstyta teksto viršuje ir apačioje. Ir linija bus centruota vertikaliai. Dažnai linijos aukštis prilyginamas elemento aukščiui.

HTML:

CSS:

#vaikas (linijos aukštis: 200 taškų;)

Šis metodas veikia visose naršyklėse, nors jį galima naudoti tik vienoje eilutėje. 200 px reikšmė pavyzdyje pasirinkta savavališkai. Galima naudoti bet kokią reikšmę, didesnę už teksto šrifto dydį.

Vaizdo centravimas naudojant linijos aukštį

Ką daryti, jei turinys yra paveikslėlis? Ar aukščiau pateiktas metodas veiks? Atsakymas slypi dar vienoje CSS eilutėje.

HTML:

CSS:

#parent (linijos aukštis: 200 tšk.;) #parent img (vertikaliai lygiuoti: viduryje;)

Linijos aukščio savybės vertė turi būti didesnė už vaizdo aukštį.

CSS lentelių metodas

Aukščiau buvo minėta, kad vertikalaus lygiavimo ypatybė taikoma lentelės langeliams, kur ji puikiai veikia. Mes galime pateikti savo elementą kaip lentelės langelį ir naudoti vertikaliojo lygiavimo ypatybę, kad vertikaliai centruotų turinį.

Pastaba: CSS lentelė nėra tas pats, kas HTML lentelė.

HTML:

CSS:

#parent (rodyti: lentelė;) #child (rodyti: lentelės langelis; vertikaliai lygiuoti: viduryje;)

Nustatome pirminio div lentelės išvestį, o įdėtasis div išvedamas kaip lentelės langelis. Dabar galite naudoti vertikalaus lygiavimo savybę vidiniame konteineryje. Viskas jame bus vertikaliai centre.

Skirtingai nuo aukščiau pateikto metodo, šiuo atveju turinys gali būti dinamiškas, nes elemento div dydis bus pakeistas, kad atitiktų jo turinį.

Šio metodo trūkumas yra tas, kad jis neveikia senesnėse IE versijose. Įdėtam konteineriui turime naudoti ypatybę display: inline-block.

Absoliutus padėties nustatymas ir neigiamos paraštės

Šis metodas taip pat veikia visose naršyklėse. Tačiau tam reikia, kad centre esančiam elementui būtų suteiktas aukštis.

Pavyzdinis kodas vienu metu atlieka horizontalų ir vertikalų centravimą:

HTML:

CSS:

#tėvas (padėtis: santykinis;) #vaikas (padėtis: absoliuti; viršuje: 50%; kairėje: 50%; ūgis: 30%; plotis: 50%; paraštė: -15% 0 0 -25%;)

Pirmiausia nustatome elementų išdėstymo tipą. Tada įdėtajam div nustatykite viršutinę ir kairiąją ypatybes į 50%, kuri yra pirminio elemento centras. Tačiau viršutinis kairysis įdėto elemento kampas yra centre. Todėl reikia jį pakelti (pusė aukščio) ir perkelti į kairę (pusė pločio), tada centras sutaps su pagrindinio elemento centru. Taigi šiuo atveju būtina žinoti elemento aukštį. Tada nustatykite elemento neigiamą viršutinę ir kairiąją paraštes, lygias atitinkamai pusei aukščio ir pločio.

Šis metodas neveikia visose naršyklėse.

Absoliutus padėties nustatymas ir tempimas

Pavyzdinis kodas atlieka vertikalų ir horizontalų centravimą.

HTML:

CSS:

#tėvas (padėtis: santykinis;) #vaikas (pozicija: absoliuti; viršuje: 0; apačioje: 0; kairėje: 0; dešinėje: 0; plotis: 50%; aukštis: 30%; paraštė: automatinis;)

Šio metodo idėja yra ištempti įdėtą elementą iki visų 4 pirminio elemento kraštinių, nustatant viršutines, apatines, dešiniąsias ir kairiąsias savybes į 0.

Nustačius, kad visose pusėse būtų automatiškai formuojamos paraštės, visose 4 pusėse bus nustatytos vienodos vertės ir mūsų įdėtasis elementas bus sutelktas į pirminį elementą.

Deja, šis metodas neveikia IE7 ir senesnėse versijose.

Vienodos viršutinės ir apatinės paraštės

Šis metodas aiškiai nustato vienodas paraštes virš ir žemiau pagrindinio elemento.

HTML:

CSS:

#tėvas (pamušalas: 5% 0;) #vaikas (pamušalas: 10% 0;)

CSS kodo pavyzdys nustato abiejų elementų viršutinę ir apatinę paraštes. Įdėto elemento užpildymas bus naudojamas vertikaliam centravimui. Ir pirminio elemento užpildymas įdėto elemento centre bus jame.

Santykiniai vienetai naudojami dinamiškai keisti elementų dydį. O absoliutiesiems vienetams reikės atlikti skaičiavimus.

Pavyzdžiui, jei pirminis elementas yra 400 pikselių aukščio, o įdėtasis elementas yra 100 pikselių, reikia 150 pikselių viršutinės ir apatinės paraštės.

150 + 150 + 100 = 400

Naudojant %, skaičiavimus galima palikti naršyklei.

Šis metodas veikia visur. Minusas yra skaičiavimų poreikis.

Pastaba:Šis metodas veikia nustatant išorinį elemento užpildą. Taip pat galite naudoti elemento paraštes. Sprendimas naudoti paraštes ar paminkštinimą turėtų būti priimtas atsižvelgiant į projekto specifiką.

Plaukiojantis div

Šis metodas naudoja tuščią div elementą, kuris slankioja ir padeda valdyti įdėto elemento padėtį dokumente. Atminkite, kad slankioji „div“ yra prieš mūsų įdėtą elementą HTML kode.

HTML:

CSS:

#parent (aukštis: 250px;) #floater (plūduriuoja: kairėn; aukštis: 50%; plotis: 100%; paraštė-apačia: -50px;) #vaikas (aišku: abu; aukštis: 100px;)

Mes perkeliame tuščią div į kairę arba dešinę ir nustatome jo aukštį iki 50% pirminio elemento. Tokiu būdu jis užpildys viršutinę tėvų pusę.

Kadangi šis div yra slankus, jis pašalinamas iš įprasto dokumento srauto ir turime atšaukti įdėto elemento teksto vyniojimą. Pavyzdyje vartojami aiškiai: abu, bet pakanka naudoti tą pačią kryptį kaip slankiojo tuščio div elemento poslinkį.

Viršutinė įdėto div elemento kraštinė yra tiesiai po tuščio div elemento apatine kraštine. Turime perkelti įdėtą elementą per pusę slankiojo tuščio elemento aukščio. Norėdami išspręsti problemą, naudokite neigiamą slankiojo tuščio div elemento margin-bottom ypatybės reikšmę.

Šis metodas taip pat veikia visose naršyklėse. Tačiau norint jį naudoti, reikia papildomo tuščio div elemento ir žinių apie įdėto elemento aukštį.

Išvada

Visus aprašytus metodus lengva naudoti. Sunkumas tas, kad nė vienas iš jų netinka visiems atvejams. Turite išanalizuoti projektą ir pasirinkti labiausiai atitinkantį reikalavimus.

Labai dažnai užduotis yra sulygiuoti bloką su puslapio / ekrano centru ir netgi taip, kad be java scenarijaus, nenustatant griežtų dydžių ar neigiamų paraščių, kad slinkties juostos veiktų pirminiam, jei blokas viršys jo dydį. . Žiniatinklyje yra daug monotoniškų pavyzdžių, kaip sulygiuoti bloką prie ekrano centro. Paprastai dauguma jų yra pagrįsti tais pačiais principais.

Žemiau pateikiami pagrindiniai problemos sprendimo būdai, jų privalumai ir trūkumai. Norint suprasti pavyzdžių esmę, nurodytose nuorodose esančiuose pavyzdžiuose rekomenduoju sumažinti lango Rezultatas aukštį / plotį.

1 variantas. Neigiamas įtraukimas.

Padėties nustatymas blokas atributai viršuje ir kairėje 50%, o iš anksto žinodami bloko aukštį ir plotį, nustatome neigiamą paraštę, kuri yra lygi pusei dydžio blokas... Didžiulis šios parinkties trūkumas yra tas, kad reikia apskaičiuoti neigiamas maržas. Taip pat blokas elgiasi ne visai teisingai, kai yra apsuptas slinkties juostomis – jis tiesiog nupjaunamas, nes turi neigiamas paraštes.

Pirminis (plotis: 100%; aukštis: 100%; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis;) .blokas (plotis: 250 pikselių; aukštis: 250 pikselių; padėtis: absoliutus; viršuje: 50%; kairėje : 50%; paraštė: -125px 0 0 -125px; img (maksimalus plotis: 100%; aukštis: automatinis; ekranas: blokas; paraštė: 0 automatinis; kraštinė: nėra;))

2 variantas. Automatinis įtraukimas.

Mažiau paplitęs, bet panašus į pirmąjį. Dėl blokas nustatykite plotį ir aukštį, nustatykite viršutinį dešinįjį apatinį kairįjį atributus į 0 ir nustatykite paraštę automatiškai. Šios parinkties pranašumas yra veikiančios slinkties juostos tėvas jei pastarasis turi 100 % pločio ir aukščio. Šio metodo trūkumas yra griežti matmenys.

Pirminis (plotis: 100 %; aukštis: 100 %; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis;) .blokas (plotis: 250 taškų; aukštis: 250 taškų; padėtis: absoliutus; viršuje: 0; dešinėje: 0; apačia: 0; kairė: 0; paraštė: automatinė; img (maksimalus plotis: 100 %; aukštis: automatinis; ekranas: blokas; paraštė: 0 automatinis; kraštinė: nėra;))

3 variantas. Lentelė.

Mes klausiame tėvas lentelės stiliai, langelis tėvas nustatykite teksto lygiavimą į centrą. A blokas nustatyti linijos bloko modelį. Trūkumai yra neveikiančios slinkties juostos ir apskritai ne lentelės „emuliacijos“ estetika.

Parent (plotis: 100 %; aukštis: 100 %; ekranas: lentelė; padėtis: absoliuti; viršuje: 0; kairėje: 0;> .inner (rodymas: lentelės langelis; teksto lygiavimas: centre; vertikalus lygiavimas: vidurys); )) .block (rodymas: inline-block; img (rodymas: blokas; kraštinė: nėra;))

Norėdami pridėti slinktį prie šio pavyzdžio, turėsite pridėti dar vieną elementą prie konstrukcijos.
Pavyzdys: jsfiddle.net/serdidg/fk5nqh52/3.

4 variantas. Pseudoelementas.

Ši parinktis neturi visų ankstesniuose metoduose išvardytų problemų, taip pat išsprendžia iš pradžių nustatytas užduotis. Esmė ta tėvas nustatyti stilius pseudoelementas anksčiau, ty 100 % aukščio, vidurio išlygiavimo ir įdėto dėžutės modelio. Tai tas pats su blokas nustatytas linijos bloko modelis, išlygiavimas centre. Į blokas po „nepateko“. pseudoelementas kai pirmosios dydis didesnis už tėvas, nurodykite tėvas tarpas: nowrap ir šrifto dydis: 0, po kurio seka blokas nepaisykite šių stilių naudodami šiuos – tarpas: normalus. Šiame pavyzdyje šrifto dydis: 0 reikalingas, kad būtų pašalintas tarpas tarp tėvas ir blokas ryšium su kodo formatavimu. Erdvę galima panaikinti ir kitais būdais, tačiau geriausia to tiesiog neleisti.

Pirminis (plotis: 100 %; aukštis: 100 %; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis; tarpas: nevyniojamas; teksto lygiavimas: centre; šrifto dydis: 0; &: prieš () aukštis: 100 %; ekranas: eilutinis blokas; vertikalus lygiavimas: vidurys; turinys: "";)) .block (rodymas: eilutinis blokas; tarpas: normalus; vertikalus lygiavimas: vidurys; teksto lygiavimas: kairėje ; img (ekranas: blokuoti; kraštinė: nėra;))

Arba, jei reikia, kad pagrindinis lango aukštis ir plotis užimtų tik lango aukštį ir plotį, o ne visą puslapį:

Pirminė (pozicija: fiksuota; viršuje: 0; dešinėje: 0; apačioje: 0; kairėje: 0; perpildymas: automatinis; tarpas: nevyniojamas; teksto lygiavimas: centre; šrifto dydis: 0; &: prieš (aukštis: 100 %; ekranas: eilutinis blokas; vertikalus lygiavimas: vidurys; turinys: "";)) .block (vaizdas: eilutinis blokas; tarpas: normalus; vertikalus lygiavimas: vidurys; teksto lygiavimas: kairėje; img (ekranas: blokas; kraštinė: nėra;))

5 variantas. Flexbox.

Vienas iš paprasčiausių ir elegantiškiausių būdų yra naudoti „flexbox“. Jis nereikalauja nereikalingų kūno judesių, gana aiškiai nusako to, kas vyksta, esmę, pasižymi dideliu lankstumu. Vienintelis dalykas, kurį verta atsiminti renkantis šį metodą, yra IE palaikymas nuo 10 versijos imtinai. caniuse.com/#feat=flexbox

Pirminis (plotis: 100 %; aukštis: 100 %; padėtis: fiksuota; viršuje: 0; kairėje: 0; ekranas: lankstus; lygiuoti elementus: centre; lygiuoti turinį: centre; lygiuoti turinį: centre; perpildymas: automatinis; ) .block (fonas: # 60a839; img (vaizdas: blokas; kraštinė: nėra;))

6 variantas. Transformuoti.

Tinka, jei mus riboja struktūra ir nėra galimybės manipuliuoti pirminiu elementu, o bloką reikia kažkaip sulygiuoti. Į pagalbą ateina funkcija translate () css. Esant 50%, absoliuti padėtis nustatys viršutinį kairįjį langelio kampą tiksliai centre, tada neigiama vertimo vertė perkels langelį, palyginti su jo matmenimis. Atminkite, kad neigiami padariniai gali atsirasti kaip neryškūs kraštai arba šrifto stilius. Be to, šis metodas gali sukelti problemų apskaičiuojant bloko padėtį naudojant java scenarijų "a. Kartais, norint kompensuoti 50% pločio praradimą dėl paliktos css savybės, blokui nustatyta taisyklė gali pagalba: paraštė-dešinė: -50%;.

Pirminis (plotis: 100%; aukštis: 100%; padėtis: fiksuota; viršuje: 0; kairėje: 0; perpildymas: automatinis;) .blokas (pozicija: absoliuti; viršuje: 50%; kairėje: 50%; transformuoti: išversti () -50%, -50%); img (ekranas: blokas;))

7 variantas. Mygtukas.

Vartotojas azproduction variantas kur blokas yra įrėminta mygtuko žymoje. Mygtukas turi galimybę centruoti viską, kas jame yra, būtent inline ir inline-block modelių elementus. Praktiškai nerekomenduoju jo naudoti.

Parent (plotis: 100%; aukštis: 100%; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis; fonas: nėra; kraštinės: nėra; kontūras: nėra;) .block (rodymas: inline-block; img (ekranas: blokuoti ;; kraštinė: nėra;))

Premija

Naudodamiesi 4-osios parinkties idėja, galite nustatyti išorinį paminkštinimą blokas, o pastarasis bus tinkamai rodomas apsuptas slinkties juostomis.
Pavyzdys: jsfiddle.net/serdidg/nfqg9rza/2.

Taip pat galite išlygiuoti paveikslėlį centre, o jei paveikslėlis didesnis tėvas, padidinkite jo mastelį, kad tiktų tėvas.
Pavyzdys: jsfiddle.net/serdidg/nfqg9rza/3.
Pavyzdys su dideliu paveikslu:

Jei iškirpsite bet kurią svetainę pagal html, pamatysite tam tikrą sluoksnio struktūrą. Be to, savo išvaizda jis bus panašus į sluoksniuotą tešlą. Jei taip manote, greičiausiai ilgą laiką nevalgėte. Taigi pirmiausia pamaitinkite alkį, o tada parodysime, kaip svetainėje sutelkti „div“ sluoksnį:

Žymėjimo privalumai

Yra du pagrindiniai svetainės struktūros kūrimo tipai:

• Lentelinis;
• Blokuotas.

Lentelių išdėstymas dominuoja nuo pat interneto aušros. Jo pranašumai yra nurodytos padėties nustatymo tikslumas. Tačiau, nepaisant to, jis turi akivaizdžių trūkumų. Pagrindiniai yra kodo apimtis ir mažas atsisiuntimo greitis.

Naudojant lentelės išdėstymą, tinklalapis nebus rodomas tol, kol jis nebus visiškai įkeltas. Tuo tarpu naudojant div blokus, elementai rodomi iš karto.

Be didelio įkėlimo greičio, blokinė svetainės konstrukcija leidžia kelis kartus sumažinti html kodo kiekį. Įskaitant naudojant CSS klases.

Tačiau norint struktūrizuoti duomenų pateikimą puslapyje, turėtų būti naudojamas lentelės išdėstymas. Klasikinis jo naudojimo pavyzdys yra lentelių rodymas.

Blokuoti pastatą pagal žymas