Css dėžutės modelis

Dėžutės modelis CSS aprašo langelius, sugeneruotus iš HTML elementų. Dėžutės šablone taip pat yra išsamios kiekvieno elemento paraštės, kraštinės, užpildymo ir turinio nustatymo parinktys. Toliau pateiktame paveikslėlyje parodyta, kaip sukurtas dėžutės modelis.
Dėžutės modelis arba „dėžutės modelis“ yra neabejotinai svarbiausia CSS stiliaus lapų kalbos savybė, nes tai sąlygoja visų tinklalapių dizainą. Dėžutės modelis yra CSS elgesys, dėl kurio visi puslapių elementai vaizduojami stačiakampiais langeliais.
Vieno puslapio langeliai sukuriami automatiškai. Kiekvieną kartą įterpiant HTML žymą, sukuriamas naujas stačiakampis langelis, apimantis to elemento turinį. Šiame paveikslėlyje parodyti trys stačiakampiai langeliai, sukuriantys tris HTML žymas, kurias apima puslapis.

Iš tikrųjų visi svetainės elementai (pastraipos, nuorodos, vaizdai, lentelės ir kt.) Yra stačiakampiai langeliai. Naršyklės šiuos langelius talpina taip, kaip nurodėme, kad išdėstytų puslapį.
Yra dviejų tipų dėžutės: blokuoti ir įterpti. Bloko elementai nutraukia išdėstymo srautą. Tai yra, jie pasirodo vieni, įterpdami „eilučių lūžius“. Įterptieji elementai seka srautą ir yra bloko elementuose.
Pvz., Pastraipa būtų blokinis elementas (negalime turėti pastraipos šalia kitos, bet dvi pastraipos iš eilės bus rodomos viena po kitos. Kita vertus, nuoroda yra įterptas elementas, nes jis nėra „iškirpti“ tekstą ten, kur jis yra.
Dalys, sudarančios kiekvieną langelį, ir jų pateikimo tvarka vartotojo požiūriu yra šios:
Turinys (turinys): tai yra elemento HTML turinys (žodžiai pastraipoje, vaizdas, tekstas elementų sąraše ir kt.)
Paminkštinimas: Pasirenkama laisva vieta tarp turinio ir krašto.
Rėmelis: linija, kuri visiškai apgaubia turinį ir jo užpildą.
Fono vaizdas: Vaizdas rodomas už turinio ir užpildymo vietos.
Fono spalva: spalva rodoma už turinio ir užpildymo vietos.
Paraštė (paraštė): neprivalomas dėžutės ir kitų gretimų dėžių atskyrimas.
Paminkštinimas ir paraštė yra skaidrūs, todėl užpildymo erdvė rodo fono spalvą arba vaizdą (jei apibrėžta), o paraštės užimama vieta - pagrindinio elemento fono spalvą arba vaizdą (jei jis apibrėžtas). Jei nė vienas pirminis elementas neapibrėžia fono spalvos ar vaizdo, rodoma puslapio fono spalva arba vaizdas (jei jis apibrėžtas).
Jei langelis apibrėžia ir spalvotą, ir fono vaizdą, atvaizdas turi didesnį prioritetą ir yra tas, kuris rodomas. Tačiau jei fono paveikslėlis visiškai neuždengia elementų langelio arba jei paveikslėlyje yra skaidrios sritys, taip pat rodoma fono spalva. Derinant skaidrius vaizdus ir fono spalvas, galima pasiekti labai įdomių grafinių efektų.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką