Kom ons kyk na die roosterontwerp van die werf en breek die individuele komponente uiteen. Kom ons ondersoek waarom vlot so nuttig is, sowel as die gewilde tegniek om die eerste webrooster uit drie strome en 'n voetskrif te bou.
Om die roosterkonstruksie van 'n terrein te bestudeer, moet u verstaan wat 'n "vloei" is. Vloei is die elemente van die werf, wat een na die ander geleë is. Dit kan byvoorbeeld div-elemente wees wat standaard na mekaar gaan. Maar die vloei kan herrangskik word en die posisie van die blokelemente kan verander word.
Om die vloei te beheer, gebruik ons die float-eienskap, wat die blok aan die linker- of regterkant kan plaas. Dit is genoeg om in die CSS-lêer te skryf:
"klas- of bloknaam" {float: regs / links; }
Die enigste nadeel van float is die vermoë om een blok op die ander te "oorvleuel".
Om te verhoed dat ons oorloop, gebruik ons duidelik: beide - hierdie eienskap sal die vloei rondom die blok stel. Ons stel die breedte en hoogte as maksimum en minimum, sodat die waarde gevorm word volgens die grootte van die inhoud (teks, beelde). Marge - stel die waarde op outomaties sodat eksterne marges outomaties gevorm word, afhangende van die ligging van die blok.
Aangesien float blokke in twee rigtings kan plaas, is dit gebruiklik om die werf in strome te verdeel - links en regs. As die programmeerder net twee strome nodig het, laat hy die linker- en regtervloei, maar as daar meer as twee is, pas hy die marges aan met marge. Hoe gebeur dit:
.kolom1 {vlot: links; breedte: 65px; min-hoogte: 50 px; marge-regs: 9px; // 9px vanaf middelste boks}
2 stroom:
.kolom2 {vlot: links; // na die linkerblok, maar sonder om te "oorvleuel", aangesien ons marge breedte toegepas het: 80px; min-hoogte: 50 px; }
3 stroom:
.column3 {float: regs; breedte: 65px; min-hoogte: 50 px; }
Omgang met die voetskrif (.footer):
.footer {duidelik: albei; // draai om albei kante}
Dit is hoe ons 'n rooster vir die werf met behulp van float gemaak het, bestaande uit drie strome.
