Laten we eens kijken naar het rasterontwerp van de site en de afzonderlijke componenten opsplitsen. Laten we eens kijken waarom float zo handig is, evenals de populaire techniek voor het bouwen van het eerste webraster uit drie streams en een sitevoettekst.
Om de rasterconstructie van een site te bestuderen, moet u begrijpen wat een "stroom" is. Flow zijn de elementen van de site, die zich achter elkaar bevinden. Dit kunnen bijvoorbeeld div-elementen zijn die standaard achter elkaar staan. Maar de stroom kan worden herschikt en de positie van de blokelementen kan worden gewijzigd.
Om de stroom te regelen, gebruiken we de eigenschap float, waarmee het blok aan de linker- of rechterkant kan worden geplaatst. Het is voldoende om in het CSS-bestand te schrijven:
"klasse- of bloknaam" {float: rechts / links; }
Het enige nadeel van float is de mogelijkheid om het ene blok op het andere te "overlappen".
Om overlopen te voorkomen, gebruiken we clear: both - deze eigenschap bepaalt de stroom rond het blok. We stellen de breedte en hoogte in, als maximum en minimum, zodat de waarde wordt gevormd volgens de grootte van de inhoud (tekst, afbeeldingen). Marge - stel de waarde in op auto zodat externe marges automatisch worden gevormd, afhankelijk van de locatie van het blok.
Omdat float blokken in twee richtingen kan plaatsen, is het gebruikelijk om de site in stromen te verdelen - links en rechts. Als de programmeur slechts twee streams nodig heeft, laat hij de linker en rechter floats staan, maar als er meer dan twee zijn, past hij de marges aan met behulp van marge. Hoe gebeurde dit:
.column1 {zwevend: links; breedte: 65px; min-hoogte: 50px; marge-rechts: 9px; // 9px van middelste vak}
2 stromen:
.column2 {zwevend: links; // naar het linkerblok, maar zonder "overlapping", aangezien we margebreedte hebben toegepast: 80px; min-hoogte: 50px; }
3 stroom:
.column3 {zweven: rechts; breedte: 65px; min-hoogte: 50px; }
Omgaan met de voettekst (.footer):
.footer {wissen: beide; // wikkel beide kanten om}
Zo hebben we met float een grid gemaakt voor de site, bestaande uit drie streams.
