Låt oss ta en titt på webbplatsens rutnätdesign och dela upp de enskilda komponenterna. Låt oss utforska varför flyt är så användbart, liksom den populära tekniken för att bygga det första nätet från tre strömmar och en sidfot.
För att studera nätkonstruktionen för en webbplats måste du förstå vad ett "flöde" är. Flöde är elementen på webbplatsen, som ligger en efter en. Dessa kan till exempel vara div-element som går efter varandra som standard. Men flödet kan ordnas om, och blockelementens position kan ändras.
För att kontrollera flödet använder vi float-egenskapen, som kan placera blocket på vänster eller höger sida. Det räcker att skriva i CSS-filen:
"klass eller blocknamn" {float: höger / vänster; }
Den enda nackdelen med float är möjligheten att "överlappa" ett block ovanpå ett annat.
För att undvika att köra över använder vi tydligt: båda - den här egenskapen ställer in flödet runt blocket. Vi ställer in bredden och höjden, som maximalt och minimalt, så att värdet bildas efter innehållets storlek (text, bilder). Marginal - ställ in värdet på auto så att externa marginaler bildas automatiskt beroende på platsen för blocket.
Eftersom flottör kan placera block i två riktningar är det vanligt att dela webbplatsen i strömmar - vänster och höger. Om programmeraren bara behöver två strömmar, lämnar han vänster och höger flottör, men om det finns fler än två, justerar han marginalerna med hjälp av marginal. Hur händer detta:
.column1 {float: left; bredd: 65px; min höjd: 50px; marginal-höger: 9px; // 9px från mittrutan}
2 ström:
.column2 {float: left; // till vänster block, men utan "överlappning", eftersom vi använde marginalbredd: 80px; min höjd: 50px; }
3 ström:
.column3 {float: höger; bredd: 65px; min höjd: 50px; }
Att hantera sidfoten (.footer):
.footer {klart: båda; // linda runt båda sidor}
Så här skapade vi ett rutnät för webbplatsen med hjälp av float, bestående av tre strömmar.
