. Statant pastatą jis panašus į plytą. Nors ji yra svetainės pagrindas ir dizainas, ji nėra vienintelė. Kaip ir durys, langai, ventiliacija, balkonai ir panašiai, maketavimui naudojami kiti HTML elementai. Tai nuorodos, formos, paveikslėliai, sąrašai ir lentelės.
leido mums padaryti kodą kompaktiškesnį ir aiškesnį. Perėjimas prie blokinio išdėstymo leido atsikratyti HTML nuo nereikalingų dalykų, būtent stilių. Sudarė galimybę visiškai pašalinti perkrautą ir sunkiai naršytą lentelės išdėstymą.
Aktyviai naudoja CSS blokų išdėstymą. Naudodami turimus įrankius galite sukurti bet kokį puslapio išdėstymą pikselių tikslumu. Šis išdėstymas vadinamas tobulu pikseliu. Tai reiškia puikų svetainės ir išdėstymo atitikimą. Aukščiau esančioje nuotraukoje matyti, kad su blokų išdėstymu ne viskas taip paprasta. Iš pradžių tiesiog nebuvo įmanoma apsieiti be stalų. Iš jų buvo sukurtas pagrindinis puslapių maketas, o blokeliai – atskiriems elementams. Taip buvo tol, kol išmoko nustatyti blokų aukštį.
Privalumai
Blokuotas svetainės išdėstymas turi šiuos privalumus:
Tolimesnis vystymas
Šiuo metu bloko div išdėstymas yra pasenęs ir naudojamas tik ribotai, tik kaip ypatingas atvejis tam tikrose situacijose. Jis buvo pakeistas išdėstymu ir srautu. Jie turėjo daug trūkumų, tačiau apskritai jie leido daugiau nei blokuoti.
Toliau sekė statyba naudojant inline-block elementus. Tai labai palengvino programuotojų darbą. Šis metodas išnaudoja abiejų tipų blokus ir leidžia sukurti jautresnį ir labiau prisitaikantį dizainą. Verta paminėti, kad visi šie metodai vienaip ar kitaip susideda iš div elemento, dėl kurio jis buvo pavadintas „nuostabus išdėstymas“.
Šiuo metu puslapiui kurti naudojami „Flex-box“ ir „bootstrap“. Jie žymiai sumažina kodą ir leidžia greičiau bei lengviau sukurti aukštos kokybės interaktyvų dizainą. Jie leidžia perkelti blokus nepažeidžiant viso puslapio.
Pažangos priešakyje yra nauja technologija – Grids. Tai leidžia labai greitai ir lengvai sukurti bet kokio sudėtingumo dizainą. O blokai, srautas, pozicionavimas, kaip atsitiko su lentelėmis vienu metu, naudojami tik pagal paskirtį.
„Div“ išdėstymas yra dabartinis svetainės kūrimo modelis.
Internete nuolat atsiranda naujų svetainių – naujienų portalų, tinklaraščių ir asmeninių puslapių. Beveik kiekvienas iš jų yra sukurtas bloko modelio pagrindu, kurio pagrindas yra DIV blokai. Šiandien mes suprasime šią technologiją, apsvarstysime pagrindinius div išdėstymo niuansus.
HTML dokumentų srautas
Jei prisiminsime, kad HTML kalba leidžia struktūrizuoti hiperteksto informaciją, tampa aišku, kad bet kuri svetainė savo esme yra blokų rinkinys: paveikslėliai, tekstas, nuorodos ir kt. Šiuo metu mes nekalbame konkrečiai apie DIV, bet tai yra glaudžiai susijusios temos.
Taigi, mes turime tam tikrą duomenų srautą, iš kurio surenkamas HTML puslapis. Šiuo metu yra dviejų tipų konstrukciniai elementai: blokiniai ir inline. Įprastame HTML sraute blokų blokai yra išdėstyti vienas po kito vertikalia tvarka. Tuo pačiu metu pagal numatytuosius nustatymus bloko plotis užima visą laisvą vietą, palyginti su puslapiu arba pirminiu elementu. Savo ruožtu įterptieji elementai yra išdėstyti vienas po kito horizontalia tvarka.
Pagrindiniai šių dviejų kategorijų atstovai yra div ir span žymos.
Atitinkamai, jei kalbame apie įprastą HTML srautą, visi div blokai bus išdėstyti vienas po kito, o intervalas bus vienoje eilutėje.
Kaip suprantate, negalėsite sukurti įprasto svetainės žymėjimo naudojant įterptus elementus. Todėl prieš keletą metų, norėdami pakeisti lentelės išdėstymą, jie nusprendė naudoti maketą pagal DIV blokus.
DIV svetainės išdėstymas
Taigi, svetainei pažymėti buvo pradėti naudoti DIV blokai. Juos naudojant buvo galima nubraižyti pagrindinį maketą ir sukurti papildomus blokus visoms reikalingoms turinio rūšims.
Pažvelkime į šį procesą naudodami standartinio puslapio, kuriame yra antraštė, turinio blokas, šoninė juosta ir poraštė, pavyzdį.
Tai klasikinis variantas. Logotipas dažniausiai yra svetainės antraštėje, o naršymo nuorodos – šoniniame bloke. Pagrindinis blokas naudojamas informacijos atvaizdavimui – straipsniams, įmonių aprašymams, nuotraukų archyvams ir kt. Apatiniame bloke galite įterpti adresą, kontaktus ir kitą paslaugų informaciją.
Kaip matote paveikslėlyje, maketo išdėstymui naudojame šiuos pagrindinius blokus:
Pagrindinis blokas naudojamas kaip viso turinio talpykla. Antraštė – svetainės antraštė. Nav - navigacijos blokas. Turinys – pagrindinė informacija ir turinys. Poraštė – svetainės poraštė.
Kiekvienas iš šių blokų yra DIV konteineris. Tačiau remiantis teorija, blokai turėtų sekti vienas kitą. Turime gauti aukščiau aptartą išdėstymą, kad blokai turėtų tokią struktūrą:
Be to, jie būtų puslapyje taip pat, kaip matome šablone. Kaip mes galime tai pasiekti? Šiuo tikslu naudosime DIV blokų savybes, kurios leis juos išdėstyti norimu būdu, vienas kito ir viso puslapio atžvilgiu.
Bet pirmiausia sukurkime savo maketo HTML pagrindą ir suteikime blokams pavadinimus, kad galėtume dirbti su stiliaus lapais.
HTML sistema
Jei praleisime visas paslaugų žymas, mūsų svetainės skeletas atrodys taip.
Kiekvienam blokui priskiriame klasę. Su jo pagalba nustatysime bloko stilius – tai padės pasiekti norimą vietą puslapyje.
Atėjo laikas susipažinti su stiliais ir savybėmis, kurios naudojamos svetainės div išdėstymui.
CSS stiliai
Jei kas dar nežino, CSS stiliaus lapai svetainių kūrime naudojami jau seniai. Su jų pagalba galite pakeisti bet kurį puslapio elementą. Tai taikoma tiek vizualiniam bloko dizainui, tiek jo vietai ir mastui.
Plūdė
Pirmiausia pažvelkime į ypatybę, kurią naudojant galima nustatyti DIV puslapio dešinėje arba kairėje arba pirminio sudėtinio rodinio atžvilgiu.
Mažas atsitraukimas. Kai blokui priskirsime stilių, jis pakeis jo savybes (dydį, vietą), palyginti su pagrindiniu konteineriu.
Plūduriuojanti nuosavybė turi keturias reikšmes: nėra, dešinė, kairė, paveldima.
Mus domina „kairė“ ir „dešinė“ reikšmė.
Slankioji reikšmė rodo, kurioje pusėje bus rodomas mūsų blokas. Visi kiti blokai tekės aplink jį iš priešingos pusės.
Mūsų atveju naršymo bloke turime nurodyti reikšmę left , o pagrindiniam turiniui – dešinę . Štai kaip tai atrodys stiliaus faile:
Nav ( plaukimas: kairėn; ) .turinys ( plaukimas: dešinėn; )
Beje, ypatybę galite nustatyti tik naršymo blokui. Turinio blokas automatiškai atsiras navigacijos dešinėje. Tai bus pasiekta dėl plūdės, kuri gaunama nustatant plūdės savybę.
CSS paraštės: paraštės ir užpildymas
Dabar supraskime dvi svarbias savybes, naudojamas „div“ pagrindu sukurtame išdėstyme. Jie yra atsakingi už įtraukimą. Lengviausias būdas suprasti jų darbo esmę yra pavyzdžiu.
Įsivaizduokime, ką turime padaryti, kad mūsų pagrindinis blokas MAIN turėtų nedidelę įtrauką nuo svetainės antraštės. Tai galima pasiekti priskiriant maržos ypatybę div su pagrindine klase. Ji yra atsakinga už išorinį bloko paminkštinimą.
Maržos ypatybės reikšmės yra šios: [vertė | palūkanos | auto] (1,4) | paveldėti.
Taigi galite nurodyti kiekvienos pusės poslinkį taškais procentais.
Galima nustatyti tik tam tikrą įtrauką, pavyzdžiui, viršutinėje pusėje. Būtent toks yra mūsų atvejis. Štai kaip jis bus įgyvendintas:
Pagrindinis ( paraštės viršuje: 10 piks.; )
Dabar mūsų pagrindinis blokas turės 10 pikselių viršutinį užpildą.
Dabar sukurkime bloką su navigacija ir turiniu. Įsivaizduokite, kad mes jau turime paruoštą svetainę. Visos navigacijos nuorodos yra netoli kairiojo puslapio krašto. O tekstas turinio bloke, atvirkščiai, yra glaudžiai greta dešinės pusės. Gan nemalonus dizainas. Turime padaryti vidinį užpildą.
Už tai atsakinga užpildymo ypatybė, turinti šias reikšmes: [value | proc.] (1, 4) | paveldėti
Principas čia toks pat kaip ir marginimo savybėje – galite nustatyti įtrauką kiekvienai pusei atskirai.
Navigacija ( slankusis: kairėn; užpildymas kairėje: 15 tšk.; ) .turinys ( plaukimas: dešinėn; užpildymas dešinėje: 20 pikselių; )
Naudodami šias pagrindines savybes galite pasiekti norimą DIV blokų išdėstymą. Rezultate gausite jau paruoštą svetainės maketą, o beliks tik užpildyti ją reikiama informacija.
Straipsnio vaizdo įrašas:
Išvada
Mes atsižvelgėme tik į pagrindines savybes. Tiesą sakant, jų yra daug daugiau. Bet bet kuriuo atveju pateikta informacija visada bus naudojama div išdėstyme.
Kam ieškoti informacijos kitose svetainėse, jei čia viskas surinkta?
Autoriaus straipsnių ciklas, skirtas blokinio svetainės išdėstymo pagrindai. Tai pirmoji vieta, kur pradėti studijuoti temą. interneto svetainės kūrimas. Pamokos bus naudingos tiems, kurie nori išmokti pagrindus HTML ir CSS ne tik teoriškai, bet ir praktiškai.
Studijuodami temą sukursime svetainę, įprastą svetainę, be jokių specialių varpelių ir švilpukų, bet gana gražiai.
Pamokose paprastai ir aiškiai kalbu apie tinklalapio išdėstymą blokais ir ne tik. Jei norite greitai suprasti pagrindus svetainių maketai, tada ši straipsnių serija bus būtent tai, ko jums reikia.
Kas yra bloko išdėstymas?
Kas nutiko blokuoti svetainės išdėstymą o su kuo valgai?
Anksčiau svetainės buvo kuriamos naudojant lenteles. Kiekvienas puslapio elementas, nesvarbu, ar tai pavadinimas, tekstas ar vaizdas, buvo savo langelyje. Šios ląstelės knibždėte knibžda kitose didesnėse ląstelėse, o tos, savo ruožtu, buvo pagrindinėje ląstelėje, ty pačiame svetainės puslapyje.
Lentelių išdėstymas dabar yra pasenęs, nors daugelis žiniatinklio valdytojų ir toliau jį naudoja. Jo didelis trūkumas yra sunkus kodas. Galų gale, kiekviena maža ląstelė turi būti pažymėta tam tikromis žymomis.
Blokų išdėstymas- visiškai kitokia daina. Čia visi puslapio elementai yra specialiuose blokuose, vadinamuose div. Iš esmės jie yra šiek tiek panašūs į tas pačias lenteles. Dėžutė Afrikoje taip pat yra dėžutė. Tačiau blokeliai yra daug patogesni, paprastesni ir funkcionalesni.
Blokuoti svetainės išdėstyme tai įprasta stačiakampė sritis, turinti daugybę savybių, tokių kaip rėmelis, paraštės ir įtraukos. Bloko turinys gali būti bet koks – tekstas, paveikslėlis, sąrašas, pildoma forma, naršymo meniu ir kt.
Rėmas- tai yra bloko kontūras, kuriam galite nustatyti tokias charakteristikas kaip storis, spalva ir tipas (taškuotas, vientisas, taškuotas).
Laukai (pamušalas)- atskirkite bloko turinį nuo jo rėmelio, kad, pavyzdžiui, tekstas nebūtų „užmuštas“ prie bloko sienų.
Paraštės- tai tuščia erdvė tarp skirtingų blokų, leidžianti du blokus išdėstyti vienas kito atžvilgiu tam tikru atstumu.
Blokai, kaip ir lentelės, puslapyje visada išdėstomi vertikaliai. Tai yra, jei puslapio kode iš eilės įrašyti du blokai, jie naršyklėje bus rodomi vienas po kito. Jei reikia išdėstyti kelis blokus horizontaliai vienoje eilutėje, tada jų savybėse nustatome tokį parametrą kaip „ tekėti aplinkui"(plūdė). Bet apie tai vėliau.
Blokuoti svetainės išdėstymą. Žymos
Žyma yra ypatinga HTML kalbos konstrukcija. Išskirti atidarymas Ir uždarymasžymės. Nepainiokite jų su grotažymėmis iš socialinių tinklų ar žymomis svetainėse – tai skirtingi dalykai!
Paprasčiausiu atveju žyma yra tarsi vaikiško konstravimo komplekto dalis, kuri turi savo griežtą paskirtį: strypas reiškia strypą, ratas – ratą ir nieko daugiau. Pavyzdžiui, pastraipos žyma:
Pastraipos tekstas.
visada žymimas raide p ir niekuo daugiau. Tai jo vardas.
Žymos visada pateikiamos kampiniuose skliaustuose. Kaip matote iš pavyzdžio, yra atidarymo ir uždarymo žymos. Baigiamojoje žymoje prieš pavadinimą pridedamas pasvirasis brūkšnys – pasvirasis brūkšnys / .
Ne visos žymos turi uždaromąją porą. Pavyzdžiui, img vaizdo žymoje jos visai nėra. Tačiau, kad atitiktų šiuolaikinius standartus ir XHTML specifikacijos reikalavimus, jie vis tiek prideda tarpą su pasviruoju brūkšniu prieš uždarymo kampinį skliaustą. Tai atrodo maždaug taip:
div žyma
Div žyma yra bloko išdėstymo pagrindas. Tai yra patys kubeliai, iš kurių pastatyta visa svetainė. Ši žyma yra neutrali. Skirtingai nuo standartinių HTML žymų, kurios yra griežtai susietos su jų turiniu (p – pastraipoms, a – nuorodoms, img – vaizdams), „div“ žymoje gali būti visko ir tiek, kiek norite. Apsvarstykite tai kaip didelę dėžę, kurioje išmesti visi žaislai.
Div žyma naudojama apibrėžti funkcines sritis puslapyje. Pavyzdžiui, „antraštė“, naršymo blokas, pagrindinis turinio blokas, „poraštė“ arba, mūsų nuomone, poraštė.
Div žyma, kaip ir bet kuri kita žyma, turi savo atributus.
Atributas- aprašomosios žymos charakteristikos. Tai yra, ką jis gali padaryti ir kaip. Pavyzdžiui, paimkime vaizdo žymą:
Šiuo atveju src, plotis, aukštis, alt yra žymos atributai. Pateikiami kabutėse (ir tai taip pat privalomas šiuolaikinių standartų reikalavimas). vertybes atributai.
Tokį įrašą iššifruoti nesunku. Žyma nurodo, kad šioje puslapio vietoje reikia prisegti paveikslėlį risunok.jpg iš vaizdų aplanko. Vaizdo plotis 200 pikselių, aukštis 50 pikselių. Ir prie krūvos buvo pridėtas alternatyvus tekstas, paaiškinantis, kas parodyta paveikslėlyje.
Beje, alternatyvus tekstas – ne užgaida, o ir būtinas reikalavimas. Ne visi internautai turi gerą regėjimą. Kažkas naudoja teksto atpažinimo ir skaitymo programą. O kai kurie žmonės tiesiog išjungia vaizdų rodymą naršyklėje. Štai kodėl yra alternatyvių brėžinių antraštės.
Jei nėra prasmės jas pasirašyti (pavyzdžiui, sąrašo žymeklis ar kažkokia rodyklė), tada alt atributas paliekamas tuščias tarpas tarp kabučių.
div žymos atributai
Div žyma turi tik du atributus:
id – atributas, leidžiantis priskirti Unikalus vertę, ty tą, kuri naudojama puslapyje tik vieną kartą. Pavyzdžiui, antraštė arba poraštė.
Tokiu būdu stiliaus lape galime toliau nustatyti kai kuriuos div žymos nustatymus su id atributu ir antraštės reikšme, o poraštės – visiškai skirtingus. Ir naršyklė teisingai atpažįsta, kad ši teksto dalis priklauso „antraštei“ ir bus įvesta, pavyzdžiui, dideliu ir raudonu šriftu, tačiau šis priklauso „poraštei“ ir bus įvestas mažu ir pilku šriftu. Ir jokios painiavos!
klasė yra atributas, leidžiantis priskirti tą pačią reikšmę keliems elementams. Pavyzdžiui, pridėkite vienodo storio ir spalvos rėmelį prie visų vaizdų puslapyje. Kadangi yra keli vaizdai, atributo id nebegalima naudoti, todėl naudojame class .
Pirmą kartą manau, kad to užtenka. Jei kas nors neaišku dėl svetainių blokų išdėstymo, klauskite komentaruose.
Tęsinys. Palaikykite ryšį!
Išdėstymas su div blokais jau seniai tapo standartu ir turi daug privalumų, palyginti su lentelių išdėstymu. Tačiau iš tikrųjų pradedantieji kūrėjai yra sumišę dėl tų pačių blokų elgesio.
Pažvelkime į pagrindinius bloko išdėstymo taškus. Dabar neatsižvelgsime į html5 standartą, o tiesiog pažvelgsime į maketavimo pagrindus su div blokais, kurie naudojami kuriant maketą ar kokį atskirą puslapio komponentą.
Kas laikomas blokiniu elementu?
Tokio elemento plotas puslapyje pavaizduotas stačiakampiu; pagal numatytuosius nustatymus jis užima visą galimą plotį ir prasideda nuo naujos eilutės.
Dažniausiai blokų išdėstymui naudojamas elementas yra universalus elementas
.
Taigi, nuo paprasto iki sudėtingo. Pažiūrėkime, kaip „div“ rodomi pagal numatytuosius nustatymus, stiliams nepaveikiant jų padėties. Aiškumo dėlei pridėsime stilių prie elementų eilutėje naudodami stiliaus atributą.
1 blokas
2 blokas
3 blokas
Pridėkime kiekvieno bloko pločio reikšmę:
1 blokas
2 blokas
3 blokas
Matyti, kad kiekvienas blokas, pagal specifikaciją, yra naujoje linijoje. Tai normalus jų elgesys.
Dabar kyla klausimas, kaip pozicionuoti Div blokai vienoje eilutėje, vienas po kito?
Šiuo tikslu yra savybė, kuri nustato, kurioje pusėje blokas bus priverstas lygiuotis. Tuo pačiu metu iš kito krašto jis gali tekėti aplink kitus elementus.
Plūdės savybė turi šias reikšmes:
- kairėje - blokas išlygiuotas su kairiuoju kraštu, teka į dešinę
- dešinė - blokas išlygiuotas į dešinįjį kraštą, teka į kairę
- none – įvyniojimas nenurodytas, blokas veikia pagal nutylėjimą, kaip ir ankstesniuose pavyzdžiuose.
Prie savo blokų pridėkime float:left, kad blokai būtų sulygiuoti į kairę:
1 blokas
2 blokas
3 blokas
Dėl to blokai išsirikiavo vienoje eilutėje. Gerai, tarkime, kad norėjome pridėti dar vieną div apačioje ir tai padarysime nenurodydami slankiosios savybės:
1 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4 skyrius. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4 skyrius. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Kodėl taip atsitiko? Trumpai tariant, taip nutinka todėl, kad plūduriuojantys elementai iškrenta iš dokumento srauto. Tačiau tai yra atskiro straipsnio tema. Čia susipažinsime su nauja savybe, kuri valdo slankiųjų elementų elgesį:
- kairėje – išjungiamas vyniojimas kairėje pusėje, visi elementai bus rodomi naujoje eilutėje (po elementu)
- teisingas – neleidžia elementui apsivynioti dešinėje pusėje
- abu - draudžia apvynioti elementą iš abiejų pusių; rekomenduojama jį naudoti, kai aiškiai reikia parodyti elementą naujoje eilutėje arba nežinoma, kurią pusę galima apvynioti aplink kitus elementus
Prie 4 bloko pridėkime ypatybę clear:left, kuri neleis šiam elementui tekėti aplink kitus kairėje pusėje esančius slankiuosius elementus.
1 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4 skyrius. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4 skyrius. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4 blokas dedamas į naują eilutę, kaip mums reikia.
Šiuo atveju mes žinome, kaip yra kiti blokai, todėl pavyzdyje iš karto nurodėme aiškiai: kairėje. Būna situacijų, kai tiksliai nežinome, į kurią pusę susidurs plaukiojantis blokas, todėl tokiais atvejais verta nurodyti aiškų:tiek, kas panaikina srautą iš abiejų pusių. Dabar mes supratome, kaip vienoje eilutėje išdėstyti div blokus horizontaliai.
Atminkite, kad plūduriuojantys blokai dedami ant tos pačios linijos, jei leidžia pirminio elemento plotis. Jei bloko elementai netelpa į eilę, jie persikelia į naują eilutę. Jei tai labai svarbu, pavyzdžiui, dėliojant maketus, reikia į tai atsižvelgti, o blokams su plūdine būtinai nustatykite plotį – fiksuotą (px) arba guminį (%, rem ir pan.). Toliau panagrinėkime tokias situacijas.
Kaip paveikti blokus, jei norime šiuos blokus sudėti į centrą?
Klasikinis sprendimas būtų pridėti prie blokų pirminį elementą ir naudoti paraštę: 0 auto; property.
Kodėl tėvui davėme klasę.vyniotuvą? „wrapper“ reiškia „įvynioklis“. Tai savotiška visuotinai priimta praktika, apibrėžianti klasės pavadinimą, kai elementas apvynioja kitus blokus ir taip leidžia juos valdyti/įtakoti keičiant patį pagrindinį elementą.
Paimkime žymėjimą iš ankstesnių pavyzdžių ir patobulinkime jį.
1 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4 skyrius. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
2 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
3 blokas. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4 skyrius. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Čia viskas atrodo paprasta.
Ir jei mums nepatinka, kad tekstas prilimpa prie pagrindinio bloko krašto ir norime pridėti laukų nekeisdami žymėjimo, tik naudodami css. Pridėkime užpildymo ypatybę prie elementų:
Blokas 1. Loremas
2 blokas. Lorem ipsum
3 blokas. Lorem ipsum
Blokas 4. Loremas
Ir mes matome, kad mūsų išdėstymas subyrėjo! 3 blokas kažkur dingo. Kodėl taip atsitiko? Atsakymas paprastas. Pridėję laukus prie elementų padidinome jų plotį. Dabar vertės yra šios:
1 blokas: 10 + 200 + 10 = 220 taškų
2 blokas: 10 + 150 + 10 = 170 taškų
3 blokas: 10 + 100 + 10 = 120 taškų
4 blokas: 10 + 450 + 10 = 470 taškų
220 + 170 + 120 = 510 tšk
Bendras trijų blokų plotis yra 510, jie netelpa į pagrindinio bloko plotį (450), todėl perkeliami į naują eilutę.
Kaip tai ištaisyti? Galite atlikti šiuos veiksmus:
- Iš naujo nustatykite kiekvieno bloko pločio reikšmes, atsižvelgiant į paraštes. Sumažinus blokų dydžius. Viskas vėl tvarkingai tilps į vieną eilutę. Ar sutinkate, kad tai nepatogu? Kiekvieną kartą įsijungiu į maketą ir ką nors redaguoju.
- Naudokite langelio dydžio savybę: border-box. Taigi, kad skaičiavimas būtų paimtas iš viso bloko pločio. Patariu pasidomėti, koks yra css bloko modelis.
Naudojant antrąjį variantą, viskas pasirodo taip:
Blokas 1. Loremas
2 blokas. Lorem ipsum
3 blokas. Lorem ipsum
Blokas 4. Loremas
Blokas 1. Loremas
2 blokas. Lorem ipsum
3 blokas. Lorem ipsum
Blokas 4. Loremas
Dabar sudėkime visą gautą informaciją ir pabandykime sukurti paprastą standartinį trijų stulpelių maketą su lanksčiu išdėstymu, kuris išsitemps iki maksimalaus 900px, po kurio visas maketas bus išdėstytas centre.
Sukurkite išdėstymo žymėjimą:
dokumentas
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci guessnda earum!
Rašome stilius:
Body (maksimalus plotis: 900 piks.; /* apriboti maksimalų plotį */ paraštė: 0 automatinis; ) /* visiems blokams korpuso viduje, pakeisti bloko pločio skaičiavimo algoritmą ir pridėti 10 pikselių paraštes prie visų blokų */ body div ( - webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; ) .header ( fonas: #CCA69E; padding: 10px; ) .left- šoninė juosta ( plotis: 20 %; fonas: #8ED9B6; plūduriuoti: kairėje; ) .turinys ( slankioji: kairė; plotis: 60 %; ) .dešinė šoninė juosta ( plotis: 20 %; fonas: #FF9282; plūduriavimas: kairėje; ) .footer (fonas: #000; aiškus: abu; /* išjungti vyniojimą iš abiejų pusių, blokas rodomas naujoje eilutėje */ spalva: #ccc; )
Jei kažkas neaišku, klauskite komentaruose.
Gali būti naudinga perskaityti: