Hej, idag kommer vi att titta på en så viktig del av webbplatsen som ett block, och den här artikeln är oupplösligt kopplad till artikeln om blockdesign där vi tittade på hur du kan skapa både blockbehållare och inbyggda element för vår webbplats på plats. Efter att ha studerat den här artikeln är jag säker på att vi kommer att bli mycket tydligare om hur man arbetar med block och detta kommer att vara ett mycket viktigt steg mot att skapa vår egen webbplats.

Blockhöjd och bredd i CSS.

Låt oss nu titta på huvudfunktionerna som hjälper oss att hantera utseende och placeringen av webbplatsblocken och efter det kommer vi att behöva omsätta all denna kunskap i praktiken och vi kommer att skapa en enkel ram för webbplatsen.

Höjden på ett block i CSS ställs in med kommandot höjd: auto|<высота в единицах измерения>|ärva och som du redan förstått kan vi ställa in höjden på blocket med autokommandot, vi ger kommandot till webbläsaren att den själv kan bestämma storleken på blocket och därmed blir blocket av en sådan storlek att passar alla element och inte mer.

Kommandot ärv låter dig låna parametrar från ett överordnat element och dessa värden kommer endast att vara synliga om parametrar har ställts in för det överordnade elementet. Men oftast måste du ställa in blockstorleken specifikt, ange bara storleken i ett av de accepterade värdena (oftast är dessa pixlar).

Vi kan också ställa in storleken i förhållande till det överordnade elementet och för detta behöver vi använda procentsatser. Låt oss se hur detta ser ut i praktiken.

Det här kommandot talar om för webbläsaren att ett specifikt element på sidan ska ställas in på en storlek på tio procent av storleken på det överordnade blocket.

Bredden på ett block i CSS ställs in med parametern width: auto|<ширина>|arv alla parametrar är lika för både höjden och bredden på blocket och jag tror att det inte är nödvändigt att upprepa det igen. Jag vill bara säga att det inte är nödvändigt att specifikt ställa in både höjd och bredd på blocket, du kan till exempel ställa in bredden och höjden kommer att öka beroende på innehållet, vilket är väldigt bekvämt om du inte vet vilket innehåll som kommer att finnas på specifik sida.

Minsta och maximala blockbredd.

Också för varje block kan vi inte ställa in specifika parametrar och minimi- och maxparametrarna för alla block på webbplatsen. Tack vare detta kan du fylla block utan rädsla för att de kommer att gå utanför webbläsarfönstret.

För att ställa in detta är mycket enkelt, vi måste ställa in följande parametrar för att ställa in minsta bredd och höjd:

min bredd:<ширина>

min-höjd:<высота>

Och för maximalt behövs två parametrar:

maximal bredd:<ширина>
maximal höjd:<высота>

Nu kan vi ställa in både max och minsta storlek för ett block eller helt för hela webbplatsen, och detta är viktigt för en webbplats med en gummidesign om den är fixerad, kommer denna parameter inte att fungera.

Alternativ för flytplacering i css.

I alla tidigare exempel där vi skapade behållare och element placeras efter varandra i ordning, men detta räcker inte för att vi ska skapa en design, vi behöver möjligheten att placera element efter eget gottfinnande och fastigheten hjälper oss med detta flyta i css och nu ska vi titta på ansökan av denna fastighet på praktiken.

Float-parametern kan ta flera värden, och nu kommer vi att ta reda på vad dessa parametrar är:

flyta: vänster|höger|ingen|ärva

Låt oss nu titta på varje exempel separat.

Kommandot float: left betyder att blocket ska riktas till vänster och alla andra element kommer att flyta runt det till höger.

float:right är raka motsatsen till föregående kommando och följaktligen kommer blocket att justeras till höger och alla element kommer att flyta runt det till vänster.

float:none är standardbeteendet för varje block, placerar blocken efter varandra. Användningen av denna parameter är inte relevant nu och den används mycket sällan och ganska enkelt av analfabetism.

Rensa parameter i css.

Mycket ofta, när du skapar en design på block med float-kommandot, måste du ge vissa block ett kommando så att de inte flyter runt blocket utan beter sig som vanligt och placeras under alla andra. Detta problem löstes tidigare med kommandot float:none önskat block men visningen i varje webbläsare kan vara olika och därför är det i sådana fall mycket mer rationellt att använda kommandot clear och nu ska vi se hur detta kan göras.

rensa: vänster|höger|båda|ingen|ärva

Kommandot har fyra parametrar, och nu kommer vi att ta reda på exakt vilka funktioner det utför med var och en.

Kommandot clear: left betyder att elementet placeras under alla element med parametern float: left.

Kommandot clear:right placerar ett block under alla element med float: right.

Parametern clear:both placerar elementet under alla block med både float: left och float: right parametrar.

klart: inget är normalt beteende för ett block. Denna parameter bör inte anges om flytande behållare har placerats tidigare.

Vi tillämpar all kunskap i praktiken.

Så vi har kommit till slutsatsen av artikeln där vi behöver se hur vi kan tillämpa allt detta i praktiken och det första vi kommer att göra är att skapa ett enkelt ramverk för webbplatsen. Så här kommer vår ram att se ut.

Som vi kan se kommer vi att behöva skapa fyra DIV-block för trådramen och på dem måste vi tillämpa både storleksparametrar och placeringsparametrar.

Vi har skapat fyra block och nu behöver vi fylla dem med information och ställa in bakgrunden för varje block så att vi kan se vilket block som finns och var. Du kan ta reda på hur du ställer in bakgrunden. Och det här är vilken typ av kod vi ska ha.

Efter detta måste vi gå till stilfilen och skriva ner alla kommandon vi behöver. Kommandona är alla desamma för alla block, bara vart och ett har sina egna parametrar.

Rubrik(bredd:500px; blockbredd
höjd:100px; blockhöjd
bakgrundsfärg:#33CCFF;) blockfärg

Innehåll (bredd:400px; blockbredd
höjd:400px; blockhöjd
bakgrundsfärg: #33FF33; blockfärg
flyta: vänster;) blockläge

Sidofält (bredd:100px; blockbredd
höjd:400px; blockhöjd
bakgrundsfärg: #CCCCCC; blockfärg
float:left;) blockposition

Sidfot(bredd:500px; blockbredd
höjd:100px; blockhöjd
bakgrundsfärg: #0000FF; blockfärg
clear:both;) standard blockposition

Och efter att vi skrivit alla dessa kommandon kommer vi att få ett sådant ramverk för webbplatsen.

Innan vi pratar om att arbeta med elementens storlek, deras placering, marginaler och indrag, ska jag berätta lite om själva elementen, eller mer exakt om deras typer.

Alla element (taggar) kan delas in i två kategorier: Block och sträng.

Vad är skillnaden?

Jag tror att namnen i sig redan talar om skillnaderna. Block- eller boxelement är behållare rektangulära områden på en datorskärm, som enkelt kan tilldelas en viss position och storlek, kan andra block placeras i dem, och deras placering i förhållande till varandra kan bestämmas. A strängelementär placerade på en rad, justerade längs dess baslinje och tjänar som regel för att formatera och redigera text.

Att blockera ( blockera) element inkluderar: