vartotojas slaptažodis


   
registracija slaptažodžio priminimas  
naujienos | forumas | paieška | taisyklės | kontaktai

Šiuo metu prisijungę vartotojai: Sekretore, ir 1 svečiai Iš viso narių: 6,053 Naujausias narys: DeividasJ


Peržiūrėti temą Forumas :: Programuotojų kampelis :: CSS :: CSS dėžės modelis
CSS dėžės modelis
Autorius: ecolor Data: 2013.03.12 22:37



ecolor Įstojo: 2011.06.13
Pranešimai: 3940
Reputacija: [+263]
Lankėsi: 2019.04.07
Laimėta: 25
Pralaimėta: 15
  #1 parašyta 2013.03.12 22:37

Įspėjimai: [0/5]
AK Reitingas ->(136.81)
12
Kovo
2013
CSS dėžės modelis

Visus HTML KALBOS elementus gali svarstyti kaip dėžės. CSS, trukmė "dėžės modelis" yra panaudota, kalbėdama apie projektą ir sustatymą.

CSS dėžės modelis yra iš esmės dėžė, kuri vynioja aplink HTML KALBOS elementus, ir jis susideda iš: margins, borders, padding, ir actual content.

Dėžės modelis leidžia mums padėti rėmelį aplink elementus ir erdvės elementus dėl kitų elementų.

Atvaizdas apačioje iliustruoja dėžės modelį:

img841.imageshack.us/img841/5647/htmlstraipsnis.png

Skirtingų dalių paaiškinimas:

Riba - Margin - Išvalo viską aplink rėmelį. Riba neturi foninės spalvos, tai yra visiškai skaidru

Rėmelis - Border - rėmelis, kuris eina aplink padding ir turinį. Rėmelis yra paveiktas foninės spalvos dėžės

Pamušimo pamušalu - Padding - Išvalo viską aplink turinį. Pamušimas pamušalu - padding yra paveiktas foninės spalvos dėžės

Turinio - Content - dėžės turinys, kur tekstas ir atvaizdai atrodo

Kad nustatytų plotį ir aukštį elemento teisingai visose naršyklėse, jūs turite žinoti, kaip dėžės modelis dirba.

Plotis ir elemento aukštis

Svarbus: Kai jūs nustatote pločio ir aukščio ypatybes elemento su CSS, jūs tiesiog nusttatote plotį ir aukštį turinio srities, kad apskaičiuotumėte pilną elemento dydį, jūs turite taip pat pridėti pamušimą pamušalu (padding), rėmelius (borders) ir ribas (margins).

Visas plotis elemento pavyzdyje apačioje yra 300px:

Atsisiųsti kodą  Kodas
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;



Padarykime matematiką:

250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

Mano, kad jūs turėjote tiktai 250px erdvės. Padarykime elementą su visu pločiu 250px:

Atsisiųsti kodą  Kodas
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;



Visas elemento plotis turi būti apskaičiuotas kaip tai:

Visas elemento plotis = width + left padding + right padding + left border + right border + left margin + right margin

Teisinga riba visas elemento aukštis turi būti apskaičiuotas kaip tai:

Visas elemento aukštis = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Naršyklių suderinamumo svarstoma problema

IE8 ir ankstyvesnės IE versijos, įtrauktas pamušimas pamušalu(padding) ir siena(border) pločio(width) ypatybėse.

Kad taisytumėte šią problemą, prisidėkite <! DOCTYPE HTML kalba> į HTML KALBOS puslapį.




Explow Įstojo: 2012.12.09
Pranešimai: 62
Reputacija: [+11]
Lankėsi: 2014.11.09
Laimėta: 0
Pralaimėta: 0
  #2 parašyta 2013.03.12 22:48

Įspėjimai: [0/5]
AK Reitingas ->(6.14)
12
Kovo
2013
Ačiū už straipsniuką, CSS mokiniams tikrai pravers, o patyrusiems praplės žinias :)


www.part.lt/img/27e0037767ada8f81f9832f3ebeaed75345.png



Peršokti į forumą:

Pastebejo tema
Skliaustuose rodoma kiek kartų vartotojas pastebėjo tema.

Meniu
Sprendimas
Draugai
   
naujienos
forumas
paieška
taisyklės
kontaktai
webdizainas: ignart0
įgyvendinimas: viprts
lfs.us.lt
cybercs.tt.lt
rank.our.lt
ip.zones.lt
Top Web Rank - Tinklalapiu Topas
Copyright (c) 2011 - 2019
All right reserved.